1月8日(水)2コマ目

今日、やったこと

箇条書き

今日のホワイトボード

箇条書きその１

箇条書きは以下の<ul>タグと<li>タグでできる。

<ul>タグで箇条書きの範囲を指定
<li>タグで箇条書きの各項目を指定

図　<ul>タグ、<li>タグで箇条書き

マーカーを変更する

箇条書きのマーカーは<ul>タグのstyle属性で項目名 list-style-type で変更できる。

サンプルソースは以下のとおり。

style属性ではなく、<style>タグでも同じように設定できる。

下図のように<ul>にクラスを指定して、<style>タグにて各クラスのlist-style-typeで設定できる。

図　<style>タグにて設定

練習問題１

下図がヒント。

図　箇条書き　練習問題１

正解例は以下のとおり。

練習問題2

犬種の箇条書き(1.シベリアンハスキー、2.アラスカンマラミュート)の中に、各犬の特徴の箇条書きがある。

図　箇条書き　練習問題２

正解例は以下のとおり。

次回は

表をつくります。