サンプルレイアウト
目次
概要
- ヘッダ、左メニュー、メインパネル、サイドバー、フッターから構成される画面のサンプルを示します。
- 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">
🏐
</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;
}
}
Copyright (C) 2025 杜甫々
初版： 2025年2月16日、最終更新：2025年2月16日
https://www.tohoho-web.com/how2/sample-layout.html