こんにちは!
リスト
リストを使うことにより、情報を見やすく整理し簡潔に表現できます。
☆順不同リスト
行頭に記号を表示するリスト
●メニュー
●画像
●動画
☆番号付きリスト
行頭に番号を表示するリスト
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章表の利用について説明していきます。