allWebクリエイター塾　受講の評価、感想、講義内容を綴ったブログ: レスポンシブWebデザインにも相対単位！

こんにちは、digidog（デジドッグ）です。

今週6月16日（日）にCSSレイアウト講座があるので、ちょっと復習しようと思います。私がCSSレイアウト講座を受講したのは１年位前。講座を受講した時はいくつか初めて聞く事もありました。よく調べながらやってきたつもりでしたが、やはり「独学では学習が足りない」と思いました。

allWebの動画（レスポンシブWebデザイン講座を受けてみよう！）で、CSSレイアウト講座、講師である菊池氏も、「レスポンシブWebデザインでは、今までピクセルなどで指定して作成していた方も、em、rem、などを使って、正しいグリッド、正しい設計をしていく必要がある」と語っています。

そこで今日は、CSSレイアウト講座で勉強した、RWDでも重要な「相対単位の使い方」を勉強した事について、復習、復習です。

絶対単位と相対単位

絶対単位と相対単位の認識は大丈夫でしょうか？

絶対単位は、ブラウザの設定や表示環境などに依存する事がなくサイズが変動しない単位。フォントならば、ブラウザ設定で「文字を大きく拡大」の指定をしても表現上変化しないサイズの指定方法です。

相対単位は、基準となる物の大きさに依存して、変動する単位

ブラウザのデフォルトフォントサイズは16px。これを基準値とします。

デフォルトサイズ「16pxに対して」考える。16px=1em　48÷16=3

答えは　h1{ font-size:3em;}

「h1に対して」がポイント！　h1=48px=1emとなり、1emの基準値が変化する。先ほどは「16px=1em」だったのが、h1を基準値にするので「48px=1em」となる。

24÷48=0.5　0.5em

答えはh1{font-size:3em; margin-bottom:0.5em}

どうですか？簡単でしたか？

相対単位を利用して、%パーセントなどで、ボックスサイズに考えると、「親要素のサイズ」に対して「子要素のサイズ」を指定した場合、親要素の大きさに依存して、子要素も可変してくれます。

これなら、親要素がどんなサイズになっても、中の子要素のサイズも変動するので、一緒に可変していき、隠れてしまう事がありません。これをレスポンシブWebデザインでも利用しています。

絶対単位で指定されていた場合など、親要素が小さくなったとき、中の子要素が切れて見えなくなってしまう場合があります。

これでは、レスポンシブWebデザインではなく、ブレイクポイントに来た時だけしか考えていない「なんちゃってレスポンシブデザイン」の残念なサイトになっちゃいますのでお気をつけ下さいね。

場合や使う場所によっては、絶対単位と相対単位を使い分ける場合もあるとおもいますが、相対単位を使用すると、「基準となるサイズ」に対して、可変する事が出来る事。これを利用し、ユーザーの環境に配慮して制作していくことが大事だなと思いました。