pubDate: 2024-03-03
author: sakakibara
cssは誰でも書ける。
そう思っているエンジニアやエンジニア採用担当者は多いと思う。
だが、実際にはcssを何のリファレンスも見ずに書ける人、保守性まで考慮したコードを書ける人は本当に極小数であると思う。
何よりも自分はcssをうまく(保守性を考慮して適切な方法で) 書けるとは思えていない。
以降ではいくつか自分が未熟だと感じるcss技術について学習記録をまとめる。
では、いってみよー
cssを扱う上でかなり混乱するポイントの第一位が文字サイズの単位だと思う。 混乱の原因は物理的な単位と論理的な単位、着目している文字以外の(外部の)影響を受けるかどうかであると思う。
物理的な単位というのはmmのような単位だ。実際、光速という物理定数を基準にしている。
昨今、レスポンシブデザインの広まりに伴い、上のような物理的な単位を使う機会は減ってきた。
代わりに、次に述べる論理的な単位というものが用いられる。
論理的な単位というのは上で述べたもの以外だ。
論理的な単位は通常、世間では相対的な単位と呼ばれる。
特によく使用する単位は以下。
論理的な単位で重要な概念にピクセル(px) というものがある。
多くの書籍やサイトでは
画面は点の集まりで構成される。1pxとはその点1つのことだ。
のように書かれている。
しかし、実際に画面を見てみると1点がrgbの色を出しているのではなく、
rbgそれぞれがまとまって3点で発光している。
果たしてどこまでが1pxだ？
仮に、1点でrbgすべての色を発光できたとしよう。
文字のフォントの大きさを16pxにして画面を200倍拡大表示したらそれは果たして何ピクセルだろうか？16の2乗で1024pxだろうか？だが、フォントは16pxに設定してある。
また、同じ面積を持つディスプレイなら高解像度であればあるほど、物理的な1点が小さくなることになる。そのため、画面の1点が1pxとして扱われないことがあります。
以上のような状況を考えると1点=1pxは扱いやすい考えですが、well-definedではありません。
pxは曖昧に定義されている概念であるため、基本的には以下を扱います。
rem
ブラウザの本文(<p>タグ)の大きさを1remです。
vw
画面の幅1%が1vwです。calc(1rem + 1vw)とすると、画面が小さくなるにつれ文字を大きくすることができます。
vh
画面の高さ1%が1vhです。
em
親の要素を1emとします。親の要素の1.5倍は1.5emです。
ch
charactor, 文字0の幅が1chです。
文字を表す種類の多さが学習者を混乱させる原因になっています。 が、これだけそれぞれ異なった幅で計算できたほうが便利な場面があるということです。 最低でもこの５つは覚えておきましょう。
htmlの基本はボックスである。 ボックスはcontents, padding, border, marginから構成されている。 これらの領域は0を指定することができる。 これにより、例えば、ボーダーは必ずしも幅を持つものではない。 また、負の値も指定することができる。
cssはこのボックスをどのように配置するかについてスタイリングすることができる。
スタイリングをする中で混乱しやすいのが、ボックスの要素を変更した際に、それに隣接するボックスまでも変更されてしまうことだ。
その混乱の根源となる要因はbox-sizingとdisplayプロパティにある。
ボックスの大きさをどこで規定するかについてを定めるプロパティがある。 height, widthを指定した際にどの領域を基準にしているかを決定する。 それがbox-sizingだ。 主に以下の選択がある。
box-sizing: content-box
height=100とするとcontentが100になる
box-sizing: border-box
height=100とするとcontent + padding + borderが100になる
デフォルトではcontent-boxが設定されているが、border-boxを指定したほうが計算しやすく推奨される。
特に
* { box-sizing: border-box;}で指定すると良い。
writing-modeというプロパティがある。 これは文を読む方向を指定するプロパティというものである。 たとえば、日本語の横書きなら左上から右下へ視線を移動させる。 モンゴル語やアラビア語では右上から左下へ視線を移動させる。
元々htmlやcssは単純に文を読むために作られた経緯があるため、こういう考えをする必要がある。
日本語や英語ではwriting-modeはhorizontal-tb(横書きでtopからbottomへ)が設定されている。 この場合、横方向を書字方向、縦方向をフロー方向とする。
displayプロパティというものは要素の配列方向を決定付けるプロパティである。 以下のような値がある。
display : block
このプロパティを持つボックスはフロー方向に作成される。
display : inline
このプロパティを持つボックスは書字方向に作成される。
重要な点として、書字方向のmarginとpaddingしか指定できない。
display : inline-block
このプロパティを持つボックスは書字方向に作成される。
inlineでは指定できなかったプロパティを指定することができる。
display : flex
このプロパティを持つボックスの子は書字方向に並ぶ。
display : grid
このプロパティを持つボックスの子はグリッドに並ぶ。
marginなどの設定はちょうど12時にある針が時計回りに回転するように設定される。上、右、下、左の順で指定される。