SwapSkillsDoubbble W9 「マルチデバイス時代の新常識 レスポンシブWebデザインの今と未来」参加レポート

2013年3月9日(土曜日)、花粉が激しく舞う中、品川区立総合区民会館きゅりあんで開催されたSwapSkillsDoubbble W9 「マルチデバイス時代の新常識 レスポンシブWebデザインの今と未来」に行ってきました。

有償なセミナーだったのですが内容が興味深かったので参加してきました。自分にとってはレスポンシブWebデザインについて間違った認識もあったので有意義でした。

続きを読む SwapSkillsDoubbble W9 「マルチデバイス時代の新常識 レスポンシブWebデザインの今と未来」参加レポート

簡単に em に換算するために、body の font-size を 62.5% に設定

フォントサイズに対して相対的な単位を使用したい場合 em(エム)や %(パーセント)を使用します。

body 要素の font-size プロパティの値に 62.5% を宣言すると簡単に px から em に換算ができます。(0.625em を指定しても同様です。)

希望フォントサイズをベースフォントサイズの 10 で割ることにより em 値になります。

body {
    font-size: 62.5%; /* 10(base font size) / 16(Browser Default font size) = 0.625em * 100 = 62.5% */
}

h1 {
    font-size: 2.4em; /* 24 / 10 = 2.4em */
}

p {
    font-size: 1.2em; /* 12 / 10 = 1.2em */
}

ul li {
    font-size: 1.2em; /* 12 / 10 = 1.2em? */
}

ベースフォントサイズが 10 なので計算がしやすくなりますね。

しかし、これは階層が深くなった時に、フォントサイズに不都合な問題が生じます。
em は要素のフォントサイズを基準にするため、階層が下がるとその要素はその親要素のフォントサイズを基準にします。

demo sample

CSS3 の rem を使う。

この問題を回避するには、CSS3 の rem (root em) を使うことで回避することができます。

rem はルート要素(html 要素)のフォントサイズを基準にします。

html {
    font-size: 62.5%; /* 10(base font size) / 16(Browser Default font size) = 0.625em * 100 = 62.5% */
}

h1 {
    font-size: 2.4rem; /* 24 / 10 = 2.4em */
}

p {
    font-size: 1.2rem; /* 12 / 10 = 1.2em */
}

ul li {
    font-size: 1.2rem; /* 12 / 10 = 1.2em */
}

demo sample

階層が深くなってもフォントサイズが狂うことはありません。

CSS3 な時代に覚えておいて損はないですね。

参考リソース