第5章 リスト要素でメニューを作る
| リスト項目を横に並べる
|
いま作成を進めているサンプルサイトでは、下図のように最終的にはメインメニューを水平に並べるスタイルにする予定です。
そこで、リスト項目を横に並べるために、li要素をインライン表示に変更します。
li要素の表示形式は、初期値ではリスト項目が改行されて縦に並べて配置されるリストアイテム表示となっています。 これを横に並ぶようにli要素をインライン表示に変更します。 要素の表示形式を変更するには、CSSのdisplayプロパティを使用します。
base.cssに以下の記述を追加してください。
CSSソース（base.css）@charset "utf-8";
body {
font-size:95%; /* フォントサイズを95%にする */
font-family: "ＭＳ ゴシック",sans-serif; /* フォントの種類をゴシック系にする */
line-height:1.5; /* 行の高さを1.5倍にする */
color:#333333; /* 文字色を濃い目のグレーにする */
}
li {
list-style-type:none; /*リストマーカー無しにする*/
}保存をしたらブラウザで表示してみましょう。リストマーカーが消えていれば成功です。
▶︎ 変更前を確認する
|
| 要素の表示スタイルは、displayプロパティで変更できる
|
i {display:inline;} は、「li要素をインライン表示にしなさい」という意味です。 li要素の表示スタイルは、初期値ではdisplay:list-item; というリストアイテム表示になっています。
これを、display:inline; と指定することで、インライン表示に変更しました。 この指定によって、リスト項目がインライン表示となって一行に収まるようになったのです。
メインメニュー部分のスタイリングについては、さらに制作を進めた段階で指定するa要素の表示スタイルとの関連で、最終的なスタイリングを確定させることになります。 現時点では、リストアイテム表示だったli要素をインライン表示に変えたことで、一行に収まるようになったということを理解していただければOKです。
|
まとめ
- 要素の表示形式は、displayプロパティで指定する
- li {display:inline;} は、「li要素をインライン表示にしなさい」という意味
- li要素をインライン表示に変更すると、リスト項目が横に並ぶ
