@nacotposted at 2023-03-11

【CSS】headerにおけるline-heightの使い方について

Q&A

HTML CSS

HTMLCSS初心者です。
現在、こちらの模写サイトを参考にサイト作成の練習をしています。
https://code-step.com/coding-recommend/
今回、cssを見ていて疑問に感じたことを質問させてください。

以下は模写サイトのcssの抜粋なのですが、ヘッダーのロゴにあたる「.site-title」と「.site-title a」のコードの組み方についてよく理解できずにいます。

↓模写サイトの記述

See the Pen Untitled by harima (@nacot) on CodePen.

↓自分なりに書いてみた時のコード

See the Pen Untitled by harima (@nacot) on CodePen.

　
　
今回疑問に感じたことは、以下の3点です。
①なぜサイトロゴ部分にあたる.site-titleにline-height: 1px;を書くのか。
　.headerに書いた場合、見え方への不具合やそのほか問題が生じるのか？それとも特に問題はないのか。
②.site-titleにてwidth: 120px;を書く理由。
③.site-title aを書く理由。

いくつか企業サイトを見てみたのですが、探し方が悪いのか、ヘッダーロゴにline-heightを使っているサイトが見つからず質問を投稿しました。
また、そもそもこのような書き方はしないのか？と思ったりもしたので、適切な記述をご存じの方がいらっしゃれば教えていただけると嬉しいです。

よろしくお願いいたします。

1Answer

@tanimoto-hikari posted at 2023-03-14

①line-heightについて
line-heightを指定しないとデフォルトはnormalで指定されます。
normalはブラウザに従い1.2が割り当てられるのでそれを防ぐためかと思います。

②width:120pxについて
内部にある画像の大きさを120px以上にならないように親要素で制御しているのだと思います。

③.site-title aのdisplay:blockについて
aタグの高さが内部の高さと同等になるようにしているのだと思います。
添付する画像は開発者ツールで確認して、display:blockを無効にした時のaタグと有効の時の画像です。

display:blockを無効時

display:blockを有効時

ちなみに、imgタグにはwidthとheightを省略するのは良くありません。

0Like

Comments

@nacot
Questioner
分かりやすいご回答ありがとうございます！お礼が遅くなってしまい申し訳ありません。

②のwidth:120pxは、.site-title全体に対しての設定なのかなと思い込んでおり、何のための設定なんだろうと混乱していました。画像に対しての設定なんですね。

>ちなみに、imgタグにはwidthとheightを省略するのは良くありません。
とのこと、今回のplifile画像にかかわらず、widthとheightは全てのimgタグに対して設定が必要という理解で大丈夫でしょうか？

もしお時間許しましたら、教えていただけますとありがたいです。
@tanimoto-hikari
> widthとheightは全てのimgタグに対して設定が必要という理解で大丈夫でしょうか？

その理解で問題ありません！
widthとheightを設定しないとページパフォーマンスの指標で重要なCLSという値が悪くなってしまうためです！

ただ、幅を固定値で指定するということはレスポンシブにはならないので、画面幅に合わせて縮小や拡大してほしい場合はclassをつけるなどで対応する必要があります。
@nacot
Questioner
ご回答くださりありがとうございます。

分かりやすくて理解が深まりました。
レスポンシブ対応させたいときは注意が必要ということですね。

お時間下さりありがとうございました！
@tanimoto-hikari
お役に立ててよかったです！

Are you sure you want to delete the question?

【CSS】headerにおけるline-heightの使い方について

1Answer

Comments

Your answer might help someone💌