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

CSSで水平スクロール可能なメニューを作成する方法

CSSで横方向にスクロールできるナビゲーションメニューを作るには？

Webサイトのナビゲーションメニューは、リンク数が多い場合やスマートフォンなど画面幅が狭いデバイスで閲覧される場合、すべての項目を表示しきれないことがあります。そんなとき便利なのが「水平スクロール可能なメニュー」です。

CSSを使えば、JavaScriptなどに頼ることなく簡単に実装できます。ポイントとなるのは、主に次の2つのプロパティです。

  • white-space: nowrap; … リンクのテキストが折り返されず、常に1行に並ぶようにします。
  • overflow: auto; … コンテンツがナビゲーションの幅からはみ出した場合に、横方向へ自動的にスクロールできるようにします。

以下は、CSSだけで水平スクロール可能なメニューを作成する具体的なコード例です。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
    margin:0px;
    margin-top:10px;
    padding: 0px;
}
nav{
    width: 100%;
    background-color: rgb(39, 39, 39);
    overflow: auto;
    height: auto;
    white-space: nowrap;
}
.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);
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#"> ホーム</a>
<a class="links" href="#"> ログイン</a>
<a class="links" href="#"> 新規登録</a>
<a class="links" href="#">お問い合わせ</a>
<a class="links" href="#">詳細情報</a>
<a class="links" href="#">SNSリンク</a>
<a class="links" href="#">アクセス</a>
</nav>
</body>
</html>

コードの解説

このコードの重要な部分を簡単に説明します。

  • nav 要素に対して overflow: auto; を指定することで、内容がはみ出したときにスクロールバーが表示されます。
  • white-space: nowrap; を指定することで、リンクが画面幅に合わせて折り返されることなく、横一列に並び続けます。
  • 各リンク（.links）は display: inline-block; を使って横並びに配置しています。
  • :hover 疑似クラスでマウスオーバー時の背景色を変え、.selected クラスで現在選択中のページを強調表示しています。

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSSで水平スクロール可能なメニューを作成する方法

ブラウザウィンドウの幅を狭めると、ナビゲーションメニューが折り返されず、横方向にスクロールできるようになります。

CSSで水平スクロール可能なメニューを作成する方法

まとめ

overflow: auto; と white-space: nowrap; の組み合わせにより、わずかなCSSだけで水平スクロール対応のナビゲーションメニューを実現できます。レスポンシブデザインにおいて、限られた画面幅でもすべてのメニュー項目へアクセスできるようにしたい場合に、ぜひ活用してみてください。

  1. CSSでチャットメッセージを作成する方法をわかりやすく解説

    CSSを使えば、LINEやMessengerのようなチャットメッセージ画面を簡単に作成できます。この記事では、プロフィール画像・吹き出し・タイムスタンプ付きのチャットUIを実装する方法を、実際のコード例とともに解説します。 コード例 以下は、CSSでチャットメッセージを作成するための完全なコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <s

  2. CSSだけで作る！レスポンシブ対応のセクションカウンターの実装方法

    CSSを使えば、JavaScriptに頼ることなく、ダウンロード数やパートナー数などの統計情報を視覚的にアピールする「セクションカウンター」を簡単に作成できます。ここでは、Font Awesomeのアイコンと組み合わせて、レスポンシブ対応のセクションカウンターを実装する方法を解説します。 実装コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <l