BLOG 技術記事

【CSS】サイトレイアウトのまとめ

初めに

今回は、Webデザインでよく用いられるレイアウトパターンのまとめになります。

記述するときの考え方と併せてHTML / CSSのコードも掲載します。HTML内に「c-box」というクラスが登場しますが、こちらはレイアウトとは別で見た目を整えるための記述になるので、あらかじめコピーしておくことをオススメします。

.c-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  font-size: 30px;
}

上部ナビゲーション型

サイト上部にナビゲーション、続けてコンテンツが配置されるレイアウトです。オーソドックスでよく用いられる配置です。
記述する時の考え方は非常にシンプルで、上から順番にnavigationとコンテンツ用のdiv（もしくはmain） を記述します。

<div class="l-topNav">
    <nav class="l-topNav__nav">
        <h2>navigation</h2>
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </nav>
    <div class="c-box l-topNav__content">
        content
    </div>
</div>
.l-topNav__nav {
  position: relative;
  padding: 10px 0;
  background-color: #f5f5f5;
}
.l-topNav__nav h2 {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  font-size: 20px;
}
.l-topNav__nav ul {
  display: flex;
  justify-content: center;
  font-size: 20px;
}
.l-topNav__nav li {
  margin: 0 10px;
}
.l-topNav__content {
  min-height: 300px;
  margin-top: 20px;
}

左軸ナビゲーション型

こちらも頻出のレイアウトになります。画面左にナビゲーション、右にコンテンツを配置します。

ナビゲーションとコンテンツを囲んでいるdivなどに対して、「display: flex」で横並びにしてあげるだけで実現可能です。

<div class="l-leftNav">
    <nav class="l-leftNav__nav">
        <h2>navigation</h2>
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </nav>
    <div class="c-box l-leftNav__content">
        content
    </div>
</div>
.l-leftNav {
  display: flex;
}
.l-leftNav__nav {
  flex: 1;
  position: relative;
  padding-top: 40px;
  text-align: center;
  background-color: #f5f5f5;
}
.l-leftNav__nav h2 {
  margin-bottom: 20px;
  font-size: 20px;
}
.l-leftNav__content {
  flex: 3;
  min-height: 300px;
  margin-left: 20px;
}

逆L字型ナビゲーション

画面上部にグローバルナビゲーション、その下にローカルナビゲーションとコンテンツが並列で配置されるレイアウトになります。

まず、画面を「上部ナビゲーション」と「その下のエリア（div.l-reverse__body）」に2分割しましょう。「div.l-reverse__body」に対して「display: flex」を適用させることで、その中に記述されているローカルナビゲーションとコンテンツが横に並ぶようになります。

<div class="l-reverse">
    <nav class="l-reverse__nav">
        <h2>navigation</h2>
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </nav>
    <div class="l-reverse__body">
        <nav class="l-reverse__localNav">
            <h2>local<br>navigation</h2>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </nav>
        <div class="c-box l-reverse__content">
            content
        </div>
    </div>
</div>
.l-reverse__nav {
  position: relative;
  padding: 10px 0;
  background-color: #f5f5f5;
}
.l-reverse__nav h2 {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  font-size: 20px;
}
.l-reverse__nav ul {
  display: flex;
  justify-content: center;
  font-size: 20px;
}
.l-reverse__nav li {
  margin: 0 10px;
}
.l-reverse__body {
  display: flex;
  margin-top: 20px;
}
.l-reverse__localNav {
  flex: 1;
  position: relative;
  padding-top: 40px;
  text-align: center;
  background-color: #f5f5f5;
}
.l-reverse__localNav h2 {
  margin-bottom: 20px;
  font-size: 20px;
}
.l-reverse__content {
  flex: 3;
  min-height: 300px;
  margin-left: 20px;
}

フルスクリーン

画面いっぱいにコンテンツを表示させるパターンです。

表示させたいコンテンツに対して、「width: 100vw」と「height: 100vh」を適用させると、画面幅に対して100%のサイズにすることができます。

<div class="l-full">
    <div class="c-box l-full__content">content</div>
</div>
.l-full__content {
  width: 100vw;
  height: 100vh;
}

シングルカラム

上から順番に、header navigation content…という風に要素が続いていきます。

記述する際も非常にシンプルで、各要素を上から順番に書いていけば自然と出来上がります。

<div class="l-single">
    <header class="c-box l-single__header">header</header>
    <nav class="l-single__nav">
        <h2>global-navigation</h2>
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </nav>
    <div class="c-box l-single__content">content</div>
    <nav class="l-single__nav">
        <h2>local-navigation</h2>
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </nav>
    <footer class="c-box l-single__footer">footer</footer>
</div>
.l-single__header {
  padding: 10px 0;
}
.l-single__nav {
  margin-top: 20px;
  position: relative;
  padding: 10px 0;
  background-color: #f5f5f5;
}
.l-single__nav h2 {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  font-size: 20px;
}
.l-single__nav ul {
  display: flex;
  justify-content: center;
  font-size: 20px;
}
.l-single__nav li {
  margin: 0 10px;
}
.l-single__content {
  min-height: 200px;
  margin-top: 20px;
}
.l-single__footer {
  margin-top: 20px;
  padding: 10px 0;
}

マルチカラム

構成要素自体はシングルカラムとほとんど変わらず、コンテンツとローカルナビゲーションが横に並んでいるレイアウトになります。

一見複雑に見えますが、これもシンプルに考えましょう。「ヘッダー・ナビゲーション・コンテンツとローカルナビゲーションを含むdiv・フッター」が縦に並んでいると考えます。あとはコンテンツとローカルナビゲーションを囲っているdiv（もしくはmain）に対して「display: flex」を適用させれば並列のレイアウトになります。

<div class="l-multi">
    <header class="c-box l-multi__header">header</header>
    <nav class="l-multi__nav">
        <h2>global-navigation</h2>
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </nav>
    <div class="l-multi__body">
        <div class="c-box l-multi__content">content</div>
        <nav class="l-multi__localNav">
            <h2>local-navigation</h2>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </nav>
    </div>
    <footer class="c-box l-multi__footer">footer</footer>
</div>
.l-multi__header {
  padding: 10px 0;
}
.l-multi__nav {
  margin-top: 20px;
  position: relative;
  padding: 10px 0;
  background-color: #f5f5f5;
}
.l-multi__nav h2 {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  font-size: 20px;
}
.l-multi__nav ul {
  display: flex;
  justify-content: center;
  font-size: 20px;
}
.l-multi__nav li {
  margin: 0 10px;
}
.l-multi__body {
  display: flex;
  margin-top: 20px;
}
.l-multi__content {
  flex: 3;
  min-height: 200px;
  margin-right: 20px;
}
.l-multi__localNav {
  flex: 1;
  position: relative;
  padding-top: 40px;
  text-align: center;
  background-color: #f5f5f5;
}
.l-multi__localNav h2 {
  margin-bottom: 20px;
  font-size: 20px;
}
.l-multi__footer {
  margin-top: 20px;
  padding: 10px 0;
}

3分割

グローバルナビゲーション・コンテンツ・ローカルナビゲーションの3つの要素で等分割されているレイアウトです。この3つの要素を囲んでいるdiv(.l-triple)に対して「display: flex」を適用させた上で、それぞれの幅が等しくなるようにwidth（もしくはflex）を調節してあげます。

<div class="l-triple">
    <nav class="l-triple__nav">
        <h2>global<br>navigation</h2>
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </nav>
    <div class="c-box l-triple__content">content</div>
    <nav class="l-triple__nav">
        <h2>local<br>navigation</h2>
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </nav>
</div>
.l-triple {
  display: flex;
}
.l-triple__nav {
  flex: 1;
  position: relative;
  padding-top: 40px;
  text-align: center;
  background-color: #f5f5f5;
}
.l-triple__nav h2 {
  margin-bottom: 20px;
  font-size: 20px;
}
.l-triple__content {
  flex: 1;
  min-height: 300px;
  margin: 0 20px;
}

逆U字

画面上部にグローバルナビゲーション、その下にローカルナビ・コンテンツが3分割で表示されるレイアウトになります。3分割エリア(div.l-u__body)の上にグローバルナビ(nav.l-u__nav)がある、と考えるとそこまで複雑なレイアウトでは無いと思います。

<div class="l-u">
    <nav class="l-u__nav">
        <h2>global-navigation</h2>
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </nav>
    <div class="l-u__body">
        <nav class="l-u__localNav">
            <h2>local<br>navigation</h2>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </nav>
        <div class="c-box l-u__content">content</div>
        <nav class="l-u__localNav">
            <h2>local<br>navigation</h2>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </nav>
    </div>
</div>
.l-u__nav {
  position: relative;
  padding: 10px 0;
  background-color: #f5f5f5;
}
.l-u__nav h2 {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  font-size: 20px;
}
.l-u__nav ul {
  display: flex;
  justify-content: center;
  font-size: 20px;
}
.l-u__nav li {
  margin: 0 10px;
}
.l-u__body {
  display: flex;
  margin-top: 20px;
}
.l-u__localNav {
  flex: 1;
  position: relative;
  padding-top: 40px;
  text-align: center;
  background-color: #f5f5f5;
}
.l-u__localNav h2 {
  margin-bottom: 20px;
  font-size: 20px;
}
.l-u__content {
  flex: 1;
  min-height: 300px;
  margin: 0 20px;
}

グリッドレイアウト

「display: flex」を適用した上で、「flex-wrap: wrap」で折り返しを設定しましょう。さらにアイテムそれぞれに「width: 30%」とmarginを設定すると、複数のアイテムを並列・折り返しで表示させることができます。こちらも、ヘッダー(header.l-grid__header)とグリッドエリア(ul.l-grid__body)の2つのエリアに分けて記述しましょう。

<div class="l-grid">
    <header class="c-box l-grid__header">header</header>
    <ul class="l-grid__body">
        <li class="c-box l-grid__content">content</li>
        <li class="c-box l-grid__content">content</li>
        <li class="c-box l-grid__content">content</li>
        <li class="c-box l-grid__content">content</li>
        <li class="c-box l-grid__content">content</li>
        <li class="c-box l-grid__content">content</li>
        <li class="c-box l-grid__content">content</li>
        <li class="c-box l-grid__content">content</li>
        <li class="c-box l-grid__content">content</li>
    </ul>
</div>
.l-grid__header {
  padding: 10px 0;
}
.l-grid__body {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.l-grid__content {
  width: 30%;
  margin: 16px;
  min-height: 100px;
}

ニュース系情報サイト

要素が多く複雑に見えますが、これもシンプルに考えましょう。上から順番に「ヘッダー・グローバルナビ・ローカルナビ、コンテンツ、広告の3つを囲むdiv・フッター 」が並んでいると考えます。まず、真ん中の3つを囲んでいる要素(div.l-news__body)に対して「display: flex」を適用させて並列にしましょう。さらに、その中のコンテンツエリア(ul.l-news__main)にも「display: flex」を記述することで、並列の中に更に並列を作ることが可能です。

<div class="l-news">
    <header class="c-box l-news__header">header</header>
    <nav class="l-news__nav">
        <h2>global-navigation</h2>
        <ul>
            <li>item</li>
            <li>item</li>
            <li>item</li>
        </ul>
    </nav>
    <div class="l-news__body">
        <nav class="l-news__localNav">
            <h2>local<br>navigation</h2>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </nav>
        <ul class="l-news__main">
            <li class="c-box l-news__content">content</li>
            <li class="c-box l-news__content">content</li>
            <li class="c-box l-news__content">content</li>
            <li class="c-box l-news__content">content</li>
            <li class="c-box l-news__content">content</li>
            <li class="c-box l-news__content">content</li>
            <li class="c-box l-news__content">content</li>
            <li class="c-box l-news__content">content</li>
        </ul>
        <div class="c-box l-news__ad">advertisement</div>
    </div>
    <footer class="c-box l-news__footer">footer</footer>
</div>
.l-news__header {
  padding: 10px 0;
}
.l-news__nav {
  margin-top: 20px;
  position: relative;
  padding: 10px 0;
  background-color: #f5f5f5;
}
.l-news__nav h2 {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  font-size: 20px;
}
.l-news__nav ul {
  display: flex;
  justify-content: center;
  font-size: 20px;
}
.l-news__nav li {
  margin: 0 10px;
}
.l-news__body {
  display: flex;
  margin-top: 20px;
}
.l-news__localNav {
  flex: 1;
  position: relative;
  padding-top: 40px;
  text-align: center;
  background-color: #f5f5f5;
}
.l-news__localNav h2 {
  margin-bottom: 20px;
  font-size: 20px;
}
.l-news__main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: 2;
  margin: 0 20px;
}
.l-news__content {
  width: 49%;
  padding: 10px 0;
  margin-bottom: 10px;
}
.l-news__ad {
  flex: 1;
}
.l-news__footer {
  margin-top: 20px;
  padding: 10px 0;
}

ECサイト系

画面を「ヘッダー・メインエリア・フッター」の3つに分けます。その上で、真ん中のメインエリア(div.l-ec__body)に「display: flex」を適用させることで、その中に記述されているカテゴリー(div.l-ec__category)とコンテンツエリア(ul.l-ec__main)が横に並びます。

<div class="l-ec">
    <header class="c-box l-ec__header">header</header>
    <div class="l-ec__body">
        <div class="l-ec__category">
            <h2>category</h2>
            <ul>
                <li>item</li>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>
        <ul class="l-ec__main">
            <li class="c-box l-ec__content">content</li>
            <li class="c-box l-ec__content">content</li>
            <li class="c-box l-ec__content">content</li>
            <li class="c-box l-ec__content">content</li>
            <li class="c-box l-ec__content">content</li>
            <li class="c-box l-ec__content">content</li>
        </ul>
    </div>
    <div class="c-box l-ec__footer">footer</div>
</div>
.l-ec__header {
  padding: 10px 0;
}
.l-ec__body {
  display: flex;
  margin-top: 20px;
}
.l-ec__category {
  flex: 1;
  margin-right: 20px;
  margin-bottom: 10px;
  position: relative;
  padding-top: 40px;
  text-align: center;
  background-color: #f5f5f5;
}
.l-ec__category h2 {
  margin-bottom: 20px;
  font-size: 20px;
}
.l-ec__main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex: 2;
}
.l-ec__content {
  width: 49%;
  margin-bottom: 10px;
  padding: 10px 0;
}
.l-ec__footer {
  margin-top: 10px;
  padding: 10px 0;
}

おまけ：レスポンシブ対応

ここまでPC版を想定してコードなど掲載してきましたが、これらをスマートフォンに対応させる際の考え方について最後にお話ししたいと思います。

とは言っても基本的な考え方は共通していますので、ここでは要素が多くて複雑に見える「マルチカラム」を例に挙げたいと思います。

レスポンシブ対応の考え方は非常にシンプルです。基本的には、PC版で横に並んでいたものを縦に並ぶよう直すだけです。

/* 見た目の調整なので、気にせずで大丈夫です */
.l-multi__nav {
  margin-top: 20px;
  position: relative;
  padding: 10px 0;
  background-color: #f5f5f5;
}
@media (max-width: 767px) {
  .l-multi__nav {
    padding: 20px 0;
  }
}
/* 便宜上非表示にしています */
.l-multi__nav li {
  margin: 0 10px;
}
@media (max-width: 767px) {
  .l-multi__nav li {
    display: none;
  }
}
/* 横並びの解消 */
.l-multi__body {
  display: flex;
  margin-top: 20px;
}
@media (max-width: 767px) {
  .l-multi__body {
    display: block;
  }
}
/* 右の余白を解消、下の要素との余白を設ける */
.l-multi__content {
  flex: 3;
  min-height: 200px;
  margin-right: 20px;
}
@media (max-width: 767px) {
  .l-multi__content {
    margin-right: 0;
    margin-bottom: 20px;
    min-height: 130px;
  }
}

まず、「display: flex」が記述されている箇所(div.l-multi__body)に対して、メディアクエリで「display: block」を記述します。こうすることで、まず横並びが解消されて縦に並ぶようになります。併せて、横の要素との間に設けていた余白（margin-rightやmargin-leftなど）を解消しましょう。ここでは、「div.l-multi__content」に対して「margin-right: 0」と書きました。

.l-main {
  width: 1000px;
  margin: 0 auto;
  padding-bottom: 200px;
}
@media (max-width: 767px) {
  .l-main {
    width: 100%;
  }
}

最後に、「width」の指定についてです。PC版にて要素の幅を「px」という単位で指定していた場合、スマートフォンで見た際に要素が端末からはみ出ることになります。これを防ぐため、固定幅が設定されている箇所に対して、メディアクエリで「width: 100%」というふうに記述しましょう。「%」で指定することにより、微妙に異なる端末ごとの画面幅にも対応できるようになります。

こちらの記事はいかがでしたか？
+1
0
+1
0
+1
0
+1
0

Related posts

【CSS】プロパティ・値・単位の一覧　基礎〜応用

【Vue.js】はじめの一歩

【jQuery】ドロワーメニュー

レイアウト作成のためのdisplay:gridを分かりやすく解説！【初・中級者向け】

RECENT ENTRIES

【PR】Tech Tech Zoo

CATEGORIES

【PR】オリジナルキャラクター「てくてくず」を公開しました！

作品は、随時X（旧Twitter）で公開していきます！
ぜひ「てくてくず」の作品を応援していただけたら嬉しいです。

X（旧Twitter）アカウントはこちら：
https://twitter.com/tech_tech_zoo

RECENT ENTRIES

  • ハンバーガーメニューの作り方のポイント・バリエーションを解説します

    VIEW MORE

  • 【AI搭載エディタ】Cursorエディタとは？導入・使い方から制作を効率化するプロンプト（指示）を徹底紹介！

    VIEW MORE

  • metaタグの設定方法・種類をわかりやすく解説！【SEO最適化】

    VIEW MORE

CATEGORIES

CONTACT

contact