CSSの基本その3

2024年6月17日 08:00

このチュートリアルでは、CSSを使用してウェブページ上に画像を整然と配置する方法を学びます。具体的には、CSS Gridを利用して、複数の画像を規則的に並べる方法を解説します。

配置を整理しない場合

このHTML/CSSのコードは画像素材を並べただけのものです。
見ての通り、縦一列に並んだだけになっています。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Grid</title>
  </head>
  <style>
    header {
      font-size: 40px;
      font-family: sans-serif;
      text-align: center;
    }
    .class_container img {
      width: 120px;
      height: auto;
    }
  </style>
  <body>
    <header>CSSで配置について学ぼう</header>
    <div class="class_container">
      <div><img src="img/european_man.jpg" /></div>
      <div><img src="img/asia_woman.jpg" /></div>
      <div><img src="img/african_woman.jpg" /></div>
      <div><img src="img/asia_man.jpg" /></div>
      <div><img src="img/african_man.jpg" /></div>
      <div><img src="img/european_woman.jpg" /></div>
    </div>
  </body>
</html>

これにGridを使って配置していく方法を解説します。

HTMLの基本構造

まず、HTMLの基本構造を見てみましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Grid</title>
  </head>
  <body>
    <header>CSSで配置について学ぼう</header>
    <div class="class_container">
      <div><img src="img/european_man.jpg" /></div>
      <div><img src="img/asia_woman.jpg" /></div>
      <div><img src="img/african_woman.jpg" /></div>
      <div><img src="img/asia_man.jpg" /></div>
      <div><img src="img/african_man.jpg" /></div>
      <div><img src="img/european_woman.jpg" /></div>
    </div>
  </body>
</html>

このHTMLでは、header要素にタイトルがあり、div要素内に6つの画像が含まれています。

CSSでのスタイリング

ヘッダーのスタイリング

header {
  font-size: 40px;
  font-family: sans-serif;
  text-align: center;
}

font-size: ヘッダーの文字サイズを40pxに設定しています。これにより、タイトルが目立つようになります。
font-family: sans-serifフォントを使用しています。これは読みやすく、モダンな印象を与えます。
text-align: テキストを中央に配置しています。これにより、タイトルがページの中央に表示されます。

コンテナのスタイリング

.class_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 240px 240px;
  justify-content: center;
  align-content: center;
  align-items: center;
  justify-items: center;
}

display: grid: コンテナをグリッドレイアウトに設定します。これにより、子要素（ここでは画像）が規則的に配置されます。
grid-template-columns: 3列のグリッドを作成します。各列は1fr（フレキシブルユニット）として設定され、均等に幅が割り当てられます。
grid-template-rows: 2行のグリッドを作成し、それぞれの行の高さを240pxに設定します。
justify-content: コンテナ全体の水平配置を中央に設定します。
align-content: コンテナ全体の垂直配置を中央に設定します。
align-items: グリッド内の各アイテムを垂直方向に中央に配置します。
justify-items: グリッド内の各アイテムを水平方向に中央に配置します。

画像のスタイリング

.class_container img {
  width: 120px;
  height: auto;
}

width: 画像の幅を120pxに固定します。これにより、すべての画像が同じ幅で表示されます。
height: autoを指定することで、画像の縦横比が保持され、歪むことなく表示されます。

まとめ

こんな感じで画像が配置されます。

このチュートリアルでは、CSSを使用して画像を整然と配置する方法を学びました。CSS Gridを使用することで、簡単に複雑なレイアウトを作成できることがわかりましたね。これを基に、さらに高度なデザインに挑戦してみましょう。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！

この記事が気に入ったらサポートをしてみませんか？