📕

「プロの「引き出し」を増やす HTML+CSSコーディングの強化書」を読んで

2024/06/24に公開

CSS

今回はこちらの本を読んで、気になった点をピックアップしてまとめておきたいと思います。
かなりかいつまんで書いているので、気になったら是非書籍の購入をおすすめします。

プロの「引き出し」を増やす HTML+CSSコーディングの強化書

CSSの記述について

print

プリントした際の表示についても設定しておく。

@media screen and (min-width: 768px),print {
 ...
}

inline, block, inline-block

結構曖昧に使っているところ…

display	初期状態(width:auto)の場合の要素の幅
inline	内容物のサイズに依存(幅指定無効)
block	親要素の幅いっぱいまで広がる
inline-block	内容物のサイズに依存(幅指定有効)

nth-child

3カラムのカードの羅列で、一番左のカードだけ空白を空けたくない

/ * 3n + 1 = 1, 4, 7枚目のカードにだけ適用される */
.hogehoge:nth-child(3n+1) {
 margin-left: 0;
}

+

繰り返しの要素で一番上にだけCSSをかけたくない

/ * hogehoge__listが続いたら適用される = 一番上以外に適用 */
.hogehoge__list + .hogehoge__list {
 margin-top: 10px;
}

(普段 not + first-child を利用してました…)

aspect-ratio

ボックス縦横の比率をキープする

font-sizeについて

しかし、16px = 1remなのでremは直感的に開発しづらい
→ そこで、全体的に{font-size:62.5%}をかけておく
→ 10px = 1remになるので分かりやすくなる

CSS設計：BEM

パーツをブロック区切りでCSSを命名&管理する

Block__Element--Modifier

要素に直接スタイルを指定してはいけない

/* NG */
.hogehoge li {...}

デメリット

命名が長くなってしまう → そこで、Modifier箇所を区切って管理する方法も取れる。
※Modifierだと分かる記号をつける
※Modifier用の単体クラスはそれ単体で機能するようにする

/* before */
<div class="hogehoge-fugafuga__comment">
    <div class="hogehoge-fugafuga__comment__primary"></div>
    <div class="hogehoge-fugafuga__comment__secondary"></div>
</div>

/* after */
<div class="hogehoge-fugafuga__comment">
    <div class="hogehoge-fugafuga__comment _primary"></div>
    <div class="hogehoge-fugafuga__comment _secondary"></div>
</div>

その他のCSS設計

CSSをまとめる

ボタンなど、色が異なるが大枠は同じCSSというものは同じCSS部分をまとめる

.btn {
 /* ボタンのデザイン */
}

.btn-red {
 background-color: red;
}

.btn-blue {
 background-color: blue;
}

ユーティリティclass

よくつかうCSSはユーティリティーclassとして用意しておく
また何よりも優先させるべく、普段はなるべく使わないimportantを付与しておく。

.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 10 !important;}
.mt20 {margin-top: 20 !important;}

アクセシビリティ：HTML, CSSでの対応

input

inputのradioボタンやチェックボックスのデザインを変更したい場合、display:noneを付与してしまうとキーボード操作などがしづらくなってしまう。そこで透明にして、上からデザインを被せる。

opacity: 0;

読み上げ順に考慮する

サイドナビがある場合、変なタイミングでサイドナビ箇所の読み上げが起こらないようにHTMLは下の方に持ってきて、CSSで表示調整を行う。

alt

その画像で伝えたい情報をきちんとテキストに書き起こして記述する。
画像の前後にその画像と全く同じことテキスト情報が記載されている場合は、altを空で設定する。
→ 全く書かないということはしない！

alt=""

キーボード操作

キーボードだけで操作できるようにする。フォーカスが当たらない箇所には下記を付与する。

tabindex="0"

WAI=ARIA

・rol：div等で作成しているが、タグの役割を明示したい場合付与する。
・aria-*属性：アイコン等、テキスト情報を全く持たないものに情報を付与する際に利用

おわりに

CSSって本当に奥が深いですよね。。
初心者向けの本は世の中にかなり多いですが、中級者向けの本はあまりないのでとても勉強になりました。

お読みいただきありがとうございました。