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

生徒

「スマホサイトでよく見る、三本線のアイコンを押すとメニューが出てくる仕組みってどう作るんですか？」

先生

「あれは『ハンバーガーメニュー』と呼ばれるものです。CSSのメディアクエリを使って、パソコンでは横並び、スマホでは隠しておくという切り替えを行っているんですよ。」

生徒

「パソコンの時は普通に見えていて、スマホの時だけ隠す……そんな魔法みたいなことができるんですね！」

先生

「そうなんです。まずは基本となる表示と非表示の切り替え方法から一緒に見ていきましょう！」

1. ハンバーガーメニューとは？スマホ対応に必須の知識

ハンバーガーメニューとは、スマートフォンのような画面幅が狭いデバイスで、ナビゲーションメニューをスッキリ収納するために使われるボタンのことです。三本の横線が重なった形がハンバーガーに見えることからその名がつきました。パソコンの広い画面ではメニューを横に並べて表示できますが、スマホでは画面を圧迫してしまうため、普段は隠しておき、ボタンを押した時だけ表示させる工夫が必要になります。

この仕組みを実現するには「レスポンシブデザイン」という技術を使います。これは、一つのWebサイトをパソコン、タブレット、スマートフォンといった異なる画面サイズに合わせて、自動で見やすく調整する仕組みのことです。プログラミング未経験の方でも、CSSの基本的なルールを覚えれば、驚くほど簡単にメニューの出し入れができるようになります。

2. メディアクエリでデバイスごとに表示を分ける方法

メニューの表示切り替えで主役になるのが「メディアクエリ」というCSSの命令です。これは「もし画面の幅が〇〇px以下だったら、この命令を実行してね」という条件付きの指示書のようなものです。メディアクエリを使うことで、「パソコンではメニューを表示し、三本線ボタンを隠す」「スマホではメニューを隠し、三本線ボタンを表示する」という正反対の指示を同時に出すことができます。

ここで重要な単語が「display: none;（ディスプレイ：ノーン）」です。これは、指定した要素を画面上から完全に消し去る命令です。逆に表示させたい時は「display: block;」などを使います。この二つを、画面の横幅に合わせてパチパチとスイッチのように切り替えるのが、ハンバーガーメニューの基本原理です。


<style>
/* パソコンではメニューを表示し、ボタンを隠す */
.nav-menu {
    display: block; /* 表示する */
    background: #f0f0f0;
    padding: 10px;
}
.btn-burger {
    display: none; /* 隠す */
}

/* 画面幅が600px以下の時（スマホ向け） */
@media (max-width: 600px) {
    .nav-menu {
        display: none; /* メニューを隠す */
    }
    .btn-burger {
        display: block; /* 三本線ボタンを表示する */
        font-size: 30px;
        cursor: pointer;
    }
}
</style>

<div class="btn-burger">☰</div>
<nav class="nav-menu">
    ホーム / サービス / お問い合わせ
</nav>
<p>画面の横幅を狭くすると、メニューが消えて「☰」マークが現れます！</p>

ブラウザ表示

3. displayプロパティを使った非表示と表示の基本

プログラミング初心者の方が最初につまずきやすいのが、「隠れているものをどうやって出すか」という点です。実はCSSだけで「ボタンを押した時に出す」という動作を作るには、いくつか工夫が必要になります。本来はJavaScript（ジャバスクリプト）という別の言語を使うのが一般的ですが、基本の考え方は「クラス（名前）」の付け替えです。

例えば、「is-open」という名前がついている時だけ表示される、という命令を書いておきます。ボタンが押された瞬間にその名前をぺたっと貼り付けることで、メニューが姿を現します。このように、CSSは「状態」を定義するのが得意な言語です。まずは「見えている状態」と「消えている状態」の二つの指示書を別々に用意するイメージを持つことから始めてみましょう。

4. スマホでメニューを縦並びにするレイアウト術

パソコンでは横に並んでいたメニューも、スマホで表示させる時は縦に並べた方が指で操作しやすくなります。この時、以前学習した「フレックスボックス（flexbox）」という技術の向きを切り替えるのがコツです。「flex-direction: column;（フレックス・ディレクション：コラム）」という命令を使えば、横並びの要素が魔法のように縦一列に整列します。

縦並びにすることで、スマホの狭い画面でも文字が重なることなく、一つ一つのリンクが大きく押しやすくなります。ユーザーにとっての使いやすさ（アクセシビリティ）を考えることも、立派なWeb制作のスキルです。パソコンを触ったことがない方でも、スマホを使っている時の自分の指の動きを思い出しながら、余白をたっぷり取ったメニューを作ってみましょう。


<style>
.flex-nav {
    display: flex;
    list-style: none;
    padding: 0;
    background: #333;
}
.flex-nav li a {
    color: white;
    padding: 15px;
    display: block;
    text-decoration: none;
}

/* スマホでは縦に並べる */
@media (max-width: 480px) {
    .flex-nav {
        flex-direction: column; /* 縦並びにする */
        text-align: center;
    }
    .flex-nav li {
        border-bottom: 1px solid #444;
    }
}
</style>

<ul class="flex-nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">BLOG</a></li>
</ul>

ブラウザ表示

5. 画面の端からメニューが飛び出す仕組み

最近の流行りは、ボタンを押すと画面の左や右から「スッ」とメニューがスライドしてくる演出です。これは「ドロワーメニュー」とも呼ばれます。この仕組みは、実はメニューを画面の外（マイナスの座標）に追いやって隠しておくことで実現しています。

例えば、メニューの横幅を250pxと決めたら、左側に「-250px」の位置に配置します。そうするとメニューは画面の外側に隠れて見えなくなります。表示させたい時だけ、その位置を「0」に戻してあげれば、画面の中に滑り込んでくるわけです。この「見えない場所に待機させておく」という考え方は、Webデザインにおいて非常によく使われるテクニックです。物理的に物が動く様子をイメージすると理解が深まります。

6. position: fixedを使ってメニューを固定する

ハンバーガーメニューの中身を表示させた時、困るのが「背景のページが動いてしまう」ことです。メニューを開いている間は、メニュー自体が画面の一番手前に固定されている必要があります。ここで使うのが「position: fixed;（ポジション：フィックスド）」です。

「fixed」を使うと、その要素を画面の決まった位置にピン留めすることができます。ページをいくらスクロールしても、メニューはずっと同じ場所に居続けます。これによって、スマホの小さな画面でも操作に迷うことがなくなります。また、一番手前に持ってくるために「z-index（ゼット・インデックス）」という重なりの順序を決める命令も一緒に使うのが一般的です。これは、お絵かきのレイヤー（階層）のようなものだと考えてください。


<style>
/* スマホサイズの時だけ全画面メニューにする例 */
@media (max-width: 500px) {
    .full-menu {
        position: fixed; /* 画面に固定 */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8); /* 半透明の黒 */
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        z-index: 999; /* 一番手前に */
    }
}
</style>

<div class="full-menu">
    全画面メニュー表示中
</div>
<div style="padding: 20px;">
    <p>背景のコンテンツです。スマホサイズで見るとメニューが覆いかぶさります。</p>
    <img src="/img/sample150-100.jpg" alt="見本">
</div>

ブラウザ表示

7. チェックボックスを使ってCSSだけで切り替える裏技

本来、ボタンのクリック動作にはJavaScriptが必要ですが、実は「チェックボックス」というHTMLの部品を悪用（？）して、CSSだけで切り替えを作る面白い方法があります。チェックボックスが「チェックされているか、いないか」という状態を、メニューの「表示・非表示」に連動させるのです。

この方法のメリットは、プログラミング初心者の方でもJavaScriptの難しい文法を学ばずに、動きのあるサイトを作れる点にあります。HTMLの「label」タグを三本線ボタンに見立てて、チェックを入れると隣にあるメニューが現れるように設定します。パズルを解くような感覚でコーディングが楽しめるので、ぜひ一度挑戦してみてほしいテクニックです。

8. ブラウザの検証ツールで切り替えをテストしよう

メディアクエリを使った表示切り替えがうまく書けたら、最後は自分の手で確認が必要です。パソコンのブラウザ（Google Chromeなど）には、スマホでの見え方をシミュレーションする「検証ツール」が備わっています。画面を右クリックして「検証」を選ぶと、画面の幅を自由に変えることができます。

幅を縮めていき、設定したブレイクポイント（境目）を越えた瞬間に、メニューがパッと消えてボタンが現れるか確認しましょう。もし変わらない場合は、スペルミスがないか、メディアクエリのカッコの閉じ忘れがないかチェックします。この試行錯誤こそが、上達への一番の近道です。自分の書いた命令通りに画面が動く快感を、ぜひ味わってください！


<style>
/* 仕上げのスタイリング */
.test-box {
    padding: 20px;
    border: 3px dashed #ccc;
    text-align: center;
}

/* 600pxを境に、中の文字の色と内容が変わる演出 */
.status-text::before {
    content: "現在の表示：パソコン版";
    color: blue;
    font-weight: bold;
}

@media (max-width: 600px) {
    .status-text::before {
        content: "現在の表示：スマホ版（メニュー隠蔽中）";
        color: red;
    }
    .test-box {
        background-color: #fff0f0;
    }
}
</style>

<div class="test-box">
    <p class="status-text"></p>
    <p>ブラウザの幅を変えてみてください。</p>
</div>

ブラウザ表示