CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSメディアクエリを使ったレスポンシブナビゲーションメニューの作成方法

CSSメディアクエリとは

メディアクエリ(Media Queries)は、デスクトップ、タブレット、スマートフォンなど、画面サイズの異なるさまざまなデバイスに応じてスタイルを切り替えるためのCSS機能です。これを活用することで、1つのHTMLコードから複数のデバイスに最適化されたレスポンシブデザインを実現できます。

本記事では、メディアクエリを使用して、画面幅に応じてレイアウトが変化するレスポンシブなナビゲーションメニューの作成方法を解説します。

レスポンシブナビゲーションメニューの実装例

以下のコードでは、通常は横並び(左寄せ)で表示されるナビゲーションリンクが、画面幅600px以下になると縦積み(全幅表示)に切り替わる仕組みを実装しています。

サンプルコード

<!DOCTYPE html>
<html lang = "ja">
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <style>
         .demo {
            overflow: hidden;
            background-color: blue;
         }
         .demo a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 10px;
            text-decoration: none;
         }
         @media screen and (max-width: 600px) {
            .demo a {
               float: none;
               width: 100%;
            }
         }
      </style>
   </head>
   <body>
      <p>ナビゲーションメニュー:</p>
      <div class = "demo">
         <a href = "#">ホーム</a>
         <a href = "#">会社概要</a>
         <a href = "#">チュートリアル</a>
         <a href = "#">Q&amp;A</a>
         <a href = "#">動画</a>
         <a href = "#">お問い合わせ</a>
      </div>
   </body>
</html>

コードのポイント解説

1. ビューポートの設定

<meta name="viewport"> タグは、モバイルデバイスでページが正しく表示されるために必須です。「width=device-width」により、画面幅に合わせたレンダリングが行われます。

2. 基本スタイルの定義

.demo クラスには背景色(blue)と overflow: hidden を設定し、float による回り込みを解除しています。各リンク(.demo a)は float: left と display: block を組み合わせることで、横並びのメニューとして表示されます。

3. メディアクエリによる切り替え

@media screen and (max-width: 600px) のブロック内では、画面幅が600px以下の場合に適用されるスタイルを定義しています。ここでは float: none を指定して横並びを解除し、width: 100% を設定することで、各リンクが画面いっぱいの縦積みメニューに変化します。

まとめ

このように、メディアクエリを使えば数行のCSSを追加するだけで、デバイスの画面サイズに応じた柔軟なナビゲーションメニューを作成できます。ブレークポイント(600pxなど)の値は、サイトのデザインやターゲットデバイスに合わせて調整するとよいでしょう。

  1. CSSのメディアクエリを活用したレスポンシブWebデザインの基本と実装例

    メディアクエリとは メディアクエリ(Media Queries)は、CSSで提供される技術の一つで、スマートフォン、タブレット、デスクトップPCなど、デバイスの画面サイズに応じて異なるスタイルルールを適用できる仕組みです。 これにより、単一のHTMLファイルであらゆる画面幅に対応したレスポンシブWebデザインを実現できます。ブレークポイント(画面幅の境界値)ごとに条件を指定し、その条件が一致した場合のみCSSが適用されるのが特徴です。 主な構文のポイント @media only screen and (max-width: 600px) … 幅600px以下の画面に適用 @media onl

  2. CSSで作るレスポンシブ対応のお客様の声（テスティモニアル）セクションの実装方法

    Webサイトに掲載する「お客様の声（テスティモニアル）」は、信頼性を高めるための重要な要素です。CSSを活用すれば、デスクトップでもスマートフォンでも見やすい、レスポンシブなデザインを簡単に実現できます。 この記事では、メディアクエリとfloatを使って、画面幅に応じてレイアウトが自動的に切り替わるテスティモニアルカードの作り方を解説します。 実装のポイント 基本レイアウト： プロフィール画像を float: left; で左に回り込みさせ、名前とコメントを右側に配置します。 円形画像： border-radius: 50%; を指定することで、画像を丸く表示できます。 float の解除：