PHP & JavaScript Room :: 設置サンプル

シャドウ（影）に使用する画像を1枚用意します。 そのシャドウ用画像をdiv要素の背景に指定し、そのdiv要素の中にある写真画像を、そのdiv要素から左上に少しずらして表示することで画像を浮き出た感じに見せています。

ずらしが大きいほど影が大きくなります。シャドウ用画像は5px四方のグレーの背景画像を使用しています。 シャドウは、写真の大きさに合わせて伸縮します。

シャドウ（影）に使用する画像を1枚用意します。 そのシャドウ用画像をdiv要素の背景に指定し、そのdiv要素の中にある写真画像を、そのdiv要素から左上に少しずらして表示することで画像を浮き出た感じに見せています。

ずらしが大きいほど影が大きくなります。シャドウ用画像は5px四方のグレーの背景画像を使用しています。 シャドウは、写真の大きさに合わせて伸縮します。

<style type="text/css">
    /* 親要素 */
    .shadow {
        background-image:url(/content/img/css/shadow.gif);    /* 背景画像を指定 */
        background-repeat:repeat;    /* 背景画像の繰り返し */
        background-position:right bottom;    /* 背景画像の表示位置 */
        float:left;    /* 左寄せ */
        margin:13px 5px 0 5px;    /* 文字との間隔調節 */
        padding:0;
    }
    /*
        親要素から画像をずらした部分が“影”になります。
        left、topの数値が小さくなるほど影が太くなります。
        画像に枠線を付けたい場合は、ボーダープロパティで指定します。
        例) border:1px solid #000;
    */
    .shadow img {
        position:relative;    /* 親要素から相対位置に表示 */
        left:-3px;    /* 親要素から左に3pxずらす */
        top:-3px;    /* 親要素から右に3pxずらす */
        border:0;    /* 画像の枠線なし */
    }
</style>

<div class="shadow"><img src="/content/img/pic1-thumb.png" alt="ケーキの写真" /></div>
<p>
    シャドウ（影）に使用する画像を1枚用意します。
    そのシャドウ用画像をdiv要素の背景に指定し、そのdiv要素の中にある写真画像を、そのdiv要素から左上に少しずらして表示することで画像を浮き出た感じに見せています。
</p>
<p>
    ずらしが大きいほど影が大きくなります。シャドウ用画像は5px四方のグレーの背景画像を使用しています。
    シャドウは、写真の大きさに合わせて伸縮します。
</p>
<br clear="all" /><!-- 画像の回り込みを解除したい位置に挿入 -->

<div class="shadow"><img src="/content/img/pic1.png" alt="ケーキの写真" /></div>
<p>
    シャドウ（影）に使用する画像を1枚用意します。
    そのシャドウ用画像をdiv要素の背景に指定し、そのdiv要素の中にある写真画像を、そのdiv要素から左上に少しずらして表示することで画像を浮き出た感じに見せています。
</p>
<p>
    ずらしが大きいほど影が大きくなります。シャドウ用画像は5px四方のグレーの背景画像を使用しています。
    シャドウは、写真の大きさに合わせて伸縮します。
</p>
<br clear="all" /><!-- 画像の回り込みを解除したい位置に挿入 -->