画像のレイアウト - 趣味サイトのためのCSS3講座

画像のレイアウトについての説明です。

サイト内に画像を載せる場合、あらかじめ画像のサイズを調整しておけばその通りのサイズで表示されますが、大きいサイズの画像はスマートフォンなどの画面サイズに合わせて見やすく表示させる必要があります。(これを「レスポンシブデザイン」といいます)
画像サイズをレスポンシブデザインに適用させる場合、「width: 100%」「height: auto」で基本的には画面サイズいっぱいの横幅・それに合わせて高さは自動調整で表示されるようにします。しかし、これだとパソコンやタブレットでは大きくなりすぎてしまうので、「max-width: 450px」というように指定し、一定のサイズ(ここでは450px)を超えないようにしておきます。

《例》

img {
width: 100%;
height: auto;
max-width: 450px
}

《表示結果》

サンプル画像
▲ページの先頭へ
「img:hover { opacity: 数値 } 」で、画像の上にマウスが乗ったとき、もしくは画像をタップしたときに画像を薄くして「この画像はクリックできる」ということをユーザーに伝えることができます。(文字にも適用できます)
数値は0〜1の間で指定し、0に近づくほど薄くなります。

《例》

img:hover {
opacity: 0.5;
}
 

《表示結果》

サンプル画像
▲ページの先頭へ

>>CSS3講座メニューへ戻る