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

CSSでレスポンシブ対応のサイドナビゲーションメニューを作成する方法

CSSだけでも、画面幅に応じて縦型・横型に自動的に切り替わるレスポンシブなサイドナビゲーションメニューを実装できます。ここでは、position: fixed; による固定サイドバーと、メディアクエリを使った切り替え処理を組み合わせた基本的な実装例をご紹介します。

実装例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
   margin: 0;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
nav {
   margin: 0;
   padding: 0;
   width: 150px;
   background-color: #2f77e4;
   position: fixed;
   height: 100%;
   overflow: auto;
}
nav a {
   display: block;
   color: rgb(255, 255, 255);
   font-weight: bolder;
   font-size: 20px;
   padding: 16px;
   text-decoration: none;
}
nav a.selected {
   background-color: rgb(15, 189, 20);
   color: rgb(255, 255, 255);
}
nav a:hover:not(.selected) {
   background-color: white;
   color: #2f77e4;
}
div.content {
   margin-left: 200px;
   padding: 1px 16px;
   height: 1000px;
}
@media screen and (max-width: 700px) {
nav {
   width: 100%;
   height: auto;
   position: relative;
}
nav a {float: left;}
div.content {margin-left: 0;}
}
</style>
</head>
<body>
<nav class="sideBar">
<a class="selected" href="#">Home</a>
<a href="#">Login</a>
<a href="#">Register</a>
<a href="#">Message Us</a>
<a href="#">Contact Us</a>
</nav>
<div class="content">
<h1>Sample Text</h1>
<h2>ブラウザの幅を700pxに変更すると、縦型ナビゲーションバーが横型に切り替わります</h2>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のように画面左側に固定された縦型のナビゲーションメニューが表示されます。

CSSでレスポンシブ対応のサイドナビゲーションメニューを作成する方法

ウィンドウ幅を700px以下にリサイズすると、ナビゲーションは次のように横並びのメニューへと変化します。

CSSでレスポンシブ対応のサイドナビゲーションメニューを作成する方法

実装のポイント

  • position: fixed; — ナビゲーションを画面左端に固定し、ページをスクロールしても常に表示されるようにしています。
  • display: block; — リンク要素をブロック化することで、クリック可能な範囲が項目全体に広がり、操作性が向上します。
  • :hover:not(.selected) — 現在選択中の項目（.selected）以外にマウスカーソルを合わせたときだけ、背景色と文字色が反転するように制御しています。
  • @media screen and (max-width: 700px) — メディアクエリにより、画面幅が700px以下になるとナビゲーションが相対配置に切り替わり、float: left; によってリンクが横並びになります。
  • margin-left: 0; — 横並び時にはコンテンツ領域の左余白を解除し、本文が画面全体を活用できるようにしています。

このように、CSSのメディアクエリを活用するだけでJavaScript不要のレスポンシブナビゲーションが実現できます。閾値となる700pxの数値や配色は、サイトのデザインに合わせて自由に調整してください。

  1. 【CSS】レスポンシブタイポグラフィの作り方をわかりやすく解説

    レスポンシブタイポグラフィとは レスポンシブタイポグラフィとは、画面サイズ（ビューポート）の大きさに応じて文字のサイズが自動的に調整されるテキスト表示のことです。CSSでは、ビューポート単位である vw（viewport width） を使うことで、メディアクエリを書かなくても簡単に実現できます。 「1vw」はビューポート幅の1%を表します。たとえば画面幅が1000pxの場合、1vwは10pxになります。この単位をフォントサイズに指定すれば、画面幅に連動して文字が拡大・縮小されるため、スマートフォンからデスクトップまで一つのスタイルで対応可能です。 実装コード例 以下のコードでは、h1 要素

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

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