ToC

• そもそも苦手意識があるところは?
• 逆に雰囲気わかってそうなところは?
• レイアウト
  • 外在サイズ設定と内在サイズ設定
  • boxの構造
• セレクタ
• 優先順位
• 詳細度(Specificity)
• layout
  • flexbox
  • grid

そもそも苦手意識があるところは?

• flex、grid、floatとかその辺がどういう理屈でレイアウトしているのか
• marginの相殺の挙動
• width,heightの指定がなんかうまくいかない時があるな〜

逆に雰囲気わかってそうなところは?

• block要素とinline要素があって、それぞれどっちにデフォルトで
• 詳細度はそんなに混乱せず把握できてると思う
  • けどそらで使うのはまだ無理

レイアウト

外在サイズ設定と内在サイズ設定

• widthに100pxとか指定するのは外在サイズ設定で、内部のコンテンツがあふれるとoverflowする
• 一方でmin-contentをwidthに指定すると、内在サイズ設定になって中のコンテンツの内容に応じてサイズが変わる

boxの構造

• すべての要素はBoxである
• Boxは外からmargin > border > padding > content の順に囲まれてる
  • paddingの領域はscrollバーを含む
  • 逆にoutlineやbox-shadowはmarginの領域に出ていく
• box-sizingという設定
  • 要素全体の幅と高さをどのように計算するかを設定する
  • content-boxとborder-boxを覚えておくと良さそう
    • 前者の場合、widthが200でborderやpaddingの設定があるとwidthは200+それらの設定の値になる
    • 後者はborder領域込みでサイズが決まる
    • すべてのbefore/after疑似要素にborder-boxをつけるresetCSSなんかは一般的みたい？

セレクタ

• [hoge='aaa' s] で大文字小文字を区別する。逆にiで無視する。書き方がいっぱいあるな
  • *=で部分一致、^=で先頭$=で末尾の一致を取る
  • 見通し悪くなりそうだからあまり使いたい気持ちにはならないな...(ライブラリとか作るときは便利かもしれんが)
    • hrefの末尾に一致させてファイルの拡張子に合わせてstyle変えるのは面白そうだった
• 疑似要素
  • before/after以外にselectionやlistのスタイルを指定する::markerなんてのもある
    • 知らないとたどり着けない系

優先順位

• 同じ詳細度だとあとに定義されたものが勝つ
  • 最近意識してないけど、styleタグやlinkがどこで読み込まれているかは優先順位に影響する

詳細度(Specificity)

• 指定の仕方でスコアが違う。例えば*によるユニバーサルな指定は0pointらしい
• 意外とポイントの桁がでかくて、classは10だけどID指定は100だしinlineは1000
  • importは10000らしい
• 詳細度の指定で、a.class-a.class-bのようにすると21ポイント。複数クラスの指定があるとその分ポイントがつく
• classa.classaのような指定でも詳細度のポイントは稼げる。見たこと無いけどおもろいな

layout

• column-countを2にした時、liの一覧が親のhightを超えると自動で2列になる、というような表現が可能
  • ニュースの記事とかに使えるとか。パラグラフを並べる
• gridは縦横軸ごとにサイズが変わるようなレイアウトに使う
  • 2x2のboxの右に、1x1の要素を4つ並べたりとかできる
• flexはどっちに寄せるかだったり、要素間のサイズを指定できる
  • gridと違って縦か横かどっちかに向かってのレイアウトになる

flexbox

• rowかcolumnの一方向
  • flex-directionで設定。これがmainになる。mainじゃない方をcross-axisと表現する
  • row-reverseのように逆向きにすることも可能
• 親のスペースに応じてサイズを可変できる
• flex-wrap はwrapにするとはみ出した分がcross-axis方向にずれるみたい。二段になる
  • nowrapにするとoverflowする
• flex-flowを使うと、flex-directionとflex-wrapをまとめて指定できる
• display:flexを有効にした場合、子componentでflex:1のようにサイズを決めるとそのサイズの割合で描画される。flex:1とflex:2がある時、サイズは1:2になる

grid