CSS を使用して Navbar を中央に配置する

1. HTML のナビゲーションバー
2. HTML と CSS を使用してナビゲーション バーを作成する
3. CSS を使用したナビゲーション バーの中央揃え

この記事では、Web サイトの重要なコンポーネントであるナビゲーション バーのさまざまな位置について説明します。 また、その目的とさまざまな配置設定についても学びます。

HTML のナビゲーションバー

GUI には、ユーザーの情報アクセスを容易にするナビゲーション システムまたはバーが含まれています。 Web ページのユーザー インターフェイス (UI) コンポーネントには、他の Web サイト セクションへのリンクが含まれており、ナビゲーション バーまたはナビゲーション バーと呼ばれます。

ナビゲーション バーは、多くの場合、リンクの水平方向のリストとしてページの上部に表示されます。 ヘッダーの上または下に配置できますが、常にページのメイン コンテンツの前に配置する必要があります。

Web サイトのナビゲーションは、使いやすくなければなりません。 訪問者が任意のセクションにすばやくアクセスできるため、Web サイトに大きな影響を与えます。

Web サイトのナビゲーション バーには、次の 2つの異なるスタイルがあります。

1. 水平ナビゲーション バー
2. 垂直ナビゲーション バー

HTML と CSS を使用してナビゲーション バーを作成する

最初に、HTML コンポーネントを使用してナビゲーション バーを作成する方法を確認します。 ナビゲーション バーはさまざまなリンクの単なるリストであるため、リスト要素、つまり <ul> と <li> を使用してナビゲーション バーを作成します。

リスト内のすべての項目は、別の Web サイト ページへのリンクです。 したがって、リストは次のように作成されます。

コード例:

<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>

li::marker {
    content: '';
}

これは単純な <ul> 要素であるため、ナビゲーション バーとして機能させるには、さまざまな CSS プロパティを適用する必要があります。

<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}

li a {
  display: block;
  padding: 9px;
  background-color: dark blue;
}
</style>

li::marker {
    content: '';
}

<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>

この例では、さまざまな CSS プロパティがさまざまな目的を伝えています。

1. list-style-type を none に設定して、ナビゲーション バーの箇条書きマーカーを削除します。
2. margin と padding は、デフォルトでブラウザの余白を削除するためにゼロに設定されています。
3. overflow プロパティは hidden 値に設定され、li 要素がリストの外に移動するのを制限します。
4. float は left 値に設定され、水平方向のナビゲーション バーを作成します。
5. <li> 項目については、display: block を使用してブロック位置にハイパーリンクを作成し、ブロック全体をクリック可能にします。

background-color や text の色など、さまざまなスタイルとフォーマットをこの navbar に適用できます。

CSS を使用したナビゲーション バーの中央揃え

ページの中央にナビゲーション バーを配置するには、次のように 2つのプロパティを追加します。1つは div 要素に、もう 1つは <ul> 要素に追加します。

div{
text-align: center;
}
ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

<div>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="admission.php">Admissions</a></li>
    </ul>
</div>

テキストを中央に揃えるdivを作成し、inline-blockを表示するul要素を作成しました。 これにより、要素のリストがページの中央に移動します。

2つのプロパティを割り当てるだけで、ページの中央にナビゲーション バーを作成したことがわかります。 設計要件に従って、ナビゲーション バーを装飾できる複数のプロパティを適用することもできます。