HTMLとCSSでよく使うレイアウトパターン10選【コピペで使える】

2025.09.04

Web制作をしていると、「毎回似たようなレイアウトを作っているな」と感じることはありませんか？
実は、Webサイトの多くはよく使われるレイアウトパターンを組み合わせて作られています。

今回は、HTMLとCSSでよく使うレイアウトパターン10選を紹介します。
実装例も載せているので、そのままコピーして使うことも可能です。

👉 CSSで中央揃えする方法まとめ（Flexbox・Grid・transform別）も参考にすると、より自由にレイアウトを調整できます。

<header>ヘッダー</header>
<main>メインコンテンツ</main>
<footer>フッター</footer>

header, footer {
  background: #eee;
  padding: 20px;
}
main {
  min-height: 400px;
  padding: 20px;
}

最も基本的なレイアウト。ブログやコーポレートサイトで必須です。

<div class="container">
  <main>メイン</main>
  <aside>サイドバー</aside>
</div>

.container {
  display: flex;
}
main {
  flex: 3;
}
aside {
  flex: 1;
}

記事と広告やメニューを分けたいときによく使います。

👉 関連記事の表示方法【WordPressでの実装と工夫】では、サイドバーに関連記事を載せる方法も解説しています。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}

メインを中央に配置し、両サイドに補助情報を置くパターン。ポータルサイトなどで多用されます。

<section class="hero">
  <h1>キャッチコピー</h1>
  <p>説明文を入れます</p>
</section>

.hero {
  background: url(hero.jpg) center/cover no-repeat;
  color: white;
  text-align: center;
  padding: 100px 20px;
}

トップページで印象的に見せたいときに欠かせません。

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

カード型の記事一覧や商品一覧に便利です。

👉 CSSレイアウト構築ガイドでは、さらに応用的なグリッド活用法を解説しています。

.fullscreen {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

画面全体を使ったセクション。ランディングページやLPに多いです。

header {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  border-bottom: 1px solid #ddd;
}

ナビゲーションを常に上部に固定するパターン。ユーザビリティ向上に有効です。

<div class="media">
  <img src="thumb.jpg" alt="">
  <div class="text">テキスト説明</div>
</div>

.media {
  display: flex;
  gap: 10px;
}
.media img {
  width: 100px;
}

アイキャッチ画像 + テキストの並びを作るときに便利。ブログカードなどで使います。

.card {
  transition: transform 0.3s;
}
.card:hover {
  transform: translateY(-5px);
}

ちょっとしたアニメーションを加えることで、モダンな印象を与えます。

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

ページの内容が少なくてもフッターを下に固定できるレイアウト。

今回は、HTMLとCSSでよく使うレイアウトパターン10選を紹介しました。

これらを組み合わせれば、ほとんどのWebサイトを構築できます。

👉 レイアウトをより自由にしたい方は、CSSで中央揃えする方法まとめ（Flexbox・Grid・transform別）もチェックしてみてください。