FlexboxとGridを使った実践的なレイアウト例【ドラえもん紹介ページを作って学ぶ！】

Web制作でよく使われるFlexboxとGrid。
「どうやって実際にレイアウトを組めばいいの？」と悩む初心者の方に向けて、今回はドラえもんを紹介するページの表紙だけ作って、実践的なレイアウト例を紹介します！

FlexboxとGridを使えば、アニメや漫画の紹介ページもこんなに簡単に作れるんです！

1. Flexboxを使った「ドラえもんキャラクター紹介」レイアウト
1. HTML例
2. CSS例
2. Gridを使った「ドラえもんエピソード紹介」レイアウト
1. HTML例
2. CSS例
まとめ

1. Flexboxを使った「ドラえもんキャラクター紹介」レイアウト

Flexboxは、要素を横に並べたり、中央に寄せたりするときにとても便利です。

HTML例

まずは書き出しの<!DOCTYPE～　を記入します。

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
     <title>基本のWebページ</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <header>
         <h1>ドラえもん<h1>
     </header>
    <main>

<section class="character-section">
  <h2>ドラえもんのキャラクター紹介</h2>
  <div class="flex-container">
    <div class="character-card">
      <img src="doraemon.jpg" alt="ドラえもん">
      <p>ドラえもん</p>
    </div>
    <div class="character-card">
      <img src="nobita.jpg" alt="のび太">
      <p>のび太</p>
    </div>
    <div class="character-card">
      <img src="shizuka.jpg" alt="しずかちゃん">
      <p>しずかちゃん</p>
    </div>
  </div>
</section>

   </main>
</body>
</html>

CSS例

CSSを書く「style.cssファイル」は、index.htmlと同じフォルダに入れておくのが一番迷いないです。階層に注意！

.flex-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.character-card {
  text-align: center;
  width: 150px;
}
.character-card img {
  width: 100%;
  border-radius: 10px;
}

🔵ポイント

display: flex;で子要素を横並びに。
justify-content: center;で中央揃え。
gap: 20px;でカード同士の間にスペース。

→これだけで「キャラクター紹介」がキレイに横並びに！

私が手書きしたへたくそなドラえもんたちですが、参考ページとして載せます。

このように、横並びにレイアウトできました。

2. Gridを使った「ドラえもんエピソード紹介」レイアウト

Gridは、雑誌のようなきっちりしたグリッドデザインが作れるレイアウト方法です。

HTML例

上と同じように<main>のあとに記入してみてください。

<section class="episode-section">
  <h2>おすすめエピソード紹介</h2>
  <div class="grid-container">
    <div class="episode-card">タケコプター大冒険</div>
    <div class="episode-card">どこでもドアの秘密</div>
    <div class="episode-card">タイムマシンで未来へ</div>
    <div class="episode-card">スモールライトで大ピンチ</div>
  </div>
</section>

CSS例

こちらも同じく、index.htmlと同じ階層に作ったstyle.cssに記入しましょう。

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.episode-card {
  background-color: #E0F7FA;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

🔵ポイント