リストを表示する

ulタグでリストを表示

目次を付けるときなど箇条書きで表示させると見やすくなります。ulタグを使うことにより、箇条書きの行頭に記号を用いたリストを作成することができます。箇条書きの開始位置を開始タグ「ul」で表し、終了位置は終了タグ「/ul」で表します。この聞に各項目を表すHタグを配置します。Iiタグの終了タグは省略可能です。ブラウザでは、行頭記号が黒丸で表示されます。これを変更するにはcssのlist-style-typeプロパティを使用します。

olタグで連番付きリストを表示

リストを連番付きで表示したいときはolタグを使用します。箇条書きの開始位置を開始タグ「ol」で表し、終了位置は終了タグ「ol」で表します。この間に各項目を表すIiタグを配置します。Iiタグの終了タグは省略可能です。ブラウザでは算用数字で連番が付きます。これを変更するにはcssのlist-style-typeプロパティを使用します。

さまざまなスタイルのリストを作威する

olタグ、ulタグともに、Iist-style-typeプロパティを設定することにより、記号の種類を変えることができます。list-style-typeプロパティを使用する限りにおいて、ulタグ、olタグに遣いはありません。つまり、olタグに自丸を表す「circle」を設定することや、逆にulタグに小文字のローマ数字を表す「lower-roman」を設定することもできるわけです。サンプルでは、olタグに大文字のアルファベットを表す「upper-alpha」を指定しています。

おすすめサイト①:ホームページ作成の東京WEBメーカー