以前から気になっていた「HTML5/CSS3モダンコーディング本」を購入したので、さっそくパート1のスタンダードレイアウトのサイトを作ってみました。
本に載ってるサンプルサイトはこちらから見ることが出来ます。
サンプルサイト – スタンダードレイアウト
内容をそのまま作るのもあれだったので、色をちょっとだけ変えて自分のサイト風にしてみました。
普段使ったことないセレクタとか、知らないものもあったりして、作っていて面白かったですね。
作ったサイトのスクリーンショットを載せておきます。
作ってて気になったこと（Chromeだけの問題？）
本を見てサイトを作っていたときに、気になったことが1つあったので、書いておきます。
私の環境だけかもしれませんが、製作途中時にコードを打ちながらChromeで確認してみると、フォントサイズがおかしくなってるところがありました。
おかしくなってたのはフォントサイズを指定していない部分。
本来ならfont-size: 62.5%;が働いて、12pxで表示されるはずなのですが、上手くいってない…
なぜ?と思ってネットで調べてみると、Chromeでrem指定したとき、初回ロード時にフォントサイズがおかしくなることがあるそうです。
対処法としては、bodyのremをemに変えるといいみたいです。私はこれで直りました。
もしくはフォントサイズがおかしくなってる部分にもフォントサイズを指定するとか…
html {
font-size: 62.5%;
}
body {
color: #333;
font-size: 1.2em; /* remをemに変更する。 */
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}でも、サイト完成後にemからremに戻してみると、ちゃんと表示されるんだよなあ。なんでだろう…
翔泳社のサイトにも、この現象について載っていました。
55ページ完了段階で.hot-topic .descの文字が大きいままとなる件について
次はグリッドレイアウトにチャレンジしてみます。