CSSでレイアウトしてみよう

box-sizing

役割＆特徴

まずは初期設定です。

初心者のかたはこの後出てくるmarginとpaddingでつまづきます。
横幅960pxのページにボタンを6個並べたい、じゃあボタン1つは160pxだな。
ここまでは問題ありません。
そこからボタンの周りに区切りの罫線を引きたい、ボタンの内側に余白を取りたいとなったときに、突然レイアウトが崩れます。

box-sizingを設定することで、罫線の幅とボタン内の余白を含めて、自動的に160pxに収めてくれます。
設定しないと、区切り線が1pxでボタンの幅が159px、余白を文字の半分の8px取りたいから・・・え～と左右合わせて16pxで、ボタンの横幅が143pxだな、と手計算してキリの悪い数字をCSSに記述していくことになります。

おまじないだと思って1番最初に設定することをオススメします。

使用例

*,
*::before,
*::after {
  box-sizing: border-box;
}

display

役割＆特徴

要素をインライン要素にするかブロック要素にするかを指定できます。

imgやfigureはインライン要素で、レイアウトしづらいことが多々あります。
そのため最初からブロック要素にしておくと便利です。

また文字の縦横中央揃えをblockで行うのは少々面倒ですが、gridやflexであれば簡単など、慣れれば慣れるほどよく使うプロパティです。

使用例

img,
figure {
  display: block;
} 

.container {
  display: grid;
  place-items: center;
}

width, min-width, max-width

役割＆特徴

要素の横幅を指定します。

よく使うのは100%や10rem（160px）などです。

またmin-widthは要素の最小値、つまり指定した大きさより小さくならなくなります。
逆にmax-widthは要素の最大値、つまり指定した大きさより大きくならなくなります。

私はボタンなどによく使用します。
ボタンの文字数によって、ボタンの大きさがバラバラになるのが嫌だからこのくらいの大きさにしよう。
でもwidthだと文字数が増えてしまったときにも、横幅がガッチリ固定されてて対応できない。
だからmin-widthで最小値だけ決めておこう、という感じです。

使用例

button {
  min-width: 6rem;
}

height, min-height, max-height

役割＆特徴

要素の高さを指定します。

昨今は使用することは減りましたが、ボタンの高さなどは指定しています。

またmin-heightはbody要素に指定しています。
あまりないことですが、ページのコンテンツが少ないと、画面下部に貼り付いているはずのフッターが持ち上がってしまってかっこ悪くなります。

使用例

body {
  min-height: 100vh;
}

button {
  display: grid;
  place-items: center;
  width: 10rem;
  height: 3rem;
}

margin, padding

役割＆特徴

余白を指定します。

marginはpaddingとグチャグチャになりやすいので、ゆっくりと整理しながら理解しましょう。
ここではbox-sizing: border-box;が設定済みとして話します。

要素の大きさを決定するものは以下の4つあります。

まずはwidthおよびheightです。
これが基準になります。

そしてその周囲にborder（罫線）が作成されます。
borderを指定しなくても、幅がゼロで見えない罫線が常にあるとイメージしてください。

marginとpaddingはどちらも余白を指定するものですが、borderの外側につくか、内側につくかが違います。
つまりボタン同士の間隔を開けたければmargin、ボタンの境界と、ボタン内の文字との間隔を開けたければpaddingを指定することになります。

使用例

button {
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
}

実務では以下のような書き方になると思います。
基本の書き方とどう違うのか、どうしてこの書き方になったのか、余裕ができたら考えてみてください。

.button-group {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 4rem;
}

.button-group button {
  display: grid;
  space-items: center;
  height: 4rem;
  font-size: 1.5rem;
  border-right: solid 1px gray;
}