liタグのスタイルをショートハンドで記述する。

list-styleプロパティを使うと、リスト項目へのスタイルを適用する

  • list-style-type
  • list-style-position
  • list-style-image

の各プロパティをショートハンドでまとめて記述することができる。


ショートハンドを使わないで、スタイルを適用する場合

list-style-typeプロパティの値へ’decimal-leading-zero’を指定して
リスト項目の先頭へ01から始まる番号を順番に付けて、list-style-positionプロパティでリストの位置を調整している。
(先頭の番号を枠の内側に収める)


ショートハンドのlist-styleプロパティでまとめて記述する

以下の記述で上記と同じ効果が得られる。
(list-styleプロパティへ、適用したい値をスペースを空けて記述する)

 

list-style-imageプロパティをショートハンドに含める

リスト項目に画像を指定するlist-style-imageプロパティ
とlist-style-positionプロパティをまとめて記述する。

リスト項目へ画像が追加されました。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください