トップページ  > ウェブ制作チュートリアル  > リスト項目を横に並べる
第5章 リスト要素でメニューを作る

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

リスト項目を横に並べる

広告

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

完成したサンプルサイトのイメージ

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

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

base.cssに以下の記述を追加してください。

CSSソース(base.css)

@charset "utf-8";
body {
	font-size:95%;		/* フォントサイズを95%にする */
	font-family: "MS ゴシック",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です。

まとめ
  1. 要素の表示形式は、displayプロパティで指定する
  2. li {display:inline;} は、「li要素をインライン表示にしなさい」という意味
  3. li要素をインライン表示に変更すると、リスト項目が横に並ぶ
<前へ 目次へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ