EVERY LAYOUT モジュラーなレスポンシブデザインを実現するCSS設計論

ヘイドン・ピカリング(著者), アンディ・ベル(著者), Bスプラウト(訳者), 安田祐平(監訳), 横内宏樹(監訳)

• 販売会社／発売会社: ボーンデジタル
• 発売年月日: 2021/11/23
• JAN: 9784862465177

商品レビュー

2025/10/16

【読み始めたきっかけ】
本屋で見かけて、これは良書確定だと思った。
CSSの設計本は読んだことなかったが、プロジェクトで使われてる設計の意図がわかる

【読んで感じたこと】
タイポグラフィに関する知識が足りないのでもっと深掘りしたいと思った

displayプロパティとは

インライン要素は書字方向に、スペースが開いていれば流れ込む
ブロック要素はフロー方向に入る

すべてのボックスにborder-boxモデルを使うのが望ましい。そうすることでボックスのサイズの計算や予想が簡単になる（ユニバーサルセレクタで指定するのがいい）

カスケード
スタイル競合時に、どのルールを適用するか決める仕組み
重要度
!important の有無
詳細度
セレクタの具体性（id > class > 要素）
宣言順
同レベルなら後に書いたものが優先

width: 100%は親要素の幅と同じにする

メディアクエリを使うと、レイアウトの再構成をハードコーディングに委ねることになる

コンテナクエリとは、親要素のサイズによって子要素のスタイルを変える機能

要素型セレクタ
タグを直接指定するセレクタのこと

グローバルに作用するCSS規則を活用する重要性は、HTMLのスタイル設定をグローバルに、かつカテゴリごとに行えることがCSSの存在意義であり、要素を一つ一つ別々に扱うことには向いていない。効率的に、あらゆる種類のレイアウトや美観をwebで形成できる手段はない、レイアウトから美観を分離する関心の分離が実現できる。

インラインは悪夢、idは覚えるの大変、シャドウDOMはグローバルなCSSを当てられない

ルックアンドフィール
見た目と操作感のこと

フクロウセレクタは、隣接結合演算子を用いて、子要素のトップとボトムへマージンを設けず、間にマージンを設けることができる

ショートハンドプロパティは、指定されていない部分は初期値にリセットされることがある

inline-blockが設定されている要素感に、スペース文字や改行が含まれていると実際のデザインには1文字分のスペースが表示されてしまう

scrollbar-widthプロパティを使用すると、スクロールバーにスタイルを設定できるが、macOSにおいてはスクロールバーの表示が常に表示されている場合のみ有効

2023/12/09

講師のオススメに挙がっていた書籍
この本はマジで神
中央揃えで悩まなくなったし、この本のお陰でポートフォリオ完成した説ある
初心者であることは変わらないけれど、当社比で言うとワンランク技術力が上がった
初学者的にはこの本はマジで当たり
編集して翻訳しようと思った人に感謝

2021/12/15

よくあるレイアウトパターンを再利用可能なモジュールとして扱う「レイアウトプリミティブ」という概念を学べる本。フロントエンドエンジニアの方はもちろんCSSの知識があるUIデザイナーにもオススメ