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

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

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

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

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

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

グリッドレイアウト

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

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


コメントを残す

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