読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

背景画像を使ったフルードグリッド

レスポンシブデザイン

画像を可変(フルード)にするには、2種類のやり方があります。

imgタグで表示している画像にはフルードイメージの設定

img {
  max-width: 100%;
}

background-imageの場合、少し注意が必要です。imgの場合、img自身が幅や高さを持っているので、敢えて幅・高さを確保する必要はありませんが、背景画像の場合は背景画像を表示させる領域を確保する必要があります。固定値であれば、PXで指定するだけですが、フルードにしたい場合は値を%にしないといけません。幅に関しては%指定で問題ないですが、高さを%にすると色々と問題が出て来てしまいます。
そこで、高さに関しては%指定せずに代わりにpadding
で画像の表示領域を確保する方法をとります。
paddingはtopだろうがleftだろうがbottomだろうが、その要素の幅を基準とするので、その要素の横幅に対して画像の高さが何pxかを%に変換するだけです。
さらにbackground-size: の指定を忘れずにしましょう。



背景画像を表示したい領域が960px ✖ 420pxの場合、

固定値での設定

header {
  width: 960px;
  height:420px;
  background: url(img/mainvis_146.png) no-repeat;
}

フルード化

header {
  width: 100%;
  height:0;
  padding-bottom:43.75% ; /*420px÷960px=43.75*/
  background-size: cover;
}

画像をホバーしたらキャプションが出る

css3のtranstionを使って、画像をホバーしたらキャプションが出る設定にしてみましょう。

<li class="size-2x2">
<img src="img/ph01_l.jpg" alt="">
<div id="cap">
<h2>料理名</h2>
<p>値段</p>
<p>料理の説明</p>
</div>
</li>

css

  
/*キャプション*/

li{
  position: relative;
}

#cap {
width:100%;
height:100%;
background: rgba(255,255,255,0.5);
position: absolute;
top:0;
left:0;
z-index:100;
opacity: 0;
transition: ease 0.3s;
cursor: pointer;
}
#cap:hover {
opacity: 1;
background: rgba(255,255,255,0.7);
}