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

CSSでレスポンシブヘッダーを作成する方法【サンプルコード付きで解説】

CSSを使えば、画面幅に応じてレイアウトが自動的に切り替わるレスポンシブなヘッダー（ナビゲーションバー）を簡単に作成できます。
ポイントはメディアクエリ（@media）とfloatの組み合わせです。デスクトップでは横並びのメニューを表示し、画面が狭くなると縦並びに切り替えることで、スマートフォンやタブレットでも快適に操作できるナビゲーションを実現できます。

サンプルコード

以下は、CSSでレスポンシブヘッダーを作成する具体的なコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
nav {
    overflow: hidden;
    background-color: #330b7c;
    padding: 10px;
}
.links {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    float: left;
    color:white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 4px;
}
nav .logo {
    font-size: 25px;
    font-weight: bold;
}
nav .links:hover {
    background-color: rgb(214, 238, 77);
    color: rgb(42, 10, 94);
}
nav .selected {
    background-color: dodgerblue;
    color: white;
}
.rightSection {
    float: right;
}
@media screen and (max-width: 870px) {
    nav .links {
        float: none;
        display: block;
        text-align: left;
    }
    .rightSection {
        float: none;
    }
}
</style>
</head>
<body>
<nav>
<a class="links logo" href="#">Company Logo/Image</a>
<div class="rightSection">
<a class="selected links" href="#">Home</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">About Us</a>
<a class="links" href="#">More Info</a>
<a class="links" href="#">Register</a>
</div>
</nav>
</body>
</html>

コードのポイント

  • viewportの設定： <meta name="viewport"> を指定することで、モバイル端末でも正しく表示されます。
  • floatによる横並び配置： .links クラスに float: left; を指定し、ロゴとメニューを横一列に配置しています。
  • メディアクエリ： 画面幅が870px以下になると、float: none; と display: block; により、メニューが縦積みのレイアウトへと切り替わります。
  • ホバー・選択状態のスタイル： :hover 擬似クラスと .selected クラスで、現在のページやマウスオーバー時の視覚的フィードバックを提供しています。

出力結果

上記のコードを実行すると、次のようなヘッダーが表示されます。

CSSでレスポンシブヘッダーを作成する方法【サンプルコード付きで解説】

画面を縮小した場合

ブラウザのウィンドウ幅を狭めると、ナビゲーションメニューは以下のように縦並びのレイアウトへ自動的に切り替わります。

CSSでレスポンシブヘッダーを作成する方法【サンプルコード付きで解説】

このように、メディアクエリを活用することで、1つのHTMLファイルでデスクトップにもモバイルにも対応したヘッダーを作成できます。ぜひ実際にコードを書いて、画面幅を変えながら動作を確認してみてください。

  1. CSSでレスポンシブなブログレイアウトを作成する方法【完全なコード例付き】

    CSSを使ってレスポンシブなブログレイアウトを作成するには、viewportメタタグの設定と、デバイスの画面幅に応じて柔軟に調整されるレイアウト構造の定義がポイントになります。以下に、ナビゲーションバー・ブログ本文・サイドリンク・フッターを備えた、ブログサイトの完全なコード例を紹介します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <

  2. CSSでレスポンシブなカラムカードを作成する方法【コード例付きで解説】

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブなカラムカードを簡単に作成できます。本記事では、floatとcalc()、そしてメディアクエリを組み合わせた基本的な実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 レスポンシブカラムカードの仕組み この手法のポイントは、主に以下の3つです。 calc(25% - 20px)：4枚のカードを横並びにするため、各カードの幅を「全体の25%からマージン分を引いた値」として計算しています。 float: left：カードを左に回り込ませることで、横一列に並べています。 @mediaクエリ：画面幅が