管理画面テンプレートの作り方：サイドバー＋固定ヘッダーの基本

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapで管理画面みたいなページって作れますか？」

先生

「もちろん作れますよ。Bootstrapを使えば、サイドバーや固定ヘッダーを簡単に作成できます。」

生徒

「パソコン初心者でも作れますか？」

先生

「大丈夫。今日はHTMLとBootstrapだけで、かんたんな管理画面のテンプレートを作ってみましょう！」

1. 管理画面ってなに？どんな構成？

管理画面（かんりがめん）とは、ブログの投稿や商品の管理など、裏側の操作をする専用ページのことです。管理者が使うページなので、見やすくて操作しやすいレイアウトが大切です。

一般的な管理画面では、左にメニューを並べた「サイドバー（side bar）」と、上に固定された「ヘッダー（header）」があります。

この２つの要素をBootstrapを使って、パソコン初心者でも作れるように順番に作っていきましょう。

2. 全体のレイアウト構造をつくろう

まずは、HTMLの中にサイドバーとヘッダー、そして中身（メインコンテンツ）を配置するための枠を作ります。サイドバーは左側に表示し、ヘッダーは画面の上部に固定します。


<div class="d-flex">
    <!-- サイドバー -->
    <nav class="bg-dark text-white p-3" style="width: 250px; height: 100vh; position: fixed;">
        <h2>メニュー</h2>
        <ul class="nav flex-column">
            <li class="nav-item"><a href="#" class="nav-link text-white">ダッシュボード</a></li>
            <li class="nav-item"><a href="#" class="nav-link text-white">ユーザー管理</a></li>
            <li class="nav-item"><a href="#" class="nav-link text-white">設定</a></li>
        </ul>
    </nav>

    <!-- メインコンテンツ（右側） -->
    <div class="flex-grow-1" style="margin-left: 250px;">
        <!-- 固定ヘッダー -->
        <header class="bg-primary text-white p-3 sticky-top">
            <h1>管理画面</h1>
        </header>

        <!-- ページの中身 -->
        <main class="p-4">
            <p>ここにコンテンツを表示します。</p>
        </main>
    </div>
</div>

ブラウザ表示

3. Bootstrapのクラスを理解しよう

上のコードでは、classという属性を使って、Bootstrapのスタイルを使っています。たとえば：

bg-dark：背景色を黒にします。
text-white：文字色を白にします。
d-flex：横並びのレイアウトを作ります（フレックスボックス）。
sticky-top：スクロールしても上に固定されるヘッダーになります。
flex-grow-1：右側のメイン部分が画面いっぱいに広がります。

これらのクラスは、CSS（デザインを整える言語）を書かなくても、見た目を簡単に整えることができる便利な仕組みです。

4. CSSを使って余白や高さを調整しよう

サイドバーとメイン部分がぶつからないように、margin-leftで右側にずらしています。これは、固定されたサイドバーの幅と合わせる必要があります。


<style>
    body {
        margin: 0;
    }

    nav {
        width: 250px;
        height: 100vh;
        position: fixed;
    }

    .main-content {
        margin-left: 250px;
    }
</style>

<div class="main-content">
    <header class="bg-primary text-white p-3 sticky-top">
        <h1>固定ヘッダー</h1>
    </header>
</div>

ブラウザ表示

5. 固定ヘッダーがスクロールしても上に表示される仕組み

sticky-topというBootstrapのクラスは、画面をスクロールしてもヘッダーが上に固定されて見えるようにする機能です。

これは管理画面にとってとても便利で、どのページでもすぐに戻れるようなナビゲーションを表示できます。

6. 管理画面でよくあるレイアウトパターン

今回作ったレイアウトは、いわゆる「左サイドバー＋上固定ヘッダー」というパターンで、以下のようなページに使われています：

ECサイトの管理画面（商品登録・注文管理）
ブログの管理ページ（投稿・編集）
社内システムのダッシュボード

このレイアウトは見た目が整っていて、使いやすさも高いので、実際の仕事でもよく使われます。

7. HTMLやCSSがわからなくても作れる理由

Bootstrapは、あらかじめ用意された「部品（パーツ）」を組み合わせて使うだけで、プロっぽいページを作ることができます。

そのため、プログラミングやパソコンに詳しくなくても、管理画面のようなページが簡単に作れるのです。

これから少しずつ、ナビゲーションバーやアイコンの追加、ページの切り替えなども学んでいきましょう。

まとめ

管理画面テンプレートの基本構成を振り返ろう

今回の記事では、Bootstrapを使って「管理画面テンプレート」を作成するための基本構成として、左側にサイドバーを配置し、画面上部に固定ヘッダーを設置するレイアウトについて学びました。管理画面は、ブログ投稿やユーザー管理、設定変更など、日常的に操作する場面が多いため、見やすさと操作のしやすさがとても重要です。その中でも「サイドバー＋固定ヘッダー」という構成は、多くのWebサービスや業務システムで採用されている定番レイアウトです。

サイドバーにはメニューをまとめて配置することで、どの画面からでも主要な機能にすぐ移動できるようになります。また、固定ヘッダーを使えば、スクロールしてもページ上部の情報やタイトル、ナビゲーションが常に表示されるため、現在の位置を見失いにくくなります。こうした工夫は、管理画面を使う人のストレスを減らし、作業効率を高めることにつながります。

Bootstrapクラスを使うメリット

記事の中では、d-flex や flex-grow-1、 bg-dark、text-white、sticky-top といった Bootstrapのクラスを使ってレイアウトを組み立てました。これらのクラスを活用することで、 CSSを一から書かなくても、整った管理画面レイアウトを作ることができます。 HTML初心者でも、クラスの意味をひとつずつ理解していけば、実務で使える画面を作れるようになるのがBootstrapの大きな魅力です。

特に sticky-top は、管理画面との相性がとても良いクラスです。スクロールしてもヘッダーが上に固定されるため、長いページでも操作に迷いにくくなります。また、サイドバーを position: fixed で固定し、メインコンテンツ側に margin-left を設定することで、レイアウトの重なりを防ぐ仕組みも学びました。これは管理画面テンプレートを作るうえで、必ず押さえておきたい基本テクニックです。

まとめとして確認する管理画面サンプル

ここで、今回の内容を踏まえたシンプルな管理画面レイアウトの例を振り返ってみましょう。サイドバーと固定ヘッダーの関係が分かりやすく、初心者でも応用しやすい構成になっています。


<div class="d-flex">
    <nav class="bg-dark text-white p-3" style="width:250px;height:100vh;position:fixed;">
        <h2>管理メニュー</h2>
        <ul class="nav flex-column">
            <li class="nav-item"><a class="nav-link text-white" href="#">ダッシュボード</a></li>
            <li class="nav-item"><a class="nav-link text-white" href="#">ユーザー</a></li>
            <li class="nav-item"><a class="nav-link text-white" href="#">設定</a></li>
        </ul>
    </nav>

    <div class="flex-grow-1" style="margin-left:250px;">
        <header class="bg-primary text-white p-3 sticky-top">
            <h1>管理画面ヘッダー</h1>
        </header>
        <main class="p-4">
            <p>ここに管理画面の内容を表示します。</p>
        </main>
    </div>
</div>

ブラウザ表示

このような基本テンプレートを作っておけば、あとは中身を差し替えるだけで、ダッシュボードや一覧画面、設定画面などを簡単に増やしていくことができます。管理画面テンプレートを最初にしっかり作っておくことは、今後のWeb制作をスムーズに進めるための大きな土台になります。

先生と生徒の振り返り会話

生徒

「管理画面って難しそうなイメージがありましたが、 Bootstrapのクラスを使えば意外とシンプルに作れるんですね。」

先生

「そうですね。基本のレイアウトさえ理解できれば、あとは部品を組み合わせるだけです。」

生徒

「サイドバーと固定ヘッダーの関係が分かったので、自分でも管理画面を作れそうな気がしてきました。」

先生

「その感覚がとても大切です。今回の管理画面テンプレートをベースに、少しずつ機能を追加していけば、実務でも使えるレベルまで成長できますよ。」