くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[RWD]レスポンシブウェブデザインのフォントの設定

□□本日の授業□□

  • レスポンシブウェブデザインでのフォントの設定について
  • 3月上旬に作った1カラムの課題をレスポンシブ対応に改造。

  1. 石垣島観光ガイド
  2. ガラスの靴を探しています

レスポンシブウェブデザインでのフォントの設定について

レスポンシブウェブデザインでは、フォントの単位をremにする


emは先祖要素の設定を継承するため、表示サイズは累乗の計算になる。

「rem」の意味は「root」+「em」で、root 要素(つまり、html要素)のフォントサイズを継承する。

ただし、remはCSS3で追加された単位なので、IE8以下は不対応のため
ピクセルに直したものと両方記述すべし。

とりあえずremのrootであるhtmlの基準を、
html { font-size: 62.5%;} つまり10pxと設定しておく。

PC用の記述
※これ以外にul、ol、など他の使用要素があれば、それに応じて追加すること

/* レスポンシブ対応 font-sizeの基準 */
html { font-size: 62.5%;} /* = 10px */
body { font-size: 16px; font-size: 1.6rem; } /* = 16px */
h1 { font-size: 32px; font-size: 3.2rem; } /* = 16px */
h2 { font-size: 24px; font-size: 2.4rem; } /* = 16px */
h3 { font-size: 20px; font-size: 2.0rem; } /* = 16px */
h4 { font-size: 18px; font-size: 1.8rem; } /* = 16px */
p { font-size: 16px; font-size: 1.6rem; } /* = 16px */

スマートフォン用の記述
スマートフォンではIEは使用しないと思われるので、remだけで良い

@media screen and (max-width: 640px) {
/* font-size */
html { font-size: 62.5%;} /* = 10px */
body { font-size: 1.6rem; } /* = 16px */
h1 { font-size: 3.2rem; }
h2 { font-size: 2.4rem; }
h3 { font-size: 2.0rem; }
h4 { font-size: 1.8rem; }
p { font-size: 1.6rem; }

これはそのページの基準なので、各要素の調整はその下に書いていけばよい。

レスポンシブ対応1カラムの課題

2つともブレイクポイントを640pxにしており、スマホ用とPC・タブレット用の2パターンのスタイルを書いています。
サーバーにアップしていなかったので、今回は公開しました。

  1. 石垣島観光ガイド
  2. ガラスの靴の持ち主を探しています