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

CSSで垂直メニュー（縦型ナビゲーション）を作成する方法

Webサイトのサイドバーなどでよく使われる垂直メニュー（縦型ナビゲーション）は、CSSを使えば簡単に作成できます。ポイントは、リンク要素に display: block; を指定して各リンクを縦に積み重ねることです。さらに :hover 疑似クラスでマウスオーバー時の色変化を加えると、使いやすく見栄えの良いメニューになります。

実装のポイント

  • メニュー全体を囲むコンテナに幅（width）を設定する
  • リンクに display: block; を指定し、ブロックレベルとして縦方向に並べる
  • padding でクリックしやすい余白を確保する
  • text-decoration: none; で下線を消す
  • :hover でホバー時の背景色・文字色を変更する
  • 現在表示中のページには .selected クラスなどを付けて強調表示する

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<style>
.Menu {
    width: 200px;
}
.links {
    background-color: rgb(251, 255, 188);
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
}
.links:hover {
    background-color: rgb(85, 85, 85);
    color: white;
}
.links.selected {
    background-color: rgb(0, 0, 0);
    color: white;
}
</style>
</head>
<body>
<div class="Menu">
<a href="#" class="links selected">会社概要</a>
<a class="links" href="#">SNSリンク</a>
<a class="links" href="#">アクセス</a>
<a class="links" href="#">詳細情報</a>
<a class="links" href="#">お問い合わせ電話番号</a>
</div>
</body>
</html>

コードの解説

1. メニューコンテナの設定

.Menu クラスでメニュー全体の幅を 200px に固定しています。これにより、各リンクがこの幅いっぱいに広がるブロック要素となります。

2. リンクの基本スタイル

.links クラスでは、display: block; を指定することでインライン要素である <a> タグがブロック化され、自動的に縦方向へ積み重ねられます。淡い黄色の背景色と12pxのパディングにより、視認性とクリック領域を確保しています。

3. ホバー効果

.links:hover により、マウスカーソルを合わせると背景がダークグレー、文字が白に変化します。ユーザーがどの項目を選ぼうとしているか直感的に把握できるようになります。

4. 選択中ページの強調

.selected クラスが付いたリンクは黒背景・白文字で表示され、現在閲覧中のページであることを示せます。実際のサイトでは、PHPやJavaScriptで動的にこのクラスを付与するのが一般的です。

出力結果

上記のコードを実行すると、左端に縦に並んだ5つのリンクからなる垂直メニューが表示されます。マウスを項目に乗せると色が変わり、「会社概要」は選択状態として黒く強調されます。

この手法はシンプルながら応用範囲が広く、border-bottom を追加して区切り線を入れたり、transition プロパティでホバー時の変化を滑らかにしたりといったカスタマイズも容易です。ぜひ自分のサイトに合わせてアレンジしてみてください。

  1. CSSで垂直線（縦線）を作成する方法を解説！初心者向けにわかりやすく紹介

    CSSで垂直線（縦線）を作成したい場合、最もシンプルで一般的な方法は border-left プロパティを使うことです。要素の左側に境界線を表示し、height で高さを指定するだけで、自由な長さの垂直線を簡単に描画できます。 それでは、実際のコード例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>

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

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