タイル型レイアウト

HTML&CSS と Web デザイン入門でWebデザインを学ぶ。

タイル型レイアウトとは

タイル型レイアウトとは、画像や四角形の要素を並べたレイアウトのこと(P228)。整った印象になる。

「MENU」ページではCSSグリッドを使ってレスポンシブ対応させる。

ファイルを準備

「news.html」を複製し、「menu.html」を作成する。 (P232)

複製したので、「news.html」には viewport の記述が存在する。

編集する

MENUページ用にタイトルを編集する。

    <title>Full Screen Web - MENU</title>

不要な部分を削除

      <div class="wrapper">
        <h2 class="page-title">News</h2>
      </div>
      
      <div class="news-contents wrapper">
      ...
    </div>

id名を変更

    <div id="menu" class="big-bg">

見出し部分を変更

ページの見出しや紹介文を追加。 (P233)

    <!-- MENU CONTENS -->
    <div class="menu-content wrapper">
      <h2 class="page-title">Menu</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aliquam magni ducimus eveniet
        maxime id voluptatum rerum quisquam atque!
      </p>
    </div>

背景画像や見出しの高さ、余白などを指定する。

#menu {
  background-image: url(https://via.placeholder.com/2048x1365/ccf);
  min-height: 100vh;
}
.menu-content {
  max-width: 560px;
  margin-top: 10%;
}
.menu-content .page-title {
  text-align: center;
}
.menu-content p {
  font-size: 1.125rem;
  margin: 10px 0 0;
}

モバイル版では余白のみ調整する。

  /* MOBILE MENU */
  .menu-content {
    margin-top: 20%;
  }

コンテンツを用意する

画像とテキストは item クラスの <div> タグで囲む。 (P236)

さらに9つの item を gird クラスのついた <div> タグで囲む。

    <!-- GRID CONTAINER & ITEM -->
    <div  class="wrapper grid">
      <div class="item">
        <img src="https://via.placeholder.com/620x460/4ff" alt="" />
        <p>1.イメージキャプションイメージキャプション</p>
      </div>
      ...
      <div class="item">
        <img src="https://via.placeholder.com/620x460/4ff" alt="" />
        <p>9.イメージキャプションイメージキャプション</p>
      </div>
    </div>

画像とテキストが縦に並ぶ。

CSSグリッドを使う

grid クラスに対して display: grid; を指定する。 (P237)

 /* 3*3 GRID */
.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 6%;
  margin-bottom: 50px;
}

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座の記述 1fr 1fr 1fr; は、 repeat(3, 1fr); と書くことができる。

  grid-template-columns: 1fr 1fr 1fr;

これで「1:1:1」の割合で1列に3つの要素を横に並べられる。画面幅に合わせて自動で伸縮する。

gap: 26px; で要素同士の余白を指定する。

レスポンシブ対応

repeat関数 を使った repeat(3, 1fr); は、ここで説明されていました。 (P238)

要素幅の最小値最大値の指定

スマートフォン版では画像が小さすぎる。minmax を使って最小値と最大値を指定する。 (P239)

  grid-template-columns: repeat(3, minmax(240px, 1fr));
  /* grid-template-columns: repeat(3, mimmax(240px, 1fr)); */

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座のような表示になりません。

時間が溶ける。

minmax を mimmax とタイポ！ VSCode は何も警告してくれない。

幅に合わせて折り返し

auto-fit を使えば要素を折り返しながら親要素の余ったスペースが埋まる。 (P240)

grid-template-columns: repeat(atuo-fit, minmax(240px, 1fr));

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座のような表示になりません。

見本では、1列の画像の表示数がレスポンシブ対応している。

テキスト比較ツール difff《ﾃﾞｭﾌﾌ》で比較。違う点は...

コメントの書き方
border-bottom の solid 属性を2番めに書くか3番めに書くか
background を background-color と書いている
background-image 画像を外部サービスで取得している

上記の点なのだが？今度ばかりは、原因がわからない。

挫折！

見本のCSSコードをコピーして background-image セレクタの url 属性値を書き換えて乗り切ることにする。

タイル型レイアウトのカスタマイズ

時間が溶けることが多いです。それでも、頑張って書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座で学習を続けるよ。

サイズ違いの要素を配置

同じ大きさで配置していた要素の中に、目立たせたい部分のみ大きく表示させる。 (P242)

大きく表示したい要素へ新しく big-box クラスを追加する。

    <div class="wrapper grid">
      <div class="item big-box">

大きいサイズのグリッドアイテムを指定

今回はグリッドラインの1から3番めを指定する。 (P243)

始まりのライン/終わりのライン」のようにスラッシュで区切って grid-column: 1 / 3; と記述する。

縦のラインも grid-row: 1 / 3; と記述する。

.big-box {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

画像の高さを揃える

大きい画像と小さい画像の高さを揃える。 (P244)

.big-box img {
  height: 94%;
  width: 100%;
}

確かに高さは揃った。では, 94% の理由はなんだろう？画像や余白の高さを計測したがわからない。

トリミング

指定したサイズからはみ出した部分を object-fit プロパティでトリミングする。 (P244)

  object-fit: cover;

ダミー画像を使用しているためスタイリングの効果がわからない。

レスポンシブ対応

スマートフォン表示ではちぐはぐな大きさで並べられているのを修正する。 (P245)

  .big-box {
    grid-column: auto;
    grid-row: auto;
  }
  .big-box img {
    height: 100%;
  }