every layoutを読む
Haru
レイチェルアンドリュー
HaruWebデザインにおいては全てがボックスです
つまりボックスを生成するかしないかのどちらかです
Haru
クリップ領域を作って円型や扇形や四角など様々な図形にできる
具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。
Haru
transform は CSS のプロパティで、与えられた要素を回転、拡大縮小、傾斜、移動することできます。これは、 CSS の視覚整形モデルの座標空間を変更します。
Haruボックスモデル
レイアウトボックスの基礎となるモデル
コンテンツおよびパディング、ボーダー、マージンから構成されている
HaruWebブラウザは、いくつかの要素にデフォルトのCSSスタイルを適用してくれます。
Harudisplay blockはある一方方向において利用可能なスペースを占有します
通常は水平方向のスペースを占める（writing-modeが horizonal-tb ）に設定されているから
Harudisplay inlineのものは 書字方向（水平方向）に沿って行の中（inline) に展開される
要素が保持するコンテンツと同じだけの幅になり、スペースが空いていればどこでも流れ込んで配置される
Haruinlineは書字方向（水平方向）
blockはフロー方向（垂直方向）
Haruタイポグラフィ的に考えると、
ブロック要素は段落
インライン要素は単語
Haruブロック要素 幅や高さ、マージン、パディングを適用可能
インライン要素 水平方向のパディング、マージンのみ適用
（その周りのインライン要素と適合するように設計されています）
Haruインライン要素 幅や高さ、マージン、パディングを適用可能、書字方向（水平方向）に並ぶ
Harudisplay: none;にするとスクリーンリーダーからも取り除かれる
Harugrid flexはその要素自体は block要素と変わりはないが子要素の振る舞いが変化する
HaruWebは大体においてレスポンシブ
Haruコンテンツの大きさに応じてインライン要素であれば水平方向に、ブロック要素であれば垂直方向に広がります
HaruWebコンテンツは「動的」なもの 変化を前提としたものとして捉えるべき。
最初からCSSの柔軟性を使ってデザインすることを推奨する
Harubox-sizing プロパティ
一般的には border-boxモデルを使うのが望ましいとされています。
計算が容易になるからです
ワイルドセレクタ（ユニバーサルセレクタ）を使って全ての要素に適用しよう
*
Haruborder-boxを使わない例外として、本書で解説しているCenterレイアウトなどのように「コンテンツ自身」のサイズが重要になるものがあります。CSSのカスケードはこのような全体的な規則に対する例外に適用するように設計されています。
つまり、ワイルドセレクタで指定した要素よりもクラスで指定した要素が適用されます。
* {
box-sizing: border-box;
}
.center-l {
box-sizing: content-box;
}
ボックスの高さや幅が出ている場合のみ、 content-box, border-box には違いが出ます。
ブロック要素を別のブロック要素の中に配置する
子要素にcontent-boxを使ってpadding 1rem , width: 100% を適用する
Haruwidth 100% は、この要素の幅を親要素と同じにするという指示だからです。
Haruwidth autoにすると子ボックスは親ボックスにピッタリ収まります。
Haru要素のサイズは可能な限り、その内側のコンテンツと外側のコンテキストから導出されるべきだということです。
サイズを規定しようとするほど問題が生じやすくなる
Haru何をすべきかをブラウザに指示するのではなく、ユーザーやその画面、端末のために最適な結果になるようにブラウザ自身の計算によって独自の結論を引き出させましょう。
Haruプログラマにはお馴染みの「継承よりコンポジション」という原則があります
Haru継承によって全てを共通のオリジンに結びつけるよりも、単純な独立した部品（オブジェクトやクラス、関数）を組み合わせる方がより柔軟で効率的になるという考え方です。
Haru「継承よりコンポジション」の原則は「ビジネスロジック」に限った話ではありません。
フロントエンドのアーキテクチャやビジュアルデザインにおいても理にかなっている
Haru継承の考え方では、UI部品が最終的になんと呼ばれるかを最終的に意識せざるを得ない。
コンポジションでは、その部品やその部品を構成する小さな部品が何をするのかをはっきりさせることができる。
Haruレイアウトプリミティブ
ダイアログという形状の全てを孤立した独自のものだと考えていた。
しかし、実際にはコンポジションに過ぎず基本的なレイアウトを組み合わせていただけです。
Haruプリミティブとは何か
true
これを見ただけだと何を意味しているのかわからん
{
firstName: "田中",
lastName: "太郎"
}
さっきより製作者の意図が乗ってる
つまりプリミティブとは製作者の意図をあまり感じないようなもの？