2021/11/23出版

著者

監訳

手に取った動機

CSSはつまみ食いでやってきたので、そろそろ体系的な本を読んどかないとな、と思った

1-01 ボックス

1-02 コンポジション

「継承よりコンポジション」はOOPだけでなくCSSでも使える

第2章が全部Layout Primitiveの解説になっているってことか

用語的には、Layout Primitiveを組み合わせてstylingすることをEvery Layoutと呼んでるのか #??

Reactのこの文脈での「継承」が何を指しているのかわからん

1-03 単位

ピクセルパーフェクトはそもそも実現不可能なのでやろうとするだけ無駄

単位としてpxを指定するのはやめたほうがいい

1-04 グローバルスタイルとローカルスタイル

utlitity class

: とか使わずに __ とかでも良い気もするけど

スコープ化されたstyleの方法

id

inline style

shadow DOM

この章、急にWeb Componentsの話が出てきたりして読みづらかった

2-01とかを読んでみないとよくわからない感じがする

1-05 モジュラースケール

1-06 公理

すごい

2章のここがイミフだったので理解したい

2-01 Stack

垂直方向のmarginを扱う

2-02 Box

基本要素

そんなに目新しいことは書かれていない

要素同士を区切るためのborderは親が指定する

stackにおけるmarginと同様

そうじゃないと隣接する要素の場合、borderが二重になってしまう

2-03 Center

要素の幅を特定のサイズを超えないように制限した上で中央に寄せる

カラム幅は60chを超えてはいけないとmargin: autoを使う

でもこれだけだと、 width: 60ch にしかならなくない？

もっと小さくしたい時はどうすればいい

/mrsekut-book-486246517X/101こうすればcontentの幅になる

左右中央寄せ

再読したい

2-04 Cluster

2-05 Sidebar

2-06 Switcher

画面幅に応じて、リストが横並びから縦並びになるやつ

再読したい

というかほぼ読んでない

2-07 Cover

Coverの中身が、上下中央揃えになる

header/footerの存在は許容する

上下中央揃え

再読したい

2-08 Grid

予めページ前提をgridに分割して指定した場所に配置して使うやつは非推奨

どうしてもmediaqueryが必要になってしまうため。

2-09 Frame

アスペクト比を制御する

まあ普通

2-10 Reel

そもそもReelっぽいものを実装する機会が少ない

2-11 Imposter

modalやdialogなど、画面の上に重ねる形で要素を中央配置するもの

おもしろい

2-12 Icon