「現場のプロから学ぶ CSSコーディングバイブル」を読んだ

「現場のプロから学ぶ CSSコーディングバイブル」を 2,023 年 11 月 10 日に読んだ。

目次

• メモ
  • マルチクラス p40
  • シングルクラス p41
  • ユーティリティクラス (汎用クラス) p41
  • 日本製のCSSフレームワーク MUSUBii (むすびー) p60
  • p87
  • 子孫結合子 p87
  • 子結合子 p88
  • 隣接兄弟結合子 p88
  • 一般兄弟結合子 p89
  • マージンの相殺 p100
  • 隣接兄弟要素 p101
  • 親と子孫を隔てるコンテンツがない場合 p102
  • 空のブロック p104
  • p109
  • ブラウザで表示をチェックするポイント p132
  • ソースコードのエラーはないか p133
  • 剰余演算子 (%) p189
  • 準備する p227
  • デザインデータを確認し、共通パーツを洗いだす p249
  • スマートフォンの場合はどうでしょうか。 p276

メモ

マルチクラス p40

1つの要素に対しに複数のクラスを指定する方法をマルチクラスと呼びます。
装飾や機能ごとにクラスを分けて作成します。
特徴としてクラスの再利用性が高くなりますがスタイルの適用範囲がわかりにくくなります。
事前にクラスを用意することで装飾を用意することも可能です。
代表的なものは Bootstrap などがあります。

<p class="button button-blue botton-large">ボタン1</p>
<p class="button button-red botton-small">ボタン2</p>

シングルクラス p41

1つの要素に対して2つ程度までのクラスを指定する方法をシングルクラスと呼びます。
使用する目的に合わせてクラスを作成します。
特徴としてクラスの再利用性は低いですがスタイルの適用範囲がわかりやすくなります。

<p class="button-primary">ボタン1</p>
<p class="button-secondary">ボタン2</p>

ユーティリティクラス (汎用クラス) p41

ユーティリティクラスとは主にクラス名が CSS のプロパティを表しているような便利なクラスを言います。
ユーティリティファーストな CSS の指定方法もありますが、ここでは、基本的には多用せず例外なケースでスタイルの調整などの目的で使用するものを指します。

<p class="button button-blue mb40 p40">ボタン1</p>
<p class="button button-red mb10 p10">ボタン2</p>

日本製のCSSフレームワーク MUSUBii (むすびー) p60

MUSUBii (むすびー) は YakuHanJP を開発しているデザイナーのクラクさんが作ったCSSフレームワークです。
非常に良く作り込まれていて、頻繁にアップデートされていますので、参考にしてみてください。
MUSUBii (https://musubii.qranoko.jp/)

p87

子孫結合子
p a { background:#ccc; }

子結合子
p > a { background:#ccc; }

關接兄弟結合子
p + a { background:#ccc; }

一般兄弟結合子
p ~ a { background:#ccc;}

子孫結合子 p87

セレクタの親子関係を表したい場合に使用する結合子を子孫結合子と言い、セレクタを半角スペースでつなぐことで指定できます。
子孫結合子は頻繁に使用しますので一番使う結合子となるでしょう。
次の例では .parent-div を親 (先祖)にもつ .child-p の場合に背景色を変更しています。

子結合子 p88

セレクタの親子関係で直接の親子を指定したい場合に使用する結合子を子結合子と言い、セレクタをつなぐことで指定できます。
子孫結合子と同じく親子関係を表すセレクタですが子結合子は直接の親子である必要があります。
次の例では .parent-div の直下にある .child-p の場合に背景色を変更しています。

隣接兄弟結合子 p88

セレクタで隣接する直後の要素を指定したい場合に使用する結合子を隣接兄弟結合子と言い、同じ親を持っている必要があります。
子結合子はセレクタを + でつなぐことで指定できます。
次の例では .sibling-p に隣接する直後の .child-ul の場合に背景色を変更しています。

一般兄弟結合子 p89

セレクタで特定の要素以降の要素を指定したい場合に使用する結合子を一般兄弟結合子と同じ親を持っている必要があります。
結合子はセレクタをでつなぐことで指定できます。
次の例では、 .sibling-p 以降に存在する .child-ul の場合に背景色を変更しています。

マージンの相殺 p100

CSSに上下の隣接する要素に対してマージンの相殺という動作があります。
慣れるまでは特に感じますが、理解できると相数を利用してシンプルにコードを書くことができます。
マージンの相殺は、基本的に次の3つの場合に発生します。

隣接兄弟要素 p101

こちらが一般的なマージンの相殺となり上下に並んだ要素のマージンは相殺されます。
このように隣接する要素の上下にマージンがある場合は

<div class="box1">
	<p>上の要素</p>
</div>
<div class="box2">
	<p>下の要素</p>
</div>

.box1 { margin-bottom:60px; }
.box2 { margin-top: 30px; }

次のように 90px にはなりません。
実際には、要素間のマージンは大きい方である 60px に合わせて相殺されます。

親と子孫を隔てるコンテンツがない場合 p102

入れ子のコンテンツで最初と最後の要素が親子で接している場合、相殺が起こります。

<div class="box1">
	<p>上の要素</p>
</div>
<div class="box2">
	<div class="box2-child">
		<p>子要素</p>
	</div>
	<p>下の要素</p>
</div>

.box1 { margin: 0; }
.box2 { margin-top: 30px; height: 100px; }
.box2-child { margin-top: 60px; }

次のように親要素に 30px、子要素 60px にはなりません。
実際には、子要素が親要素をはみ出し要素間のマージンは大きい方である 60px に合わせて相殺されます。

注意する点としては隔てるコンテンツがある場合、親要素と子要素の間にパディング、ボーダー、別の要素などある場合は相殺は起こりません。
例えば、親である .box2 にボーダーを指定します。

.box2 { margin-top: 30px; height:100px; border-top: 1px solid #000; }

すると先ほどのマージンが相殺しないことを確認できると思います。

原理としてはマージンが重なる場合に相殺が起こります。
今回のように間に何か挟まると蓋をされたようになり、重なりがおきず相殺が起こりません。
また、マージンボトムについても同様の条件で相殺が発生しますが、相殺しない条件にパディング、ボーダー、別の要素に合わせて高さが加わります。

空のブロック p104

空のブロックの場合、自分自身の上下のマージンでも隣接するとみなされ相殺されます。

<div class="box">
	<p>上の要素</p>
</div>
<div class="box1"></div>
<div class="box">
	<p>下の要素</p>
</div>

.box { margin:0 }
.box1 { margin-top: 30px; margin-bottom: 10px; }

次のように 40px にはなりません。
実際には、要素間のマージンは大きい方である 30px に合わせて相殺されます。

以上がマージンの相殺になります。
他にも例外はありますがこの3つを理解しておくとよいでしょう。

p109

このようにデフォルトスタイルシートはおおむね共通ですが、ブラウザごとに少しずつ異なっており細かな部分で違いがあることがわかります。
また、これらのスタイルシートは次のように公開されています。

Google Chrome (https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css)
Firefox (https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css)
Safari (https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)

ブラウザで表示をチェックするポイント p132

ブラウザで表示をチェックする場合、次の項目に注意してください。

・ソースコードのエラーはないか
・デザインは再現できているか
・スクロールを確認する
・ブラウザサイズを変えてみる
・ズームで縮小してみる
・マウスオーバー、クリック、タップしてみる
・極端なダミーを入れてみる

以上のことを一つ一つ見ていくことにします。

ソースコードのエラーはないか p133

エラーやタグの閉じ忘れなどないかチェックします。
高機能なエディタを使っている場合エディタの機能としてタグの閉じ忘れなど知らせてくれるものもありますので Markup Validation Service (https://validator.w3.org/) を活用するのが良いでしょう。

剰余演算子 (%) p189

剰余演算子は割り算の余りを求める計算です。
演算子と同じで 5% など値と区別するため演算子の前後にスペースを入れる必要があります。

.item { width: 10px % 2; }
.item { width: 0; }

準備する p227

では、やり直しの少ないコーディングをするための準備とは何でしょう。
効率よく作業するためにはまず手順や段取りを考えておくことが重要です。
なにも考えずコーディングをし、1ページずつ完成させながら制作していく方法は効率がよいとは言えません。

手順としてまずデザインの共通部分を見極めます。
その後、レイアウト、ヘッダー、フッターなどサイト全体で共通している部分から制作していくのがよいでしょう。
さらに共通パーツは後から確認しやすいようにまとめておくことをオススメします。
仮にこのような手順を取らずデザインの通り1ページずつ作成した場合どうなるでしょう、数ページであればさほど問題ないですが、100、200ページと増えてきた場合、あとから共通化部分があると判明した際は今まで作成したページも修正しなければなりません。
ここでやり直しが発生してしまいます。

CSSコーディングには事前の準備が大切です。
また、コーディング作業を進める場合、次のような流れを頭に入れて事前にシミュレーションしておくとよいです。

・デザインデータを確認し、共通パーツを洗いだす
・必要なページが分かっている場合は、先にファイルリスト一覧を作成する
・大枠のコンテンツの枠を作成する
・ヘッダー、フッターなど共通部分を作成する
・スタイルガイドを作成する
・ favicon 、 OGP 画像を準備する
・404ページを作成する
・検索ページを作成する
・詳細ページを作成する
・一覧ページを作成する
・トップページを作成する

では具体的にどのように進めていくのがよいか見ていきましょう。

デザインデータを確認し、共通パーツを洗いだす p249

ここからは実際にデザインデータを元にコーディングを進めていき Web サイトを作っていきます。
まずはデザインデータを確認し、共通パーツを洗いだす必要があります。
次のように一つずつ確認していきましょう。

・トップ
・一覧
・詳細
・404ページ
・スマートフォン

一番初めに、まず共通部分を作ります。
それから詳細のパーツ一覧のパーツをつくり、404ページなど個別のページを作ります。
そして最後にトップページを作ります。
トップページを最後に作る理由は、ホームページの中でトップページが一番イレギュラーと捉えることができます。
共通するパーツを使用する部分が少ないため、最後にコーディングした方が効率がいいと考えるためです。
これからデザインを確認しますが、確認するときの心構えとして、ここは似ているな、使えそうだ、など共通点を探しながら見比べるようにしましょう。

スマートフォンの場合はどうでしょうか。 p276

デザインは縦並びですが、 HTML 構造のまま縦にならぶと address と nav てしまいます。
この場合、次のように order を指定して表示順を切り替えます。

スマートフォンでは HTML の構造が PC と異なり 1 カラムで構成される場合が多いため逆になっている場合もあります。

.l-footer_address { order: 2; }
.l-footer_nav { order: 1; }
@media only screen and (min-width: 767px) { .l-footer_address, .l-footer_nav { order: initial; } }