はじめに
img レスポンシブというようなワードでimgタグによって出力される画像をレスポンシブ対応させようとしたことはないでしょうか？
いろいろな記事を参考にしてるとどれが正解のコードなのか分からなくなってしまいます。
デザインに正解はないから見た目が整っていればいいんだよという人もいれば、これはHTMLのルールに則っていないからダメだという人もいます。
初学者は何を参考にすればいいのか分からず頭を抱えてしまうので、テンプレートを基にコードを書いて貰えばいいのでは？と思ったので、今回はimgタグのレスポンシブのレンプレートを作ります
前置き
以下の知識は知っているものとして話を進めていきます。
- ブロックレベル要素
- インライン要素
- imgタグはインライン要素
- width
- max-width
画像をレスポンシブ対応していく
早速レスポンシブ対応にしていきたいところなのですが、imgタグはブロックレベル要素の子要素にして扱うということを知っておいてください。
HTMLの配置ルールではブロックレベル要素の中にインライン要素を配置するという考え方があるのでそれに則り、imgタグはブロックレベル要素の中に配置していきます。
imgタグの親要素は何タグにするべき？
HTMLは文脈を意識してマークアップする必要があるので、その画像がどのような扱われ方をしているかに注目します。
と言われましても。。。という方は少なくないはず。
まずはimgタグの親になるタグを知っておく必要があります。
以下の三種類がimgの親になることが多いです。
- p
- figure
- div どのよう時にpタグ、figureタグ、divタグを使いわかればいいのか次で紹介します。
pタグ
- imgタグにalt属性がある時
- 画像がないとその文脈が分からない時
figureタグ
- 文脈が画像を参照している時
divタグ
- pタグ、figureタグどちらにも当てはまらない時
- 見た目だけを整えたい時
テンプレートを作る
img {
max-width: 100%;
}
もしくはこちらでも大丈夫です。
img{
width: 100%;
}
imgのheightは初期値がautoなので、わざわざheight: auto;を書かなくても大丈夫です。
テンプレートを使用した例
今回は見た目だけ整えたかったのでimgタグの親にはdivタグを用いています。
異なるwidthでもちゃんと比率を保持してくれるようになっています。
See the Pen
responsive-lecture by Daichi Nabeshima (@nabeshi)
on CodePen.