CSSを作ったらとりあえずこれを書く

2020 3/26

2020年3月26日 2020年3月26日

URLをコピーしました！

いつもCSSを書き始めるとき、「とりあえず何のプロペティを指定すればいいんだっけ？」となるのでメモしておきます。

加えて、今まで深く理解していなかった部分に関しても勉強し直しました。

CSS作ったらとりあえずこれを書く（って本で学んだ）

@charset "UTF-8";

html {
  font-size: 62.5%;  // ①
}

body {
  color: #333;
  font-size: 1.2rem;  // ①
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;  // ②
}

*, *::before, *::after {  // すべての要素, すべての要素の::before擬似要素, すべての要素の::after擬似要素
  box-sizing: border-box;  // ③
}

以降、コメントアウトした①〜③について勉強し直したメモを残します。

① rem と em の違い

remは「root + em」の意味で、ルート要素（html要素）のfont-sizeを1とした倍率を指定します。

emと違い、親要素のfont-sizeプロパティの値を意識せず常にhtml要素に対する倍率を指定すればので、管理が楽になります。

加えて、html要素のfont-sizeプロパティの値を変更することで、remを使用した箇所すべてのfont-sizeを相対的に変更することができます。

<body>
  <div class="parent">
    親要素のテキスト
    <div class="child">
      子要素のテキスト
    </div>
  </div>
</body>

html {
  font-size: 62.5%;   // ← 16px * 62.5% = 10px
}

.parent {
  //font-size: 1.2em  // ← 10px(html) * 1.2 = 12px
  font-size: 1.2rem;  // ← 10px(html) * 1.2 = 12px
}

.child {
  //font-size: 1.2em  // ← 12px(parent) * 1.2 = 14.4px
  font-size: 1.2rem;  // ← 10px(html) * 1.2 = 12px
}

remを使用する際、html要素のfont-sizeは%指定されることが一般的です。

主要なブラウザのデフォルトフォントサイズは16pxなので、62.5%を指定して約10pxにします。

px指定でなく%指定にすることで、ユーザがブラウザの設定でデフォルトの文字サイズを変更していた場合にもある程度その設定を反映することができます。