はじまる

適当な事を適当に書く

CSS を基本からおさらいする:CSS Box Model

偶に、個人用の小さなWebアプリを作る時がある。其ういう時、私は、UI周りの実装手段としてCSSフレームワークを利用する(私がCSSを書いていたのは太古の頃だし、もうほとんど覚えていない)。けれど、なんだかんだいって、自分の欲しいUIを作るとなると、自分でCSSを書かなきゃいけない場面が多い。ということで、太古の知識を思い出す為に、そしてあわよくば更新する為に、CSSについて基本というか初心者的な点から振り返っていきたい。ちなみに体系的にではなく、気になったトピックだけ離散的に書く。

とりあえず CSS Box Model。

Introduction to the CSS basic box model - CSS: Cascading Style Sheets | MDN

HTML文書内に長方形を挿入する際に、その長方形を表すモデル。枠線ありの長方形が前提になっている。なので、要素の階層としては下図のようになる。

https://mdn.mozillademos.org/files/8685/boxmodel-(3).png

コンテンツがあり、その外縁としての枠線がある。コンテンツと枠線の間の距離を示す位として「padding」、枠線と他要素との距離を示す位として「margin」がある。ちなみに「padding」は「詰め物」という意味。枠と内容物の間を埋める詰め物だ。ダンボール箱にはいるクッション材とかのイメージ。「margin」はその名の通り、余白や余裕を表す。

中身が先か、箱が先か。

box-sizing でターゲットを決める

とりあえず大きさを指定しなければいけない。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 中身)の大きさを決める要素

長方形の大きさなので、縦横の2辺の長さで箱の大きさが決まる。

  • height
  • width

上記の2要素のサブ要素として以下の4要素がある。上記2要素でもカバーできるが、特徴をより小分けにして管理する必要がある時は、下記のような細かい要素を使う方が良い。

  • max-height
  • min-height
  • max-width
  • min-width

詰め物(padding)の大きさを定義する要素

  • 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

サブ要素として以下がある。

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right
  • margin-trim (現時点で各種ブラウザで未実装)

大きさだけじゃない、挙動を定義する要素

  • overflow

サブ要素として以下がある。

  • overflow-x
  • overflow-y

あとは、HTML文書に書き込みはするが、要素をユーザーに閲覧させるかさせないかのコントロールをおこなう

  • visibility

新し目の要素として、スクロール時の挙動のコントロールをおこなう

  • overscroll-behavior

などがある。