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

生徒

「CSSでボタンをクリックしたらメニューがポップアップするようにできますか？」

先生

「はい、CSSだけでも簡単なポップアップ表示は可能です。positionとdisplayを組み合わせて実現できます。」

生徒

「positionって、relativeとかabsoluteを使うやつですよね？」

先生

「その通りです。ポップアップは絶対配置（absolute）で親要素の位置を基準に表示させることが多いです。親にrelativeを設定しておくと、子のポップアップの位置を自由に調整できます。」

生徒

「なるほど！それだけでボタンを押したら表示されるんですか？」

先生

「CSSだけだとhover（マウスを乗せたとき）やfocus（フォーカス時）で表示させることが多いです。クリックで表示させたい場合は少しJavaScriptが必要ですが、まずはCSSだけで基本を覚えましょう。」

1. ポップアップ表示の基本的な仕組み

ポップアップメニューは、ボタンなどのトリガー要素の上に絶対配置された子要素として作られます。親要素にposition: relativeを指定し、子要素にposition: absoluteを指定することで、親要素を基準に位置を調整できます。displayプロパティで表示・非表示を切り替えます。

2. マウスオーバーで表示する基本テクニック


<style>
    .popup-container {
        position: relative;
        display: inline-block;
        margin: 50px;
    }
    .popup-button {
        padding: 10px 20px;
        background-color: #0d6efd;
        color: white;
        border: none;
        cursor: pointer;
        border-radius: 5px;
    }
    .popup-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 150px;
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        border-radius: 5px;
        padding: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        z-index: 10;
    }
    .popup-container:hover .popup-menu {
        display: block;
    }
</style>

<div class="popup-container">
    <button class="popup-button">メニュー</button>
    <div class="popup-menu">
        <a href="#">メニュー1</a><br>
        <a href="#">メニュー2</a><br>
        <a href="#">メニュー3</a>
    </div>
</div>

ブラウザ表示

この例では、ボタンの上にマウスを置くと、メニューが表示されます。position: absoluteにより、親ボタンのすぐ下に表示され、親要素を基準に正確に位置を決められます。

3. display以外の表示切り替え方法

displayプロパティは簡単ですが、opacity（透明度）やvisibility（表示/非表示）を使う方法もあります。opacityを0から1に変化させるとフェードインのような演出が可能です。visibilityは要素のスペースは保持したまま見えなくする方法です。どちらもpositionと組み合わせることで、よりリッチなポップアップ表現が可能です。

4. z-indexで重なり順を調整

ポップアップは他の要素の上に重なる必要があるため、z-indexで表示順を調整します。z-indexの値が大きい要素ほど前面に表示されます。positionがrelative, absolute, fixedのいずれかに設定されている要素に適用できます。

5. 実践的なポップアップUIのポイント

親要素にposition: relativeを設定して子要素の絶対配置を制御する
hoverやfocusでdisplayを切り替えて簡単にポップアップ表示
z-indexを使って他の要素より前面に表示させる
opacityやtransitionを組み合わせてフェードイン/アウトの演出
ボタンやアイコンをトリガーにして、メニューやツールチップを表示

この基本を理解すれば、ナビゲーションメニューやボタンのドロップダウン、カード上のツールチップなど、さまざまなUIデザインに応用できます。

6. 練習して理解を深めよう

まずは親要素にrelative、子要素にabsoluteを設定して、display: none/ blockで表示切り替えを試しましょう。hoverでポップアップが出るか確認し、topやleftで位置を微調整して、どの位置を基準に表示されるかを理解してください。z-indexを変更して重なり順の調整も体験すると、UIデザインのコツが自然と身につきます。