読者です 読者をやめる 読者になる 読者になる

別冊webメモ

自分用リファレンス&アウトプット

remでフォントサイズ指定

CSS3から新しく追加された「rem (root em)」という単位で、フォントサイズを指定するのが便利です。

rem使用のメリット

従来の%やemは、親要素を基準にサイズが計算されます。なので、入れ子にすると親要素の影響をうけて、サイズが分かりづらくなってしまいます。

<div class="text01">
    親要素のテキスト
    <div class="text02">
        子要素のテキスト
    </div>
</div>
html{
font-size: 10px;
}
.text01{
font-size: 1.2em; /* 10px*1.2=12px */
}
.text02{
font-size: 1.2em; /* 12px*1.2=14.4px */
}


それに対しremはroot要素(html)のフォントサイズを基準にサイズが計算されるので、管理が楽でサイズもわかりやすいです。

html{
font-size: 10px;
}
.text01{
font-size: 1.2rem; /* 10px*1.2=12px */
}
.text02{
font-size: 1.2rem; /* 12px*1.2=12px */
}

基準となるhtmlに、font-size: 10px;を設定する*1と、1.2rem=12pxといった感じで直感的に対応できます。

remを使用するときhtmlのfont-sizeは、%で記述するのが一般的らしいです。*2
主要ブラウザのデフォルトフォントサイズは16pxなので、

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

と、指定することで10pxになります。

rem使用の注意点

IE8以下がサポート外。
最初に「px」を指定、その後に「rem」を上書きすることで対応できます。

.text01{
font-size: 12px; /* IE対応 */
font-size: 1.2rem;
}

ただ、IE8はサポート終了しましたね。

Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft

*1:bodyではなくhtmlに設定。注意。

*2:ブラウザやデバイスの対応の柔軟性も鑑みて

モダンブラウザ用のclearfix 

floatで横並びのレイアウトをつくるときに、floatをかけた要素の高さを親要素が認識せずに、表示が崩れる場合がある。それを回避するためにかけるのがclearfix。

.clearfix:after {
content: "";
display: block;
clear: both;
}

コレを書いて、.clearfixをfloatレイアウトの親要素にかける。
IE6/7対応はもういらないと思うので、zoom: 1;などは省いて良い。これだけ。


参考↓
kojika17.com

サイトをつくるときは最初にreset.cssかnormalize.cssを読み込む

ChromeSafariなど、ブラウザはそれぞれユーザーエージェントスタイルシートと呼ばれるデフォルトのCSSを持っていて、CSSを当てていないHTMLでもある程度読みやすく表示されるようになっています。
ただし、それぞれの値は異なるので、ブラウザごとに余白など見た目が違ってきます。

f:id:aoicotori:20160307191935j:plain
このままの状態でスタイルを書いていくと、ブラウザごとに食い違いがでてしまいます。

reset.cssでリセットする

この各ブラウザのデフォルトCSSを0値にリセットしてくれるのが、reset.cssです。
reset.cssを読み込んでから、スタイルを書くことでブラウザの差異なく構築することができます。

f:id:aoicotori:20160307192124j:plain

reset.cssはいくつかあって、最近人気のreset.cssはこちらから確認することができます。
cssreset.com

normalize.cssで整える

reset.cssの他にnormalize.cssというcssもあります。
reset.cssとの違いは、reset.cssが初期化するのに対して、normalize.cssは有用なスタイルをそのまま維持するように設計されています。

Normalize.css: Make browsers render all elements more consistently.

html5スマホにも対応していて、最近はreset.cssよりも主流の模様。

なぜリセットではなく Normalize.css を使うのか


次のリセットcss?sanitize.css

reset.cssとnormalize.cssに続くリセットcssとして、sanitize.cssが開発されているようです。
coliss.com


プロジェクトごとに、やりやすい形で選ぶのが良いと思います。