サンプルレイアウト

概要

ヘッダ、左メニュー、メインパネル、サイドバー、フッターから構成される画面のサンプルを示します。
JavaScript は使用していません。CSS のみで実装しています。
ヘッダは上部に、フッターは下部に固定化されます。
左メニューはハンバーガーアイコンで開閉できます。
画面の横幅が狭い場合、サイドバーは非表示となります。

≡ Header
Menu	Main	Side
Footer

実例

実例

ソースコード

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプルレイアウト</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
  <!-- ヘッダー -->
  <div class="header">
    <!-- ハンバーガーメニュー -->
    <div class="hamburger-menu">
      <input type="checkbox" id="hamburger-checkbox" checked>
      <label for="hamburger-checkbox" class="hamburger-lines arrow">
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
      </label>
    </div>
    <!-- ヘッダーロゴ -->
    <div class="header-logo">
      &#x1F3D0;
    </div>
    <!-- ヘッダータイトル -->
    <div class="header-title">
      Header
    </div>
    <!-- ユーザ名 -->
    <div class="header-user">
      山田太郎
    </div>
    <!-- ログアウト -->
    <div class="header-menu">
      ログアウト
    </div>
  </div>
  <!-- ボディ(左メニュー＋メインパネル＋サイドバー) -->
  <div class="body">
    <!-- 左メニュー -->
    <div class="menu">
      <ul>
      <li><div class="menu-item">Menu#1</div>
        <ul>
        <li><div class="menu-item">Menu#1-1</div>
          <ul>
          <li><div class="menu-item">Menu#1-1-1</div></li>
          <li><div class="menu-item">Menu#1-1-2</div></li>
          <li><div class="menu-item">Menu#1-1-3</div></li>
          </ul>
        </li>
        <li><div class="menu-item">Menu#1-2</div></li>
        <li><div class="menu-item">Menu#1-3</div></li>
        </ul>
      </li>
      <li><div class="menu-item">Menu#2</div></li>
      <li><div class="menu-item">Menu#3</div></li>
      </ul>
    </div>
    <!-- メインパネル -->
    <div class="main">
      <div class="main-title">
        Main
      </div>
      <div>Main...</div>
      <div>Main...</div>
      <div>Main...</div>
    </div>
    <!-- サイドバー -->
    <div class="side">
      <div>Side</div>
      <div>Side</div>
      <div>Side</div>
    </div>
  </div>
  <!-- フッター -->
  <div class="footer">
    Footer
  </div>
</div>
</body>
</html>

style.css

/* 変数定義 */
:root {
  --default-padding: .5rem;
  --default-font-family: "メイリオ";
  --default-font-size: 14px;
  --default-font-color: #444;
  --default-border-color: #ccc;
  --default-transition-duration: .2s;
  --header-height: 3rem;
  --header-background-color: #000;
  --header-title-font-size: 18px;
  --header-title-font-weight: bold;
  --header-font-color: #fff;
  --menu-width: 10rem;
  --menu-background-color: #ddd;
  --menu-hover-background-color: #ccc;
  --main-background-color: #eee;
  --main-title-font-size: 180%;
  --main-title-font-weight: bold;
  --side-background-color: #ddd;
  --side-width: 10rem;
  --footer-height: 2rem;
  --footer-background-color: #000;
  --footer-font-color: #fff;
}

/* 全体設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* コンテナ */
.container {
  /* 文字のデフォルト設定 */
  font-family: var(--default-font-family);
  font-size: var(--default-font-size);
  color: var(--default-font-color);

  /* ヘッダー */
  .header {
    /* ヘッダーを画面上部固定位置に張り付ける */
    position: sticky;
    top: 0;
    /* 構成要素を横方向に並べる */
    display: flex;
    /* 高さ・背景色・文字色 */
    height: var(--header-height);
    background-color: var(--header-background-color);
    color: var(--header-font-color);

    /* ハンバーガーメニュー */
    .hamburger-menu {
      display: flex;
      /* トランジション制御のためのチェックボックスは表示しない */
      #hamburger-checkbox {
        display: none;
      }
      /* ハンバーガーアイコン(三本線) */
      .hamburger-lines {
        /* 縦方向に中央寄せ */
        align-self: center;
        /* 横方向パディング */
        padding: 0 1rem;
        /* マウスを乗せた時にマウスカーソルをポインタ型にする */
        cursor: pointer;
        .hamburger-line {
          display: block;
          width: 25px;
          height: 3px;
          margin: 5px 0;
          background-color: #fff;
          border-radius: 1.5px;
          /* 開閉時にトランジションをかける */
          transition: var(--default-transition-duration);
        }
      }
      /* メニューを閉じた時のハンバーガーアイコン(×タイプ) */
      #hamburger-checkbox:checked ~ .hamburger-lines.cross {
        .hamburger-line {
          &:nth-child(1) { transform: rotate(45deg)  translate(6px, 5px); }
          &:nth-child(2) { opacity: 0; }
          &:nth-child(3) { transform: rotate(-45deg) translate(6px, -5px); }
        }
      }
      /* メニューを閉じた時のハンバーガーアイコン(←タイプ) */
      #hamburger-checkbox:checked ~ .hamburger-lines.arrow {
        .hamburger-line {
          &:nth-child(1) { transform: rotate(-45deg) translate(-5px, 0px); width: 15px; }
          &:nth-child(2) { opacity: 1; }
          &:nth-child(3) { transform: rotate(45deg)  translate(-4px, 0px); width: 15px; }
        }
      }
    }
    /* ヘッダーロゴ */
    .header-logo {
      /* 縦横方向に中央寄せ */
      display: grid;
      justify-items: center;
      align-content: center;
      /* フォント */
      font-size: 170%;
    }
    /* ヘッダータイトル */
    .header-title {
      /* 横幅最大 */
      flex: 1;
      /* 縦方向に中央寄せ */
      display: grid;
      align-content: center;
      /* パディング */
      padding: 0 var(--default-padding);
      /* フォント */
      font-weight: var(--header-title-font-weight);
      font-size: var(--header-title-font-size);
    }
    /* ユーザ名 */
    .header-user {
      /* 縦横方向に中央寄せ */
      display: grid;
      justify-items: center;
      align-content: center;
      /* パディング */
      padding: 0 var(--default-padding);
    }
    /* ログアウトメニュー */
    .header-menu {
      /* 縦横方向に中央寄せ */
      display: grid;
      justify-items: center;
      align-content: center;
      /* パディング */
      padding: 0 var(--default-padding);
    }
  }

  /* ボディ(左メニュー＋メインパネル＋サイドメニュー) */
  .body {
    /* 子要素を横方向に並べる */
    display: flex;

    /* 左メニュー */
    .menu {
      /* 閉じてる時の横幅は0 */
      width: 0;
      /* 高さは画面の高さからヘッダーとフッターを差し引いた高さ */
      height: calc(100vh - var(--header-height) - var(--footer-height));
      /* 表示しきれない領域はスクロールバー表示 */
      overflow-y: auto;
      /* 背景色 */
      background-color: var(--menu-background-color);
      /* メニュー開閉時のトランジション */
      transition: var(--default-transition-duration);
      ul {
        /* リストの・は表示しない */
        list-style: none;
        li {
          /* ボーダー線 */
          border-top: 1px solid var(--default-border-color);
          border-bottom: 1px solid var(--default-border-color);
          border-left: 1px solid var(--default-border-color);
          /* 上下のボーダーが重なると線が太くなってしまう問題の対処 */
          margin-bottom: -1px;
          /* マウスを乗せるとマウスカーソルをポインタ型にする */
          cursor: pointer;
          /* メニューアイテム */
          .menu-item {
            /* パディング */
            padding: .2rem;
            /* マウスを乗せた時 */
            &:hover {
              /* 背景色を変える */
              background-color: var(--menu-hover-background-color);
            }
          }
        }
      }
      /* 最上位以外のメニューに左インデントをつける */
      & > ul ul {
        margin-left: .7rem;
      }
    }

    /* メインパネル */
    .main   {
      /* 左右に最大表示する */
      flex: 1;
      /* 高さは画面の高さからヘッダーとフッターを差し引いた高さ */
      height: calc(100vh - var(--header-height) - var(--footer-height));
      /* 表示しきれない領域はスクロールバー表示 */
      overflow: auto;
      /* 背景色 */
      background-color: var(--main-background-color);
      /* パディング */
      padding: var(--default-padding);
      /* メインパネルタイトル */
      .main-title {
        font-size: var(--main-title-font-size);
        font-weight: var(--main-title-font-weight);
      }
    }

    /* サイドバー */
    .side   {
      /* 横幅 */
      width: var(--side-width);
      /* 高さは画面の高さからヘッダーとフッターを差し引いた高さ */
      height: calc(100vh - var(--header-height) - var(--footer-height));
      /* 表示しきれない領域はスクロールバー表示 */
      overflow: auto;
      /* 背景色 */
      background-color: var(--side-background-color);
      /* パディング */
      padding: var(--default-padding);
    }
  }

  /* フッター */
  .footer {
    /* フッターを画面上部固定位置に張り付ける */
    position: sticky;
    bottom: 0;
    /* 高さ固定 */
    height: var(--footer-height);
    /* 縦方向に中央寄せ */
    display: grid;
    align-content: center;
    /* 背景色 */
    background-color: var(--footer-background-color);
    /* パディング */
    padding: var(--default-padding);
    /* 文字色 */
    color: var(--footer-font-color);
  }
}

/* 開いたときの左メニュー */
.header:has(#hamburger-checkbox:checked) ~ .body .menu {
  /* 横幅をトランジションして開く */
  width: var(--menu-width);
}

/* 画面の横幅が狭いときはサイドバーを非表示にする */
@media (width < 768px) {
  .side {
    display: none;
  }
}

初版： 2025年2月16日、最終更新：2025年2月16日

https://www.tohoho-web.com/how2/sample-layout.html