CSSを凝りすぎると永久に終わらない問題
HTMLのレスポンシブ対応の確認として、
架空会社のページを作成しています。
その中で、実際に存在する会社、企業ページなどを
数多く見ていく中で、
「何故この部分はこのスタイルを使っているんだろう？」
と思う箇所が腐る程出てきたので、備忘録として残します。
・line-height
line-heightは「行間の高さ」を指定します。
例えば、私が見た某サイトでは、ページのbodyタグに1.6と設定されていましたが、これはfontが10pxだとしたら要素の高さが1.6倍の16px分用意されるという事です。
そして、空白の6px分は、均等に上下に分けられて、上下中央に配置されることになります。
この仕組みを利用して、要素を上下方向に中央揃えする使い方を、HTMLの初級の内容で解説していたのを思い出しました。
・text-size-adjust
text-size-adjustは「テキストの拡大・縮小制御の制限」を行います。
プロパティには「none/auto」「パーセント表示（数値）」のどちらかが使われることが多いです。
その為、一般的にtext-size-adjustには「100%」のプロパティを設定し、画面を拡大縮小した場合文字サイズも連動するようにすることが多いそうです。
実機確認でも、要素のサイズ過不足やレスポンシブ対応による要素の並びなどを確認するだけでなく、拡大縮小を漏れなく確認項目に入れておく必要がありますね。
・letter-spacing
letter-spacingは、文字間の制御を行います。
ピクセル表示もできますが、文字サイズが違う各要素に対してbodyで一括で指定する場合、em単位で指定した方が便利です。（1em＝１文字の高さ）
サルワカという有名なサイトにも丁寧な解説がありますが、
0.1emでも十分広く見える為、これ以下に抑えた方が良いし、0でも正直、文章として見た目に違和感は感じません。
しかし、先程挙げた文字の行間を広めに設定している場合は文字間の距離がゼロだと窮屈な印象を与えてしまいますし、部分的にフォントが太い文字や細い文字だったりする場合の文字間は、要素毎に細かく設定した方が良いと感じます。
・font-smoothing
フォントの滑らかさを調整します。
...と、こういった色々な表現を調べていく中で感じたのは、
「これ一つ一つ丁寧に全部調べて導入していたら、永久に終わらなくないか？」
ということです。
現に、書籍でも全てが網羅されている訳ではありませんし、ウェブカツなどのスクールで教える内容も、当然厳選されています。
仕事の現場で求められる最低限度の品質を満たすために必要な、優先度の高い注意点や知識は、他にいくらでもあるからです。
誰かが言っていましたが、勉強自体はいくらでもできます。あとは、何にどれだけの時間を投下するかという問題。
一般公開されている企業のページは、時間と金を突っ込んで細部まで作り込まれていたり、他社案件で使ったソースを丸々引用して使い回したりしていると思われる為、当然ながら、細部まで、かなり作り込まれています。
今、最も優先すべき事は、
・レスポンシブ対応に関する全技術
・CSS設計（FLOCSS）
の２点に慣れること。
それだけは忘れず、念頭に置きながら、引き続き、サイトを組んでいきたいと思います。
