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

CSSでナビゲーションバーにリンクの仕切り線を追加する方法

ナビゲーションバーにリンク同士の仕切り（区切り線）を追加するには、<li>要素に対してborder-rightプロパティを指定します。各リンク項目の右側に境界線が引かれ、メニュー項目が視覚的にきれいに区切られるようになります。

実装例

以下は、横並びのナビゲーションバーに白い仕切り線を追加したサンプルコードです。

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
  border-right: 1px solid white;
}
li a {
  display: block;
  padding: 8px;
  background-color: orange;
}
li:last-child {
  border-right: none;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

コードの解説

  • list-style-type: none; … ul要素のデフォルトの箇条書きマーカー（・）を非表示にします。
  • margin: 0; / padding: 0; … ブラウザ標準の余白をリセットし、レイアウトを整えやすくします。
  • float: left; … li要素を左から順に横並びに配置します。
  • border-right: 1px solid white; … 各項目の右側に幅1pxの白色の実線を引き、リンク間の仕切りとして機能させます。
  • display: block; / padding: 8px; … リンク全体をクリック可能なブロック領域にし、適度な余白を持たせます。
  • li:last-child { border-right: none; } … 最後の項目の右端には仕切り線が不要なため、:last-child疑似クラスで削除しています。

このように、border-rightプロパティと:last-child疑似クラスを組み合わせることで、シンプルで見やすいナビゲーションバーの仕切り線を簡単に実装できます。デザインに合わせて線の色や太さを変更すれば、さまざまなサイトのメニューに応用できます。

  1. CSSでさまざまな種類の区切り線（仕切り）を作成する方法

    CSSを使えば、破線・点線・実線など、デザインに合わせた多彩な区切り線（仕切り）を簡単に作成できます。ここでは、<hr>要素とborderプロパティを組み合わせて、5種類のスタイル違いの区切り線を実装する方法を紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1" /> <head> <style> body {

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

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