HTML5/CSS3モダンコーディング本のパート2にある、グリッドレイアウトのサイトを作ってみました。
本に載ってるサンプルサイトはこちらから見ることが出来ます。
サンプルサイト-グリッドレイアウト
今回もちょこっと変更を加えて、私が持っている無印良品の服を紹介していくことをモチーフとして、サイトを作ってみました。
練習なので、実際とは違って画像などそのまま無印のサイトから持ってきてますが…
作ったサイトのスクリーンショットを載せておきます。
まずはとりあえずコードを打ってサイトを作ってみましたが、今回は結構難しくて、正直ソースの内容はまだ全て理解できていません。
最後のセルフコーディングの部分も私の腕ではまだ分からなくて、結局答えを見ながら作っちゃいましたし…
でも、これだけの記述でこんなおしゃれなサイトが作れるのはすごいなと思いました。hoverしたときの動きがかっこいいです。まだ、::before、::afterなど擬似要素やアニメーションの部分がよく分かってないので、本をもっとよく読んで理解を深めたいと思います。次はシングルページレイアウトに挑戦します。