ホーム > ブログ > css > 初心者でも簡単！SVGアイコンを使ったナビゲーションバーの作成ガイド

初心者でも簡単！SVGアイコンを使ったナビゲーションバーの作成ガイド

1. HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVGアイコンナビゲーション</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <ul>
            <li><a href="#" class="nav-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M12 3V13H3V3h9zm0 18v-9h9v9h-9z" fill="#FF5733"/>
                </svg>
                ホーム
            </a></li>
            <li><a href="#" class="nav-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M3 3h18v18H3z" fill="#33FF57"/>
                </svg>
                サービス
            </a></li>
            <li><a href="#" class="nav-item">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <circle cx="12" cy="12" r="10" fill="#3357FF"/>
                </svg>
                お問い合わせ
            </a></li>
        </ul>
    </nav>
</body>
</html>

2. CSSコード

/* style.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.navbar {
    background-color: #2c3e50;
    padding: 10px 0;
}

.navbar ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar li {
    margin: 0 15px;
}

.navbar a {
    text-decoration: none;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
}

.navbar svg {
    margin-bottom: 5px;
    transition: fill 0.3s ease;
}

.navbar a:hover svg {
    fill: #f39c12; /* アイコンのホバー時の色 */
}

.navbar a:hover {
    color: #f39c12; /* テキストのホバー時の色 */
}

3. 解説

HTML部分
- ナビゲーションバーは<nav>タグ内に作成し、リストで各リンクを配置しています。
- 各リンク内にSVGアイコンを挿入し、アイコンの色はfill属性で指定しています（例: #FF5733、#33FF57、#3357FF）。
CSS部分
- ナビゲーションバーはbackground-colorで背景色を設定し、アイテムを横並びにするためにdisplay: flexを使っています。
- アイコンにホバー効果を加え、マウスをアイコンに合わせたときに色が変わるようにしています。
- アイコンとテキストの間に適度なスペースを空けるために、アイコンの下にmargin-bottomを加えています。

4. 色変更

SVGアイコンの色: 各アイコンに異なる色を設定しました。
- ホームアイコン (#FF5733)、サービスアイコン (#33FF57)、お問い合わせアイコン (#3357FF)。
ホバー時の色: アイコンのホバー時にfillを変更し、#f39c12という黄色に設定しています。テキストもホバー時に黄色に変更されます。

このコードを使って、実際に自分のサイトでナビゲーションバーを作成することができます。