第 4章 リストと回り込みについて

こんにちは!
今回はXHTMLCSS  4章リストと回り込みについて
リスト
リストを使うことにより、情報を見やすく整理し簡潔に表現できます。
☆順不同リスト
 行頭に記号を表示するリスト
●メニュー
●画像
●動画
☆番号付きリスト
 行頭に番号を表示するリスト
1.性別
2.趣味
3.特技
順不同リストを表す場合は ul要素 リストの各項目 li要素 で記述します。
ul要素            ブロックレベル要素
順不同リストを表します。
    内容
-------------------------------------------------------------------
内容には、必ずli要素を一つ以上記述します
li要素
リスト項目を表します
  • 内容
-------------------------------------------------------------------
内容には、ブロックレベル要素やインライン要素を記述します。
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章表の利用について説明していきます。
IMG_2060.jpg