494 views

この記事は最終更新から 930日 が経過しています。

1. 問題点

CSSでのフォントサイズ指定にはいろいろな方法がある。
pt px em rem vw vh % …

ホームページを作っているときに
その時の気分で上記の単位を混在させてしまうこともしばしば…

そして、サイトの規模が大きくなってくると、後で後悔する。
きちんとルールを決めておけば良かった…
と…

2. マイルールを決める

経緯は後で追記しよう。
まずは備忘録だけ書いておく。

(1) まずは、基準となるサイズを決める。

ここでは、パソコン用とスマホ用とで基準となるフォントサイズを変えた。

html{
  @media (min-width: 768px){  /* パソコン用 : 画面幅の1/100 */
    font-size:1vw;
  }
  @media (max-width: 767px){  /* スマホ用 : 画面幅の約1/33 */
    font-size:3vw;
  }
}

1vwとは？
viewport幅（＝画面幅）の1/100（＝1%） のサイズを意味する。

(2) 各要素の文字サイズを決める。

p.mytext{
  font-size: 1.5rem;    /* htmlで定義した基準文字サイズの1.5倍の大きさの文字を使う。 */
  padding:   0.5rem;    /* 枠内の上下左右の余白をそれぞれ基準文字サイズの0.5倍の大きさにする。 */
}

上記(1)の設定により、それ以降の rem指定は以下のようになる。
パソコン用 : 1rem = 1vw
スマホ用　 : 1rem = 3vw
font-sizeだけでなく paddingや marginなどで文字サイズを意識したい場合、1文字分の幅や高さを 1remとして指定できる。
vwが広まってくれたおかげで便利になったなぁ…

1remとは？
root要素（＝html）に対する相対指定（＝em指定）を意味する。

3. 実際にやってみる

(1) 基準文字サイズ = 画面幅の1/100

https://www.dogrow.net/hp/sample/00116/case1/

(1) 基準文字サイズ = 画面幅の1/33

https://www.dogrow.net/hp/sample/00116/case2/