画像を内包するaタグのCSS設計について

Question

<a href="#">
  <img src="#">
</a>

※例として、画像の幅は40x40

aタグ、imgタグはデフォルトではinline要素だと思いますが、aタグ自体は内包するimgタグ分の高さは出ない認識です。

高さを出すには、aタグにdisplay: inline-blockを付与する必要があると思いますが、CSS設計の思想として、わざわざ高さを出すために画像を内包するaタグにinline-blockを付ける必要はあるのでしょうか。

高さを出さない（inline）でも実動作上は問題無いのですが、デベロッパーツール等で確認するといつも気になっています。

恐れ入りますが、ご教示お願いできると幸いです。

Answer 1

検証ツールでは確かに画像分の高さは出ていませんが、
ブラウザの挙動としてaに内包されたimg要素はそれ全体がリンク領域として機能しますので、
個人的には装飾・レイアウト上の理由がなければそのままで良いという認識です。

逆にレスポンシブWebデザインの際、全てのa要素がinline-blockになっていることで、
IE11で内包されたimg要素のmax-widthがうまく機能しないバグが発生する可能性があるので
理由もなくむやみに全部inline-blockにするのは危険と考えております。

Comments

[qasev]

IE11のバグの件は初耳でした。ありがとうございます。

不要なコードは極力入れないというのがまず原則ということで、
他の回答者様の回答含め、理解させていただきました。

しかし、コーダーのレベル？によっては、aタグ自体の領域が画像領域の下にはみ出しており、そのはみ出し分を余白として使うなどの誤った使い方をするケースがたまに見られます。

コーディングルールを制定することのない小規模かつ複数人での開発時にこのようなことになると、結合時に不要な手間がかかることがあります。

こういった事象はそもそも論外だと思いますが、
inline-blockさえつけたらこのようなことも起きなくなるのでは、
というのも質問の背景の一つです。

ご意見をいただき大変参考になります。

[aKusano]

IE11のバグは、max-width:100%;が設定されているimg要素の直接の親要素（例えばa要素）がinline-blockまたはtable-cellで、かつwidthがautoである場合に発生します。
直接の親がinlineなら、スルーして更にその親要素の幅に合わせて伸縮してくれますが、なぜかinline-blockとtable-cellの場合にはこれが効かないんですよね。。。

意図的に設定した場合は気づきやすいですが、一律inline-blockになっていると思わぬ所でアレ！？　という現象が起きかねないのでリスクは避けたほうがいいかな、と思った次第です。

[qasev]

詳細にバグ内容ご教示いただきまして誠にありがとうございます。
理解いたしました。

極力必要ではないコードは使わないようにという所を意識するようにいたします。

ありがとうございます。

Answer 2

思想…ということなので個人的な意見を述べると、CSS自体はただの装飾なので、つけてもつけなくても好きにしていいと思っています。
ただ設計として考えると、要素の状態は人間の想像に近くしておいた方がいいのかなと思うので、私ならinline-blockを指定しますね。
修正するときとか、ほかの人がデバッグするときのことを考えれば視覚的に混乱させないようにしたほうが親切かな、と。

Comments

[qasev]

ご回答ありがとうございます。

私もNatsumiOki様と同じ考えなのですが、色々なサイトを見てもinline-blockにしているところが殆どなく、あれ？考え方間違っていたのか？と思うようになりまして今回の質問に至ります。

ありがとうございました。

[NatsumiOki]

パフォーマンスの観点からは不要なソースは書かないほうがいいですが、プロジェクトによってはメンバーのスキルが均質でないこともあるので、人が理解しやすくメンテナンスしやすい方が、結果としてクオリティが落ちにくいという考え方をしています。
自分一人で作るなら気にしなくていいんですけどね(；´∀｀)

[qasev]

そうですね。不要な記述は1語でも削りたいという考えはあります。
保守性も考え、落とし所を探るしかないのかもしれません。

別の回答者様から、IEのバグの件もお話がありましたので、
使いドコロを見計らうということになってくると思います。

色々とアドバイスありがとうございます。

Answer 3

a要素に対して特に装飾するつもりが無いならそのままでもOK。

a {
  border: 5px #F00 solid;
}

などのようにa要素に対して装飾するならば高さをださないと、この場合ボーダーが画像を囲ってくれません。

img {
  border: 5px #F00 solid;
}

とするか、

a {
  display: inline-block;
  border: 5px #F00 solid;
}

と記述する必要があります。

この考え方を基準に使い分けてはいかがでしょうか。

Comments

[qasev]

ありがとうございます。

基本的には、この考えですよね。
特に装飾がなければあえてdisplay: inline-blockを付けない、
という方が多く、色々なご意見がいただけ勉強になります。