cssのグリッドレイアウト実践編！よくみるwebサイトをつくってみた

読んで欲しい人

HTMLとCSSを学んで、模写コーディングに挑戦している人

グリッドレイアウトを使ったwebサイトのレイアウトをみたい人

そんな人向けの記事です。

グリッドレイアウトを使ったwebサイトを制作しました。

このサイトは、

を参考に作成しました。

作り方がそのまま記載されています。

わかりやすく説明してくれてるので、初心者におすすめです。

グレッドレイアウトは、メイン部分の写真が並べられている部分に使用されています。

並べられている画像に対して、

<div class=”grid”><div>で、全体にクラスをつけます。

CSSで、.grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)};を指定することで、画像の最低幅が240pxになり、画面幅に応じて自動で最適に並べられるデザインがつくれました。

最初のコーヒー画像にはclass=”big-box”というクラスをつけています。

CSSで、.big-box { grid-column: 1 / 3; grid-row: 1 / 3;}と指定すると、コーヒー画像だけ大きく配置されます。

1.ヘッダーをつくります

2.フッターをつくります

3.画面上部の画像とタイトルを配置します

4.グリッドレイアウトで画像を配置していきます

5.完成です

今回はグリッドレイアウトのつくりかたを実践しました。

グリッドレイアウトやフレックスボックスの考え方はわかりましたが、marginや大きさの指定の感覚が掴めていません。

模写コーディングやWebサイトのコードをみて、感覚を掴んでいきたいと思います。