4章　リストと回り込み

こんにちは！

今回はXHTML、CSS　を使いWebページを作成していきます。

リスト

リストを使うことにより、情報を見やすく整理し簡潔に表現できます。

☆順不同リスト

　行頭に記号を表示するリスト

●メニュー

●画像

●動画

☆番号付きリスト

　行頭に番号を表示するリスト

1.性別

2.趣味

3.特技

順不同リストを表す場合は　ul要素　リストの各項目 li要素　で記述します。

ul要素　　　　　　　　　　　　ブロックレベル要素

順不同リストを表します。

<ul>内容</ul>

-------------------------------------------------------------------

内容には、必ずli要素を一つ以上記述します

li要素

リスト項目を表します

<li>内容</li>

-------------------------------------------------------------------

内容には、ブロックレベル要素やインライン要素を記述します。

ol要素　　　　　　　　　ブロックレベル要素

番号付きリストを表します

<ol>内容</ol>

-------------------------------------------------------------------

内容には、必ずli要素を一つ以上記述します

回り込みとリストスタイルの指定

配置を指定してそれに続く文字や要素を回り込むようにするときは　floatプロパティ

回り込みを解除する場合は　clearプロパティ　を使います。

floatプロパティ

配置を指定して、それに続く文字や要素を回り込ませます

float:位置

---------------------------------------------------------------------------------

位置には、left(左に配置して右に文字が回り込む), right(右に配置して左に文字が回り込む), none(回り込みなし)を指定。

clearプロパティ

回り込みを解除します

clear:位置

---------------------------------------------------------------------------------

位置には、left(左に配置された要素の回り込み解除) right(右に配置された要素の回り込み解除) both(すべての回り込みを解除) none(解除なし)を指定。

行頭文字の種類

行頭文字の種類を■やⅠⅡⅢ・・・などに変更する場合は

list-style-typeプロパティを使います。

また、list-style-imageプロパティを使えば行頭文字に画像ファイルを指定することもできます。

list-style-typeプロパティ

行頭文字の種類を指定します

list-style-type:種類

----------------------------------------------------------------------------

種類には, none(なし),disc(●),square(■),upper-roman(Ⅰ Ⅱ Ⅲ・),

decimal(123・・・),lower-alpha(a b c・・・)などを指定します。

list-style-imageプロパティ

行頭文字の種類を指定します

list-style-type:種類

-------------------------------------------------------------------------------

種類には, none(なし)を指定します。画像を指定する場合は、

値をurl(画像ファイルのパス）と記述します。

ここまでご覧いただきありがとうございました。

次回は5章表の利用について説明していきます。

====================BY　マんタ=======================