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

CSSでナビゲーションバーの周囲に境界線を設定する方法

ナビゲーションバーの周囲に境界線（ボーダー）を追加したい場合は、<ul> 要素に対して border プロパティを設定します。これにより、リスト全体を囲む枠線が表示され、ナビゲーションメニューに視覚的なまとまりが生まれます。

ul {
    border: 2px solid blue;
}

この例では、太さ2px・実線・青色の境界線が <ul> の周囲に描画されます。

サンプルコード

以下のコードを実行すると、ナビゲーションバーに境界線を設定した実際の表示を確認できます。

<!DOCTYPE html>
<html>
    <head>
        <style>
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                width: 200px;
                border: 2px solid blue;
            }
            li a {
                display: block;
                background-color: #F0E7E7;
            }
            .active {
                background-color: #4CAF50;
                color: white;
            }
            li {
                text-align: center;
                border-bottom: 1px solid #555;
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href = "#home">Home</a></li>
            <li><a href = "#company" class = "active">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>

コードのポイント解説

1. リストの初期化

list-style-type: none; を指定することで、デフォルトで表示される箇条書きのマーカーを非表示にしています。また、margin: 0; と padding: 0; を設定することで、ブラウザ標準の余白を取り除き、レイアウトを整えています。

2. 境界線の設定

border: 2px solid blue; は「太さ2px」「実線」「青色」という意味です。solid の部分を dashed（破線）や dotted（点線）に変更することで、さまざまなスタイルの枠線を簡単に作成できます。

3. 各項目の仕切り線

li 要素に border-bottom: 1px solid #555; を設定することで、各メニュー項目の下に薄い仕切り線が引かれ、縦型ナビゲーションとして見やすくなります。最後の項目だけ仕切り線を消したい場合は、li:last-child { border-bottom: none; } を追加するとより洗練された見た目になります。

4. アクティブ状態の強調

.active クラスを持つリンクには緑色の背景と白い文字が適用され、現在閲覧中のページであることをユーザーに伝えます。

まとめ

ナビゲーションバーに境界線を追加するのは非常にシンプルで、<ul> に border プロパティを設定するだけです。線の種類・太さ・色を組み合わせることで、サイトのデザインに合わせた多彩なメニュー表現が可能になります。

  1. CSSで左上の角を丸くする方法｜border-top-left-radiusの使い方

    要素の左上の角だけを丸くしたい場合は、CSSの border-top-left-radius プロパティを使用します。このプロパティを使うことで、要素全体の角ではなく、左上のコーナーのみに個別の角丸を適用できます。以下は、border-top-left-radius プロパティを使って左上の角を丸くする具体的なコード例です。実際にブラウザで実行して、表示結果を確認してみてください。コード例<html>    <head>       <style>         &n

  2. CSSで右上の角丸を設定する方法｜border-top-right-radiusの使い方

    CSSで要素の右上の角だけを丸くしたい場合は、border-top-right-radiusプロパティを使用します。このプロパティを指定すると、右上隅のみに丸みを帯びた境界線を設定でき、ボックス全体のデザインに柔らかさやアクセントを加えることができます。border-top-right-radiusの基本border-top-right-radiusには、px・em・%などの単位で値を指定します。値が大きいほど角の丸みが大きくなり、0を指定すると直角に戻ります。サンプルコード以下のコードは、border-top-right-radiusプロパティを使って右上の角だけを大きく丸める実装例です。&