新年明けましておめでとうございます！ユアサです。
今年もarms inc. Engineer's Blogをどうぞよろしくお願いします。
今回は今までを振り返って、コーディングで自分も最初の頃はよくつまづいていたCSSの基本や解決策の例などを改めて書きまとめてみようと思います。
今回の記事は内容的にHTML・CSSの勉強をし始めた入門者や初心者の方向けの内容になっているので、「あ〜あるあるだな」と共感していただいたり（自分がドジなだけだったりするものもありますが）、つまづいた時のヒントなどにしていただけたらと思います。
デザインの行間に合わせたline-heightの値の求め方
これ、実は自分の場合は勉強会で教わるまで計算式があることすら知りませんでした・・・・。（でも割と知らない方もぼちぼちいるかなと思ってます）
計算といっても身構えるほど難しい事はなく、
行間（px）÷文字サイズ（px）
だけで求められます。参考までに、PhotoshopやAdobe XDのデザインツールで見かける以下のようなアイコンがありますが、その値が行間（行送り ※単位はpx）に該当します。
ちなみにline-heightの計算式を知らなかった自分はどうやって値を決定していたかというと、デザインと重ね合わせてブラウザの検証ツールで数値を細かく調整し、限りなくデザインに近い表示になるまでその作業を行なっていました。いけない・・・・・。
一応計算ツールもあるようなので、つい計算方法を忘れてしまった際はぜひ使ってみてください。
ulタグ、olタグに設定した覚えのないpadding-leftが反映されている
各ブラウザでは、デフォルトで適用しているスタイルシートがあります。例えばGoogle Chromeではデベロッパーツールで確認すると、シート名が「user agent stylesheet」と表記されています。
こういったデフォルトのスタイルをリセットCSSなどで無効化する方法も一般的ですが、弊社ではnormalize.cssで必要な箇所だけ整えるようにしています。リストタグは本文用のパーツとして活用したいので、デザインによってpadding-leftを0と指定するなど、必要に応じて上書きする必要があります。
要素に設定しなければいけない不透明度の存在を忘れる
これは自分がまだフロントエンドに入って間もない頃に数回ありました。
デザインデータの確認ポイントとしては、レイヤーの透明度、レイヤースタイルやフィルターなど、イラレやphotoshopの作り方で異なるので、この辺りを注意深く見る必要があります。
実装する際は、background-colorの場合は、RGBAカラーモデルで指定します。
R（赤）G（緑）B（青）A（アルファ値＝透明度：0〜1）の順に数値を入れます。
background-color: rgba(0,0,255,0.5);
参考にするべきデザインデータなどにそういった情報は一通り書かれていますが、自分の場合「単に他要素と比べて色が薄いのかな？」と思っていたので気付けませんでした。（自分が知識不足なだけですが）
backgroundプロパティで背景画像を設定したはずなのに表示されない
自分の場合、まず背景画像を設定して、とりあえず表示確認を・・・・・と確認しても何も表示されてなかったということがありました。当然なんですが、背景画像を設定したところで背景を表示させる筈の要素の中に何も書かれておらず空のまま、あるいは背景画像だけ表示させる場合は高さの指定が無いのでそのようなことが起こっていました。知恵袋などでも度々この内容のスレッドを見かけるので、これで引っかかっている方は結構多いんじゃないかなと思います。
もちろん要因は上記だけではなく、画像のパスの表記が間違っている場合もあります。もし背景画像が表示されないバグに当たったら、まずこれら二点は確認していきたいですね。
display:flexを使用した際に文字量によって要素が狭まってしまう
dl、dt、ddタグで表を作成するなど、タグ内でdisplay: flexをかけて、せっかくタイトル部分のpaddingを設定していい感じの幅にしたのに本文の文章量が長いせいでタイトルの幅が潰れてしまったといった経験をした方は比較的いるかと思います。これは解決するには簡単で、例えばタイトルを潰れないようにしたい場合は、タイトル部分のスタイルに「flex-shrink: 0」というプロパティと値を設定します。
flex-shrinkはフレックスコンテナ内のアイテムの縮み方の比率を指定する際に使用されるプロパティです。
まとめ
今回は初心に戻って、自分がつまづいていたCSSの基本について解決例を交えながらまとめました。
正直まだまだありましたが、これ以上は記事が長くなってしまうので比較的メジャーなものを取り上げて紹介しました。気付いた・初めて知った問題＆解決例やテクニックがあったら、備忘録の意味も込めてまたまとめていきたいと思います。
今回も最後まで読んでいただきありがとうございました（^人^）
