📘

【CSS解説】wrapperとinnerの違いをわかりやすく解説

に公開
CSS
HTML 5
tech

【CSS解説】wrapperとinnerの違いをわかりやすく解説

Web制作でよく見かけるクラス名「wrapper」と「inner」。
どちらもレイアウトを整えるために使われますが、役割が少し違います。

この記事では、実際のコード例を交えて「wrapper」と「inner」の違いをわかりやすく解説します。

🌿 wrapperとは？

ページ全体や大きなブロックを包むためのコンテナのことです。
主に「サイト全体の横幅を制限したり」「背景色をまとめて設定したり」するときに使われます。

例：

<div class="wrapper">
  <header>ヘッダー</header>
  <main>メインコンテンツ</main>
  <footer>フッター</footer>
</div>

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
}

✅ ポイント

  • ページ全体や大きなセクションを包む（wrapする）
  • よく使うプロパティ：max-width, margin: 0 auto, background など
  • 名前の通り「外側のラッパー」

🌸 innerとは？

wrapperの中の“内側”でコンテンツを整えるための領域です。
主に「左右の余白（padding）」や「中央寄せ」を行うときに使われます。

例：

<section class="wrapper">
  <div class="inner">
    <h2>サービス紹介</h2>
    <p>テキストが入ります。</p>
  </div>
</section>

.inner {
  padding: 0 20px;
}

✅ ポイント

  • 内側のコンテンツを整列・余白調整するための領域
  • よく使うプロパティ：padding, display: flex, gap など
  • wrapperとセットで使われることが多い

🧩 wrapperとinnerを組み合わせるとこうなる

<section class="section">
  <div class="wrapper">
    <div class="inner">
      <h2>ニュース一覧</h2>
      <ul>
        <li>お知らせ1</li>
        <li>お知らせ2</li>
      </ul>
    </div>
  </div>
</section>

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.inner {
  padding: 0 24px;
}

このように、

  • .wrapper が 全体の横幅を制御
  • .inner が 内側の余白を制御

という役割分担になります。

🪄 よくある使い方のパターン

要素 主な目的 よく使うCSS
.wrapper 横幅制限・中央寄せ max-width, margin: 0 auto
.inner 余白・整列・見た目調整 padding, flex, gap

💡 補足：クラス名は自由に決めてOK

「wrapper」「inner」は慣習的な名前ですが、
チームやプロジェクトによって「container」「content」「section__inner」など
別の名前を使うこともあります。

重要なのは「クラス名から役割がわかること」です。

🧭 まとめ

クラス名 意味 主な役割
.wrapper 外側の包み セクション全体の横幅や背景を制御
.inner 内側の領域 コンテンツの余白や整列を調整

つまり、

wrapper は “外枠” 、inner は “内側の整え役”

というイメージを持っておくと理解しやすいです。

🧱 SCSSでの構成例

.section {
  background: #f8f8f8;

  .wrapper {
    max-width: 1200px;
    margin: 0 auto;

    .inner {
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
  }
}

ネスト構造を使うことで、
「wrapper → inner → コンテンツ」という階層がわかりやすくなります。

🧭 命名規則のヒント

命名 用途 意味の目安
.wrapper 外枠 横幅・背景・ブロック全体
.inner 内側 余白・整列
.container セクションのまとまり wrapperと似た意味
.content テキストや要素の中身 実際の情報を入れる部分

命名に迷ったときは、
「どの範囲を包んでいるのか」「目的は何か」を意識するとブレにくいです。

👋 最後に

このような小さな違いを理解しておくと、
チーム開発でも「どこを編集すれば良いか」がすぐわかり、
デザイン崩れを防ぎやすくなります。

シンプルな構造でも、命名と役割の意識づけが大切ですね。

Discussion