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はサポート終了しましたね。
モダンブラウザ用のclearfix
floatで横並びのレイアウトをつくるときに、floatをかけた要素の高さを親要素が認識せずに、表示が崩れる場合がある。それを回避するためにかけるのがclearfix。
.clearfix:after { content: ""; display: block; clear: both; }
コレを書いて、.clearfixをfloatレイアウトの親要素にかける。
IE6/7対応はもういらないと思うので、zoom: 1;などは省いて良い。これだけ。
参考↓
kojika17.com
サイトをつくるときは最初にreset.cssかnormalize.cssを読み込む
ChromeやSafariなど、ブラウザはそれぞれユーザーエージェントスタイルシートと呼ばれるデフォルトのCSSを持っていて、CSSを当てていないHTMLでもある程度読みやすく表示されるようになっています。
ただし、それぞれの値は異なるので、ブラウザごとに余白など見た目が違ってきます。
このままの状態でスタイルを書いていくと、ブラウザごとに食い違いがでてしまいます。
reset.cssでリセットする
この各ブラウザのデフォルトCSSを0値にリセットしてくれるのが、reset.cssです。
reset.cssを読み込んでから、スタイルを書くことでブラウザの差異なく構築することができます。
reset.cssはいくつかあって、最近人気のreset.cssはこちらから確認することができます。
cssreset.com
