サンプルレイアウト

トップ
How To
サンプルレイアウト

概要

ヘッダ、左メニュー、メインパネル、サイドバー、フッターから構成される画面のサンプルを示します。
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