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

CSSを使って垂直ナビゲーションバーを作成する方法

垂直ナビゲーションバーは、HTMLのリスト要素（<ul> と <li>）をベースに、CSSでスタイルを整えることで簡単に作成できます。以下のサンプルコードを実際に実行してみてください。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      li a {
        display: block;
        width: 70px;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href = "#home">Home</a></li>
      <li><a href = "#company">Company</a></li>
      <li><a href = "#product">Product</a></li>
      <li><a href = "#services">Services</a></li>
      <li><a href = "#contact">Contact</a></li>
    </ul>
  </body>
</html>

コードのポイント解説

  • list-style-type: none; … リスト先頭の「・」などのマーカーを非表示にし、ナビゲーションらしい見た目にします。
  • margin / padding のリセット … ブラウザ標準の余白を消すことで、意図しないずれを防ぎます。
  • display: block; … リンク（<a>）をブロック表示にすると、クリックできる範囲が項目全体に広がり、操作性が向上します。
  • width: 70px; … 各リンクの幅を固定することで、項目が縦にきれいに並びます。
  • background-color: orange; … 背景色を設定して、メニューであることがひと目でわかるようにします。

この基本形を応用すれば、ホバー時の色変更や角丸・影の追加など、より洗練された垂直ナビゲーションバーへと発展させることができます。

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

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

  2. CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

    CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {