SITEMAP [初めてのホームページ講座] [CSS] [CSS1] [プロパティ一覧] [分類(リスト)]

CSS1 Reference

プロパティ

5. 分類(リスト)


5-1. display

block | inline | list-item | none
初期値
block
適用要素
全て
継承性
無し
割合指定
無し
P{ display : block; }  /*P要素をブロックレベル要素に指定:しなくても元々ブロックレベル*/

当プロパティは、指定した要素がどういう要素なのかを示します。 つまり、ブロックレベル要素インライン要素などを指定可能です。 指定後は整形モデルに従って、マージンやパディングなどが適用されます。

「none」を指定した場合、その要素の子要素を含み表示しません。 が、このプロパティはブラウザがサポートしていない可能性が高いです。 また、これらのブラウザはHTML仕様に従って各要素を適用します。

block
ブロックレベル要素に指定
inline
インライン要素に指定
list-item
リスト要素に指定
none
表示しない

CSS1コア:「display」プロパティを無視して初期値「block」を用いても良いとされています。(おそらくHTML仕様に従うことは大前提でしょうが)

[Go To Top]

5-2. white-space

normal | pre | nowrap
初期値
normal
適用要素
ブロックレベル要素
継承性
有り
割合指定
無し
P{ white-space : pre; }  /*P要素の空白類文字列をそのまま表示(整形済みとして扱う)*/

スペースは通常無視されますが、「pre」を指定することでPRE要素と同じく整形済みとしてスペースを表示(確保)します。 その他にも改行を禁止することも可能です。

が、ブラウザが対応していない可能性が高いです。

normal
通常表示(スペースは無視)
pre
整形済み(Pre Formatted)として扱う
nowrap
改行しない

CSS1コア:「white-space」プロパティを無視して、初期値を用いるだけでも良いとされています。

[Go To Top]

5-3. list-style-type

disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
初期値
disc
適用要素
リスト要素(「display」プロパティ値が「list-item」)
継承性
有り
割合指定
無し
UL{ list-style-type : square; }  /*UL要素の行頭マークを四角に指定*/

当プロパティは、「list-style-image」プロパティ値が「none」の時に有効です。 その時のリスト要素の行頭記号(数字)を指定します。 LI要素と同一の働きをします。

 
disc
●(黒丸)
circle
○(白丸)
square
■(四角)
decimal
1,2,3・・・(数字)
lower-roman
i,ii,iii・・・(小文字のローマ数字)
upper-roman
I,II,III・・・(大文字のローマ数字)
lower-alpha
a,b,c・・・(小文字のアルファベット)
upper-alpha
A,B,C・・・(大文字のアルファベット)
none
なし(記号を表示しない)
[Go To Top]

5-4. list-style-image

<url> | none
初期値
none
適用要素
リスト要素(「display」プロパティ値が「list-item」)
継承性
有り
割合指定
無し
UL{ list-style-image : url(../image/list-mark.gif); }  /*UL要素の行頭記号に画像を使用*/

リスト要素の行頭記号の代わりに指定した画像を使用します。 画像が存在しなければ記号が表示されます(「list-style-type」プロパティ)。

URLの相対パス指定は、スタイルシートから見た相対パスでなければなりません。

none
表示しない(画像を使用しない)
[Go To Top]

5-5. list-style-position

inside | outside
初期値
outside
適用要素
リスト要素(「display」プロパティ値が「list-item」)
継承性
有り
割合指定
無し
UL{ list-style-position : inside; }  /*UL要素の各項目が改行後に行頭記号の下に表示される*/

リスト項目の改行後の状態を指定します。行頭記号と各項目との整形を行います。

 
inside
リストの項目を改行後に行頭記号の下に表示する
outside
リストの項目を改行後に行頭記号の下に表示しない
[Go To Top]

5-6. list-style

<keyword> || <position> || <url>
初期値
各プロパティ参照( list-style-type , list-style-image , list-style-position
適用要素
リスト要素(「display」プロパティ値が「list-item」)
継承性
有り
割合指定
無し
UL{ list-style    : decimal inside; }
  /*UL要素の各項目が改行後に行頭記号の下に表示され、行頭記号は数字*/
UL UL{ list-style : lower-roman; }
  /*UL要素内のUL要素の各項目の行頭記号が小文字のローマ数字*/

list-style-type , list-style-image , list-style-position プロパティを一括で指定可能です。

[Go To Top]

Copyright(C)1999 Miyazaki , All Rights Reserved.