ﾘｽﾄ (display float) / css

横並びリスト（display:inline）

displayを使用した横並びのリスト(CSS)

display: inline;

　display は、全てのタグ（要素）に適用できます。

　display は、要素の表示形式を指定するプロパティです。このプロパティ（値 inline）を<li>タグ（要素）に設定すると、リスト項目を横並びで表示できます。

　li { display: inline; } li { display: inline; margin-right: 20px; }

プロパティ名	値	説　　明
display	inline	インラインで表示

＊項目の間隔を広げる場合は、同時に水平方向のマージンを設定します。

　★ 使用例とブラウザでの表示 (e3-1)スタイルシートの書き方（基本）は、こちらです。


設定例： ul.e3-1dsp li { display: inline; } ul.e3-1mar li { display: inline; margin: 0 5px; }

使　用　例		ブラウザの表示

<ul class=e3-1dsp> <li>リスト(標準)A</li><br> <li>リスト(標準)B</li><br> <li>リスト(標準)C</li> </ul>		リスト(標準)A リスト(標準)B リスト(標準)C ＊インラインにした場合、マーカーを表示しないので項目間の間隔が狭くなります。
<ul class=e3-1mar> <li>マージン1</li><br> <li>マージン2</li><br> <li>マージン3</li> </ul>		マージン1 マージン2 マージン3 ＊項目間の間隔は、「5px＋半角ｽﾍﾟｰｽ＋5px」になります。

☆ ul.e3-1dsp li は、e3-1dsp を指定した<ul>タグの子プロセスの<li>タグに適用させる記述方法です。 ☆ 単に .e3-1dsp とした場合は、リスト項目の全てに <li class=e3-1dsp> と記述することになります。 ☆ ul.e3-1mar li も ul.e3-1dsp li と同じ働きをします。

関連するページ

CSS スタイルシート

：表示形式（インライン・ブロック・リスト・非表示）を指定する

HTML タグページ

：マーカー付きリストを作る
HTML タグページ

：番号付きリストを作る

Utilety Page (参考)

：「ブロック要素とインライン要素」へ

横並びリスト（float）

floatを使用した横並びのリスト(CSS)

float: left;

　float は、全てのタグ（要素）に適用できます（positionプロパティで「absolute」または「fixed」が指定された要素を除く）。

　float は、フロート（浮動化）を指定するプロパティです。このプロパティを<li>タグ（要素）に設定すると、リスト項目を横並びで表示できます。

　li { float: left; width: 5em; margin-right: 5px; }
　li { float: right; width: 5em; margin-left: 5px; }

プロパティ名	値	説　　明
float	left	最初の項目を左に配置し、後続の項目を右側に回り込ませる
float	right	最初の項目を右に配置し、後続の項目を左側に回り込ませる

＊フロートの指定方法については、「ボックスのフロート（浮動化）を指定する」をご覧下さい。

　【回り込みの解除について】

＊ float で回り込みを指定した場合は、clearプロパティで回り込み（横並び）の解除を行って下さい。

フロートを指定した要素には、widthプロパティで幅を指定しておく必要があります。

　★ 使用例とブラウザでの表示 (e3-2)スタイルシートの書き方（基本）は、こちらです。


設定例： ul.e3-2le li { float: left; width: 6em; margin-right: 5px; } ul.e3-2ri li { float: right; width: 6em; margin-right: 5px; }

使　用　例		ブラウザの表示

<ul class=e3-2le> <li>左に配置A</li><br> <li>左に配置B</li><br> <li>左に配置C</li> </ul><br style="clear:both;">		左に配置A 左に配置B 左に配置C ＊ float:left; を指定した場合は記述順に表示します。
<ul class=e3-2ri> <li>右に配置1</li><br> <li>右に配置2</li><br> <li>右に配置3</li> </ul><br style="clear:both;">		右に配置1 右に配置2 右に配置3 ＊ float:right; を指定した場合は記述の逆順に表示します。

☆ ul.e3-2le li は、e3-2le を指定した<ul>タグの子プロセスの<li>タグに適用させる記述方法です。 ☆ 単に .e3-2le とした場合は、リスト項目の全てに <li class=e3-2le> と記述することになります。 ☆ ul.e3-2ri li も ul.e3-2le li と同じ働きをします。☆ width:6em; は､全角文字6文字分に相当します。