写真の修飾

ボタンを複数並べて、各ボタンをクリック（またはマウスを合わせる）すると、指定した場所の画像を切り替え表示します。複数ある画像の場合はすぐその場で大きなサイズの画像を閲覧でき、閉じるボタンを押す必要はありません。またボタンの代わりにサムネイル画像に変更も容易です。

ジャバスクリプトを用いていますが、コピペで簡単に適用できます。

写真の挿入

HTML

<p><img src="写真のファイル名" width="幅" height="高さ" alt="代替えテキスト"></p>

枠を付ける

CSS

p {
border: 1px solid 線の色;
width:幅;
height: 高さ;
padding:枠線と写真の間隔;
background-color:#fff;
}

影を付ける

上記のCSSにbox-shadowを追加する

p {
border: 1px solid #333;
width:幅px;
height: 高さpx;
padding:枠線と写真の間隔px;
background-color:#fff;
box-shadow:2px 2px 5px #666;
}

めくれたようにする

CSSに「:before擬似要素」と「:after擬似要素」で斜めの影を挿入する

p {
border: 1px solid 線の色;
width:幅px;
height: 高さpx;
padding:枠線と写真の間隔px;
background-color:#fff;
position:relative;
}
p:before{
content:"";
position:absolute;
width:30%;
height:10px;
border:1px solid #fff;
bottom :15px;
left: 5px;
z-index:-1;
box-shadow:0 15px 10px #444;
transform:rotate(-5deg);
}
p:after{
content:"";
position:absolute;
width:30%;
height:10px;
border:1px solid #fff;
bottom :15px;
right: 5px;
z-index:-1;
box-shadow:0 15px 10px #444;
transform:rotate(5deg);
}