HTML5/CSS3モダンコーディング本でシングルページレイアウトに挑戦

HTML5/CSS3モダンコーディング本の最後のパートの、シングルページレイアウトのサイトを作りました。

これまでつくったもの

本に載ってるサンプルサイトはこちらから見ることが出来ます。
サンプルサイト-シングルページレイアウト

今回は、本に載ってるとおりにサイトを作ってみました。

作ったサイトのスクリーンショット

はやく作りたかったのでセルフコーディングの部分は、すぐに答えを見てしまいました(笑)
画像にカーソルを重ねると、もわんと画像が拡大するのがかっこいいです。

この本で得た知識を元にして、今度は自分で考えてデザインしたサイトを作っていこうと思います。

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

HTML5/CSS3モダンコーディング本のパート2にある、グリッドレイアウトのサイトを作ってみました。

・これまでつくったもの
HTML5/CSS3モダンコーディング本でスタンダードレイアウトに挑戦

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

今回もちょこっと変更を加えて、私が持っている無印良品の服を紹介していくことをモチーフとして、サイトを作ってみました。
練習なので、実際とは違って画像などそのまま無印のサイトから持ってきてますが…

作ったサイトのスクリーンショットを載せておきます。

まずはとりあえずコードを打ってサイトを作ってみましたが、今回は結構難しくて、正直ソースの内容はまだ全て理解できていません。
最後のセルフコーディングの部分も私の腕ではまだ分からなくて、結局答えを見ながら作っちゃいましたし…

でも、これだけの記述でこんなおしゃれなサイトが作れるのはすごいなと思いました。
hoverしたときの動きがかっこいいです。まだ、::before::afterなど擬似要素やアニメーションの部分がよく分かってないので、本をもっとよく読んで理解を深めたいと思います。次はシングルページレイアウトに挑戦します。

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

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