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

CSSで下線付き（ボーダー下部）ナビゲーションリンクを作成する方法

CSSを使えば、ナビゲーションリンクの下に罫線（下線）を表示するデザインを簡単に実装できます。マウスホバー時に下線を表示したり、現在閲覧中のページに常時下線を付けたりすることで、ユーザーにとって直感的に操作できるナビゲーションメニューを作成できます。

以下は、border-bottomプロパティを使用して、下枠（下線）付きのナビゲーションリンクを作成するコード例です。

コード例

<!DOCTYPE html>
<html lang="en">
<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:60px;
    padding: 0px;
}
nav{
    position: fixed;
    top:0;
    width: 100%;
    background-color: rgb(251, 255, 196);
    overflow: auto;
    height: auto;
}
.links {
    display: inline-block;
    text-align: center;
    padding: 14px;
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-size: 17px;
    font-weight: bolder;
}
.links:hover {
    border-bottom: 2px solid purple;
}
.selected{
    border-bottom: 2px solid purple;
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#"> Home</a>
<a class="links" href="#"> Login</a>
<a class="links" href="#">Register</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">More Info</a>
</nav>
<h1>Hover on the above links</h1>
</body>
</html>

実行結果

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

CSSで下線付き（ボーダー下部）ナビゲーションリンクを作成する方法

コードのポイント解説

  • nav要素：position: fixedとtop: 0を指定することで、ナビゲーションバーを画面上部に固定表示しています。スクロールしてもメニューが常に見えるため、ユーザビリティが向上します。
  • .linksクラス：display: inline-blockによりリンクを横一列に並べ、padding: 14pxでクリックしやすい余白を確保しています。また、text-decoration: noneでデフォルトの下線を消しています。
  • :hover疑似クラス：マウスカーソルをリンクに重ねたときにborder-bottom: 2px solid purpleが適用され、紫の下線が表示されます。これにより、どのリンクにフォーカスしているかが視覚的に分かります。
  • .selectedクラス：現在表示中のページに対応するリンクへ常時下線を付けるためのクラスです。Homeリンクに適用されており、ユーザーが自分の現在地を把握しやすくなります。

このように、border-bottomと:hoverを組み合わせるだけで、シンプルながら視認性の高いナビゲーションメニューを実現できます。色や太さを変更すれば、サイトのデザインに合わせたカスタマイズも自由に行えます。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!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プロパティの基本構文は次のとおりです。セレクタ {