CSS リストスタイリング：水平ナビゲーションバーの作成

はじめに

この実験 (lab) では、標準のスタイル設定がされていない HTML リストを、CSS を使用して視覚的に魅力的な水平ナビゲーションメニューに変身させる方法を学びます。デフォルトでは、HTML リスト (<ul>) は箇条書きで縦方向に表示されます。ここでは、いくつかの基本的な CSS プロパティを使用して、デフォルトのスタイルを削除し、クリーンでモダンなナビゲーションバーを作成します。

以下の CSS プロパティの使用方法を学びます。

list-style-type
padding
display
background-color
margin

この実験 (lab) の終わりには、メニュー、アイテムリストなどの作成において、リストのスタイル設定方法についての確かな理解が得られるでしょう。

ul 要素に list-style-type none を設定する

このステップでは、まず順序なしリストからデフォルトの箇条書きを削除します。CSS の list-style-type プロパティは、リストアイテムマーカーの外観を制御するために使用されます。

まず、WebIDE の左側にあるファイルエクスプローラーで styles.css ファイルを見つけて開きます。このファイルは現在空です。

次に、styles.css に以下の CSS ルールを追加します。このルールは <ul> 要素をターゲットにし、その list-style-type を none に設定して、箇条書きを非表示にします。

ul {
  list-style-type: none;
}

コードを追加した後、styles.css ファイルを保存します。結果を確認するには、LabEx インターフェースの上部にある「Web 8080」タブをクリックしてください。箇条書きのないアイテムのリストが表示されるはずです。

ul tag

デフォルトのインデントを削除するために padding 0 を適用する

このステップでは、ブラウザが順序なしリストに自動的に適用するデフォルトのインデントを削除します。このインデントは実際には <ul> 要素の左側にある padding です。

これを削除するために、styles.css ファイル内の既存の ul ルールを更新します。ルールに padding: 0; プロパティを追加します。これにより、要素のすべての辺のパディングがゼロに設定され、左側のインデントが効果的に削除されます。

styles.css ファイルを以下のように更新してください。

ul {
  list-style-type: none;
  padding: 0;
}

ファイルを保存し、「Web 8080」タブに切り替えて変更をプレビューしてください。リストがコンテナの左端に揃っていることに気づくでしょう。

水平リストのために display inline-block を使用する

このステップでは、リストアイテムのレイアウトを縦から横に変更します。デフォルトでは、リストアイテム (<li>) はブロックレベル要素であり、それぞれが利用可能な全幅を占め、新しい行から開始します。

それらを横に並べるには、display プロパティを変更します。ここでは inline-block 値を使用します。これにより、要素はインライン要素のように隣り合って配置されますが、width、height、padding のようなブロックレベルのプロパティを保持できます。

styles.css ファイルに li 要素の新しい CSS ルールを追加します。

li {
  display: inline-block;
}

これで、styles.css ファイル全体は以下のようになります。

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
}

ファイルを保存し、「Web 8080」タブを確認してください。リストアイテムは、単一の水平線上に配置されているはずです。

li tag

li 要素に background-color を追加する

このステップでは、リストアイテムに視覚的なスタイルを追加して、ナビゲーションボタンのように見せます。背景色と内部パディングを追加します。

background-color プロパティは要素の背景色を設定し、padding プロパティは要素の境界の内側にスペースを追加します。

styles.css の既存の li ルールを変更して、これらの新しいプロパティを含めます。

li {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 8px 16px;
}

ここで、background-color: #f2f2f2; は薄い灰色の背景を設定します。padding: 8px 16px; は、各リストアイテム内のテキストの上部と下部に 8 ピクセル、左側と右側に 16 ピクセルのパディングを追加します。

ファイルを保存し、「Web 8080」タブを更新してください。各リストアイテムに灰色の背景とテキストの周りにスペースが表示され、個別のボタンのように見えるようになります。

li tag

li アイテム間に margin を実装する

この最後のスタイリングステップでは、リストアイテムが触れ合わないように、アイテム間にスペースを追加します。margin プロパティは、要素の境界の外側にスペースを作成するために使用されます。

アイテム間のみにスペースを追加するには、各リストアイテムの右側に margin-right プロパティを使用してマージンを適用できます。

styles.css ファイルの li ルールを最後に更新します。

li {
  display: inline-block;
  background-color: #f2f2f2;
  padding: 8px 16px;
  margin-right: 5px;
}

これにより、各リストアイテムの右側に 5 ピクセルのマージンが追加され、互いに分離されます。最後のアイテムにもマージンが適用されますが、隣接する要素がないため表示されません。

ファイルを保存し、「Web 8080」タブを表示してください。水平ナビゲーションメニューが完成し、各ボタン間に適切なスペースが配置されました。

まとめ

おめでとうございます！CSS リストのスタイリングに関するこの実験を無事に完了しました。

標準的な垂直 HTML リストから始め、それをスタイル化された水平ナビゲーションメニューに変換しました。その過程で、いくつかの重要な CSS プロパティを学び、適用しました。

list-style-type: デフォルトのリストマーカーを削除します。
padding: デフォルトのリストインデントを削除します。
display: inline-block: リストアイテムを水平に配置します。
background-color および padding: アイテムをボタンとしてスタイル設定します。
margin-right: アイテム間にスペースを作成します。

これらのテクニックは、現代のウェブサイトでナビゲーションバーやその他のリストベースのコンポーネントを構築するための基本となります。