SSブログ

リストの行頭文字の種類を設定する。

CSS
箇条書きリスト(li要素)の行頭文字は、●のようになっていますが
この行頭文字の種類をCSSで変更できます。
行頭文字を変更する場合は、list-style-typeのプロパティを使います。


list-style-typeのプロパティに設定する値は、次の表のとおりです。
(機種依存しそうな文字があるのでうまく表示できていないかもしれません)

list-style-typeの値一覧
説明
disk●を表示します。
circle○を表示します。
square■を表示します。
decimal1,2…(アラビア数字)表示します。
lower-romanⅰ,ⅱ…(ローマ数字の小文字)を表示します。
upper-romanⅠ,Ⅱ…(ローマ数字の大文字)を表示します。
lower-alphaa,b…(アルファベットの小文字)を表示します。
upper-alphaA,B…(アルファベットの小文字)を表示します。
none行頭番号を表示しません。

CSSの記述例は、次のようになります。
ul.liliststyletypedisk{
list-style-type:disk;
}
ul.liliststyletypecircle{
list-style-type:circle;
}
ul.liliststyletypesquare{
list-style-type:square;
}
ul.liliststyletypedecimal{
list-style-type:decimal;
}
ul.liliststyletypelowerroman{
list-style-type:lower-roman;
}
ul.liliststyletypeupperroman{
list-style-type:upper-roman;
}
ul.liliststyletypeloweralpha{
list-style-type:lower-alpha;
}
ul.liliststyletypeupperalpha{
list-style-type:upper-alpha;
}
ul.liliststyletypenone{
list-style-type:none;
}
htmlの記述例は、長いので省略します。


  • セレクタ
  • プロパティ

  • セレクタ
  • プロパティ

  • セレクタ
  • プロパティ

  • セレクタ
  • プロパティ

  • セレクタ
  • プロパティ

  • セレクタ
  • プロパティ

  • セレクタ
  • プロパティ

  • セレクタ
  • プロパティ

  • セレクタ
  • プロパティ

    まとめ
  • リストの行頭文字の種類を設定する場合、list-style-typeのプロパティを使う。

  • 値には、●を表示する場合、diskを設定する。

  • ○を表示する場合、circleを設定する。

  • ■を表示する場合、squareを設定する。

  • 1,2…(アラビア数字)表示する場合、decimalを設定する。

  • ⅰ,ⅱ…(ローマ数字の小文字)を表示する場合、lower-romanを設定する。

  • Ⅰ,Ⅱ…(ローマ数字の大文字)を表示する場合、upper-romanを設定する。

  • a,b…(アルファベットの小文字)を表示する場合、lower-alphaを設定する。

  • A,B…(アルファベットの小文字)を表示する場合、upper-alphaを設定する。

  • 行頭番号を表示しない場合、noneを設定する。




nice!(1)  コメント(0)  トラックバック(0)  [編集]
共通テーマ:パソコン・インターネット

nice! 1

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0

トラックバックの受付は締め切りました
広告スペース
Copyright © HTMLの基本から勉強してみる All Rights Reserved.

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。