HTML5/CSS3モダンコーディング本でスタンダードレイアウトに挑戦

気になっていた「HTML5/CSS3モダンコーディング本」を購入したので、さっそくパート1のスタンダードレイアウトのサイトを作ってみました。

本に載ってるサンプルサイトはこちらから見ることが出来ます。
サンプルサイト-スタンダードレイアウト

内容をそのまま作るのもあれだったので、色をちょっとだけ変えて自分のサイト風にしてみました。
普段使ったことないセレクタとか、知らないものもあったりして、作っていて面白かったですね。
作ったサイトのスクリーンショットを載せておきます。

スタンダードレイアウト

作ってて気になったこと(Chromeだけの問題?)

本を見てサイトを作っていたときに、気になったことが1つあったので、書いておきます。

私の環境だけかもしれませんが、製作途中時にコードを打ちながらChromeで確認してみると、フォントサイズがおかしくなってるところがありました。

フォントサイズ
赤い枠の部分。フォントサイズが反映されてません。

おかしくなってたのはフォントサイズを指定していない部分。
本来ならfont-size: 62.5%;が働いて、12pxで表示されるはずなのですが、上手くいってない…

なぜ?と思ってネットで調べてみると、Chromeでrem指定したとき、初回ロード時にフォントサイズがおかしくなることがあるそうです。

対処法としては、bodyのremをemに変えるといいみたいです。私はこれで直りました。
もしくはフォントサイズがおかしくなってる部分にもフォントサイズを指定するとか…

CSS
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の文字が大きいままとなる件について

次はグリッドレイアウトにチャレンジしてみます。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です