CSSの練習を終えて

今回は、与えられたHTMLに自分で作成したCSSをあて、見本と同じようなレイアウトに近づけるという課題に取り組みました。 CSSだけでアイコンを作成するなど、難しい部分もありましたが、なんとか提出してOKをもらうことができました。以下、見本のCSSと自分で作成したCSSを比較して、参考になった箇所を列挙したいと思います。

文章の読みづらさの原因

f:id:midoriasi:20170718160640p:plain

自分の作ったCSSだと行間の隙間がなく、文章が非常に読みづらい状態だった。見本では文章にline-heightで行の高さが設定してあり、とても読みやすくなっていた。 ※予期せぬ結果を防ぐためline-heightは単位なしで設定することが推奨されている。数値だけを指定すると、数値x要素のフォントサイズになる。

line-height - CSS | MDN

aタグをblock要素にしてクリックできる範囲を広げる

通常だと、aタグはインライン要素のため、クリックできる範囲は文字の大きさとイコール。 line-heightを指定しても、「行間」の隙間が広がるだけなのでクリックできる範囲は変わらない。 display: block;としブロック要素にすることで、要素自体の大きさを変えることができるようになり、クリックできる範囲も広がる。