この記事にはプロモーションが含まれています。

【Web制作シリーズ】ナビゲーションメニューを作ろう！ホバー効果とFlexboxによる整列

2025-08-042025-08-10

Web制作学習シリーズの第3回目です！

今回は、本格的なWebサイトの完成に向けて、ナビゲーションメニューを追加します！ホバー効果でインタラクティブな体験を提供しつつ、Flexboxによる初めての横並び実装を体験してみましょう。

前回（第2回）の記事を完了した時点のWebページだと、まだまだ物足りないですよね？

ケケンタ

これで本当にWebサイト？

と思われた方も多いはず。

この記事を通して、あなたのWebサイトが、ついに本格的なポートフォリオサイトに進化します！ このシリーズを通して、最終的には完全な自己紹介サイトが完成します。

この記事でできるようになること

プロフェッショナルなナビゲーションメニュー
魅力的なホバー効果とアニメーション
ユーザビリティを重視したWebサイト構造

この記事で完成するもの

本格的なポートフォリオサイト（ナビゲーション付き、ホバー効果、Flexboxによる横並び）

シリーズの進行:
第1回でHTML、第2回でCSS、そして今回はナビゲーションメニューを追加。これで基本的なWebサイトの構造が完成！次回からはさらに高度な技術を学んで、完全なポートフォリオサイトを目指します！

シリーズ目次

前回の記事

【Web制作シリーズ】ナビゲーションメニューを作ろう！ホバー効果とFlexboxによる整列

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

¥1,399 (2025/08/12 08:44:59時点 Amazon調べ-詳細)

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥1,499 (2025/08/12 03:12:59時点 Amazon調べ-詳細)

学習目標

この記事で身につくスキル

リストタグ（ul, li）の使い方
CSSでの横並びレイアウト
ホバー効果の実装
ナビゲーションの基本構造

準備：前回のファイルを確認

前回までに作成したindex.htmlとstyles.cssファイルがあることを確認してください。

もしない場合は、以下の内容で作成してください

index.html

<!DOCTYPE html>
<html>
<head>
    <title>私のポートフォリオ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>田中太郎</h1>
    <h2>Webデザイナー</h2>

    <h3>自己紹介</h3>
    <p>Web制作に興味があります。</p>
    <p>HTMLとCSSを勉強中です。</p>

    <h3>趣味</h3>
    <p>写真撮影</p>
    <p>読書</p>
    <p>旅行</p>

    <h3>目標</h3>
    <p>美しいWebサイトを作れるようになりたいです。</p>
</body>
</html>

styles.css

body {
    background-color: #e8f4f8;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

h1 {
    color: #2c5aa0;
    font-size: 36px;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 3px solid #2c5aa0;
    padding-bottom: 10px;
}

h2 {
    color: #4a90e2;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

h3 {
    color: #7bb3e6;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 10px;
    border-left: 4px solid #7bb3e6;
    padding-left: 15px;
}

p {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}

体験1：ナビゲーションメニューを追加しよう

ステップ1：HTMLにナビゲーションを追加

index.htmlファイルを以下のように変更してください。

<!DOCTYPE html>
<html>
<head>
    <title>私のポートフォリオ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- ナビゲーション -->
    <nav class="navigation">
        <ul class="nav-menu">
            <li><a href="#home">ホーム</a></li>
            <li><a href="#about">自己紹介</a></li>
            <li><a href="#skills">スキル</a></li>
            <li><a href="#works">作品</a></li>
            <li><a href="#contact">お問い合わせ</a></li>
        </ul>
    </nav>

    <h1>田中太郎</h1>
    <h2>Webデザイナー</h2>

    <h3>自己紹介</h3>
    <p>Web制作に興味があります。</p>
    <p>HTMLとCSSを勉強中です。</p>

    <h3>趣味</h3>
    <p>写真撮影</p>
    <p>読書</p>
    <p>旅行</p>

    <h3>目標</h3>
    <p>美しいWebサイトを作れるようになりたいです。</p>
</body>
</html>

ステップ2：ブラウザで確認

ファイルを保存して、ブラウザを更新してください。

表示結果

追加した要素

<nav>: ナビゲーションを表すセマンティックタグ
<ul>: 順序なしリスト
<li>: リストアイテム
<a>: リンク（現在は同じページ内のセクションを指す）

リストは縦に並んで表示される
各メニュー項目はクリック可能なリンク
セマンティックなHTMLで構造を明確に

体験2：CSSで横並びレイアウトにしよう

ステップ1：ナビゲーションのスタイルを追加

styles.cssファイルに以下の内容を追加してください。

body {
    background-color: #e8f4f8;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

/* ナビゲーション */
.navigation {
    background-color: #2c5aa0;
    padding: 15px 0;
    margin-bottom: 30px;
    border-radius: 5px;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 3px;
    transition: background-color 0.3s;
}

h1 {
    color: #2c5aa0;
    font-size: 36px;
    margin-bottom: 10px;
    text-align: center;
    border-bottom: 3px solid #2c5aa0;
    padding-bottom: 10px;
}

h2 {
    color: #4a90e2;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

h3 {
    color: #7bb3e6;
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 10px;
    border-left: 4px solid #7bb3e6;
    padding-left: 15px;
}

p {
    color: #2c3e50;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 10px;
}

ステップ2：ブラウザで確認

ファイルを保存して、ブラウザを更新してください。

表示結果

変化を確認

ナビゲーションが青い背景で表示
メニュー項目が横並びに配置
白い文字で見やすく表示
中央揃えでバランスの良いレイアウト

新しく使ったCSSプロパティ

display: flex: Flexboxレイアウト
justify-content: center: 中央揃え
gap: 20px: 要素間の間隔
list-style: none: リストマーカーを削除
transition: アニメーション効果

体験3：ホバー効果を追加しよう

ステップ1：ホバー効果を追加

styles.cssファイルの.nav-menu a部分を以下のように変更してください。

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 3px;
    transition: background-color 0.3s, color 0.3s;
}

.nav-menu a:hover {
    background-color: #4a90e2;
    color: white;
}

ステップ2：ブラウザで確認

ファイルを保存して、ブラウザを更新してください。

ホバー効果を試してみよう

マウスをメニュー項目に乗せてみる
背景色が変わることを確認
スムーズなアニメーション効果

表示結果（ホバー時）

ホバー効果の仕組み

:hover: マウスが要素の上にある時の状態
transition: 変化をスムーズにする
background-color: 背景色の変更

体験4：ナビゲーションを完成させよう

ステップ1：より洗練されたデザインに

styles.cssファイルのナビゲーション部分を以下のように変更してください。

/* ナビゲーション */
.navigation {
    background: linear-gradient(135deg, #2c5aa0 0%, #4a90e2 100%);
    padding: 20px 0;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
}

.nav-menu a:hover {
    background-color: rgba(255,255,255,0.2);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.nav-menu a:active {
    transform: translateY(0);
}

ステップ2：ブラウザで確認

ファイルを保存して、ブラウザを更新してください。

表示結果

完成したナビゲーション

グラデーション背景
丸みを帯びたボタン
ホバー時の浮き上がり効果
影効果で立体感を演出

新しく使ったプロパティ

linear-gradient: グラデーション背景
box-shadow: 影効果
transform: translateY(): 上下移動
border-radius: 25px: 丸みを帯びた角
:active: クリック時の状態

実践課題

課題1：ナビゲーションをカスタマイズしよう

色を自分の好きな色に変更
メニュー項目を追加・変更
ホバー効果をオリジナルに
フォントを変更

課題2：ドロップダウンメニューを作ってみよう

サブメニューを追加
ホバーでサブメニューを表示
アニメーション効果を追加

ヒントになりそうな記事

【コピペOK】ドロップダウンメニュー表示アニメーション｜7種類【Web制作】ドロップダウンメニューの表示アニメーションを実装したい…… ユーザビリティを向上させるメニューアニメーションを作りたい…… 今回はこのようなお悩みをお持ちの方へ向…

課題の解答例

/* カスタマイズ例：緑系のテーマ */
.navigation {
    background: linear-gradient(135deg, #2d5016 0%, #4a7c59 100%);
    padding: 20px 0;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-weight: 500;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.nav-menu a:hover {
    background-color: rgba(255,255,255,0.2);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}