偶に、個人用の小さなWebアプリを作る時がある。其ういう時、私は、UI周りの実装手段としてCSSフレームワークを利用する(私がCSSを書いていたのは太古の頃だし、もうほとんど覚えていない)。けれど、なんだかんだいって、自分の欲しいUIを作るとなると、自分でCSSを書かなきゃいけない場面が多い。ということで、太古の知識を思い出す為に、そしてあわよくば更新する為に、CSSについて基本というか初心者的な点から振り返っていきたい。ちなみに体系的にではなく、気になったトピックだけ離散的に書く。
とりあえず CSS Box Model。
Introduction to the CSS basic box model - CSS: Cascading Style Sheets | MDN
HTML文書内に長方形を挿入する際に、その長方形を表すモデル。枠線ありの長方形が前提になっている。なので、要素の階層としては下図のようになる。
.png)
コンテンツがあり、その外縁としての枠線がある。コンテンツと枠線の間の距離を示す位として「padding」、枠線と他要素との距離を示す位として「margin」がある。ちなみに「padding」は「詰め物」という意味。枠と内容物の間を埋める詰め物だ。ダンボール箱にはいるクッション材とかのイメージ。「margin」はその名の通り、余白や余裕を表す。
中身が先か、箱が先か。
box-sizing でターゲットを決める
とりあえず大きさを指定しなければいけない。box-sizing 要素で箱の大きさをどういう基準で決めるか、を選択する。
box-sizing 要素に指定できる選択枝として、下記がある。特にbox-sizing を指定しない場合では content-box が自動的に設定される。
- content-box 「箱の内容物」の大きさをもって、「箱の大きさ」を導き出す。内容物(content)の大きさに詰め物(padding)の大きさと枠線の太さを足したものが、「箱の大きさ」となる。上図だと「Content-edge」に該当する。
- border-box (もしくは border) 「（枠線を含む）外縁の大きさ」が「箱の大きさ」となる。上図だと「Border Edge」に該当する。
使い分けのイメージでいうと下記のようになると思われる。引越しの時のダンボール箱購入みたい。
- 中身ありきで、箱の大きさを考えるか
- 箱の大きさが決まっていて、そのなかに入る中身を考える
box-sizing - CSS: Cascading Style Sheets | MDN
次は、要素の大きさを決めていこう。
サイズを定義する6変数
さて、箱の大きさの基準となる対象(箱自身 or 中身)が決まった。次はその大きさを決めなければいけない。大きさは、下記のいずれかで指定できる。
- length 大きさを絶対値で設定する。設定値は MDN - length を参照のこと。
- percentage 自要素（箱 or 中身）を内包している、もうひとつ外部の要素の大きさ(height or width)に、さらにここで指定した百分率をかけた値を、自要素の大きさとして設定する。MDN - percentage を参照のこと。
- auto ブラウザが自動で大きさを設定する
- max-content 中身の大きさの最大値を自要素（箱 or 中身）の大きさとする。
- min-content 中身の大きさの最小値を自要素（箱 or 中身）の大きさとする。
- fit-content(<length-percentage>) 中身の大きさに合わせて自要素（箱 or 中身）の大きさを決定する。
箱(or 中身)の大きさを決める要素
長方形の大きさなので、縦横の２辺の長さで箱の大きさが決まる。
上記の２要素のサブ要素として以下の４要素がある。上記２要素でもカバーできるが、特徴をより小分けにして管理する必要がある時は、下記のような細かい要素を使う方が良い。
- max-height
- min-height
- max-width
- min-width
詰め物(padding)の大きさを定義する要素
サブ要素として以下がある。
- padding-top
- padding-bottom
- padding-left
- padding-right
枠線(border)を定義する要素
詰め物(padding) の外周を縁取るのが枠線(border)だ。
- line-width 枠線の太さを決める。
border-width と同じ。設定がなければ自動的に medium になる。絶対値もしくは thin | medium | thick が設定可能。
- line-style 枠線の形式を決める。
border-style と同じ。設定がなければ自動的に none になる。none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset が設定可能。
- color 枠線の色を決める。
border-color と同じ。設定がなければ自動的に currentcolor になる。設定値はMDN - color-valiueを参照。
border はスタイルを含め、関連する要素が多い。それらについては MDN -border を参照のこと。
余白(margin)の大きさ定義する要素
サブ要素として以下がある。
- margin-top
- margin-bottom
- margin-left
- margin-right
- margin-trim (現時点で各種ブラウザで未実装)
大きさだけじゃない、挙動を定義する要素
サブ要素として以下がある。
あとは、HTML文書に書き込みはするが、要素をユーザーに閲覧させるかさせないかのコントロールをおこなう
新し目の要素として、スクロール時の挙動のコントロールをおこなう
などがある。
