★リスト項目を横に並べる

リスト項目を横に並べる

いま作成を進めているサンプルサイトでは、下図のように最終的にはメインメニューを水平に並べるスタイルにする予定です。

完成したサンプルサイトを確認する

そこで、リスト項目を横に並べるために、li要素をインライン表示に変更します。

li要素の表示形式は、初期値ではリスト項目が改行されて縦に並べて配置されるリストアイテム表示となっています。
これを横に並ぶようにli要素をインライン表示に変更します。
要素の表示形式を変更するには、CSSのdisplayプロパティを使用します。

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:inline;			/*リスト項目をインライン表示にする*/
}

保存をしたらブラウザで表示してみましょう。
リスト項目が横に並んでいれば成功です。

変更前を確認する

要素の表示スタイルは、displayプロパティで変更できる

li {display:inline;} は、「li要素をインライン表示にしなさい」という意味です。
li要素の表示スタイルは、初期値ではdisplay:list-item; というリストアイテム表示になっています。

これを、display:inline; と指定することで、インライン表示に変更しました。
この指定によって、リスト項目がインライン表示となって一行に収まるようになったのです。

メインメニュー部分のスタイリングについては、さらに制作を進めた段階で指定するa要素の表示スタイルとの関連で、最終的なスタイリングを確定させることになります。
現時点では、リストアイテム表示だったli要素をインライン表示に変えたことで、一行に収まるようになったということを理解していただければOKです。