CSSでアイコン付きのレスポンシブナビゲーションメニューを作成する方法

Webサイトのナビゲーションメニューは、デスクトップからスマートフォンまで、あらゆる画面サイズに対応できることが重要です。本記事では、CSSのメディアクエリとFont Awesomeアイコンを組み合わせて、画面幅に応じてレイアウトが自動的に切り替わるレスポンシブナビゲーションメニューの作成方法を解説します。

実装のポイント

このナビゲーションメニューでは、以下の技術を使用しています。

Font Awesome：CDN経由で読み込み、各メニューリンクにホーム・ログイン・登録などのアイコンを表示します。
インラインブロック配置：通常時はリンクを横並びに表示します。
メディアクエリ（@media）：画面幅が600px以下になったときに、リンクを縦積み（display: block）に切り替えます。

コード例

以下が、アイコン付きレスポンシブナビゲーションメニューの完全なコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブナビゲーションメニュー</title>
<style>
body {
   margin: 0px;
   margin-top: 10px;
   padding: 0px;
}
nav {
   width: 100%;
   background-color: rgb(39, 39, 39);
   overflow: auto;
   height: auto;
}
.links {
   display: inline-block;
   text-align: center;
   padding: 14px;
   color: rgb(178, 137, 253);
   text-decoration: none;
   font-size: 17px;
}
.links:hover {
   background-color: rgb(100, 100, 100);
}
.selected {
   background-color: rgb(0, 18, 43);
}
@media screen and (max-width: 600px) {
   .links {
      display: block;
   }
}
</style>
</head>
<body>
<nav>
   <a class="links selected" href="#"><i class="fa fa-fw fa-home"></i> ホーム</a>
   <a class="links" href="#"><i class="fa fa-fw fa-user"></i> ログイン</a>
   <a class="links" href="#"><i class="fa fa-user-circle-o" aria-hidden="true"></i> 新規登録</a>
   <a class="links" href="#"><i class="fa fa-fw fa-envelope"></i> お問い合わせ</a>
   <a class="links" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i> 詳細情報</a>
</nav>
</body>
</html>

コードの解説

1. アイコンの読み込み

2. ナビゲーションの基本スタイル

nav要素には濃いグレーの背景色（rgb(39, 39, 39)）を設定し、overflow: autoでコンテンツのはみ出しを防いでいます。各リンク（.linksクラス）はinline-blockで横並びに配置され、紫がかった文字色と14pxのパディングでクリックしやすいデザインになっています。

3. ホバー効果と選択状態

.links:hoverではマウスオーバー時に背景色が明るくなり、.selectedクラスを付けたリンクは紺色の背景で現在のページを示します。このような視覚的フィードバックにより、ユーザーの操作性が向上します。

4. レスポンシブ対応

@media screen and (max-width: 600px)のメディアクエリが重要なポイントです。画面幅が600px以下のスマートフォンなどのデバイスでは、リンクがdisplay: blockに変更され、縦方向に積み重ねて表示されます。これにより、小さな画面でも各メニュー項目が押しやすくなります。

表示結果

上記のコードを実行すると、デスクトップ画面では以下のようにアイコン付きの横並びナビゲーションメニューが表示されます。

CSSでアイコン付きのレスポンシブナビゲーションメニューを作成する方法

画面幅を600px以下に縮小すると、メニューが自動的に縦積みレイアウトへ切り替わります。

CSSでアイコン付きのレスポンシブナビゲーションメニューを作成する方法

まとめ

CSSのメディアクエリを使えば、JavaScriptに頼らずとも画面サイズに応じたナビゲーションメニューの切り替えが簡単に実装できます。Font Awesomeのようなアイコンフォントを組み合わせれば、視認性が高く洗練されたメニューを作成できます。ぜひご自身のプロジェクトでも、色やパディング、ブレークポイントの数値を調整してカスタマイズしてみてください。

JavaScriptでリンクを絞り込む検索フィルターメニューの作成方法

CSSでカスタムチェックボックス＆ラジオボタンを作る方法をわかりやすく解説

HTMLとCSSでログインフォームを内蔵したレスポンシブナビゲーションメニューを作成する方法
Webサイトのナビゲーションバーにログインフォームを組み込みたいケースは多くあります。HTMLとCSSだけでも、画面幅に応じてレイアウトが自動的に切り替わるレスポンシブなナビゲーションメニューを作成できます。この記事では、ナビゲーションリンクとユーザー名・パスワード入力欄を1つのバーに配置し、画面が狭くなると縦積みレイアウトに変化する実装例を紹介します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=wi
入力フィールド付きのナビゲーションメニューを作成する方法【HTML/CSS】
Webサイトのナビゲーションバー（グローバルナビ）に検索ボックスのような入力フィールドを組み込むと、ユーザーはどのページにいてもすぐに目的のコンテンツを探せるようになり、サイト全体の使いやすさが大きく向上します。 HTMLとCSSを少し書き加えるだけで、ナビゲーションメニューの内部に入力フィールドを配置できます。ポイントは、CSSのfloat: right;を使って入力フィールドをナビゲーションバーの右側に寄せることです。それでは、具体的な実装方法を見ていきましょう。実装のポイント nav要素：幅を100%にして背景色を設定し、overflow: auto;を指定することで、子要素のフ