記事の趣旨
初心者の自分が勉強をしている中、なぜかわからないが記憶に残らない事項がいくつかあるのでそれを記事にすることで記憶への定着を図る。基本的なことばかりなのでこの記事を読む人に学びを提供できるものではない。
コード例
<body>
<section>
<div>
<img src="sample.jpg">
</div>
</section>
</body>
section {
width: 400px;
height: 400px;
margin: 0 auto;
}
div {
height: 100%;
}
div img {
opacity: 1;
}
img {
width: 100%;
height: 100%;
opacity: .6;
}
ポイント
- divにつけたheight
- opacityの優先順位
- imgの高さと幅
1について
imgにwidth: 100%;とheight: 100%;を指定すると、幅は変化するものの高さには変化がない。これは以下の仕様によるものである（MDNより）。
パーセント値は、生成ボックスの包含ブロックの高さを基準に計算されます。包含ブロックの高さが明示的に定義されず (すなわち、コンテンツの高さに依存します)、この要素が絶対位置指定されていない場合は、値は auto になります。
そこで、imgの親要素であるdivに高さを指定している。widthと挙動が異なるので注意。
2について
imgのopacityがふたつあるので下に書いたopacity: .6;が適用されるようにも思えるが、詳細度はopacity: 1;のほうが高いので、こちらが優先される。
3について
imgはインライン要素なのでdisplay: inline-block;にしなければ高さと幅を設定できないようにも思えるが、imgは置換要素であるのでそのまま高さと幅を設定できる。