contents

CSS リファレンス編

その他

display

【説 明】

指定された範囲をどのように表示するかを指定します。


【 値 】

block

指定された範囲を「H1」や「P」などのようなボックスとして表示します。ボックスの前後で改行されます。

inline

指定された範囲をインラインのボックスとして表示します。したがって、ボックスの前後で改行されません。

list-item

指定された範囲を「LI」のようなリストとして表示します。リストのマークが表示される事以外は、「block」と同様です。

none

指定された範囲とそこに含まれるものすべてを表示しないように設定します。


【使用例】

以下の例では、表示方法をそれぞれ設定しています。

P { display: block }

EM { display: inline }

LI { display: list-item }

IMG { display: none }


visibility

【説 明】

指定された範囲を表示するかどうかを指定します。非表示(hidden)を指定した場合でも、該当部分が透明になるだけで全体のレイアウトには影響を与えません。このプロパティの値をダイナミックに変更するには、JavaScriptなどを使用します。


【 値 】

inherit

この範囲を含む範囲の状態と同様の結果になります。何も指定されない場合は、この状態です。

visible

通常の状態で表示されます。

hidden

透明で表示されます。つまり、本来のレイアウトを保ちながら表示されなくなります。


【使用例】

以下の例では、testというIDで指定された部分を表示されないように設定しています。

#test { position: absolute; top: 200px; visibility: hidden }


white-space

【説 明】

指定された範囲の「半角スペース」「タブ」「改行」をどう取り扱うかを設定します。


【 値 】

normal

連続する複数の「半角スペース」「タブ」「改行」を1つの「半角スペース」として表示します。通常のHTMLでの取り扱いと同様です。

pre

<PRE>タグで指定された範囲と同様に、「半角スペース」「タブ」「改行」を記述された通りに表示します。

nowrap

<BR>タグが指定されなければ改行しない状態で表示します。


【使用例】

以下の例では、「半角スペース」「タブ」「改行」を記述された通りに表示するように設定しています。

PRE { white-space: pre }


list-style-type

【説 明】

各リスト項目の前に表示されるマークを設定します。次に説明する「list-style-image」で「none」が指定されている場合や、マークの画像がロードされない場合にもこの設定が有効になります。


【 値 】

disc

マークを黒丸に設定します。

circle

マークを白丸に設定します。

square

マークを四角に設定します。

decimal

マークを数字に設定します。

lower-roman

マークを小文字のローマ数字に設定します。

upper-roman

マークを大文字のローマ数字に設定します。

lower-alpha

マークを小文字のアルファベットに設定します。

upper-alpha

マークを大文字のアルファベットに設定します。

none

マークを表示しません。


【使用例】

以下の例では、様々なマークの設定例を示しています。

OL { list-style-type: decimal }

OL { list-style-type: upper-roman }

OL { list-style-type: upper-alpha }


list-style-image

【説 明】

各リスト項目の前に表示されるマークに使用される画像を指定します。


【 値 】

url(画像のURL)

マークとして表示させたい画像の「URL」を指定します。

none

画像を表示させません。「list-style-type」が指定されている場合には、そのマークが表示されます。


【使用例】

以下の例では、リスト項目の前に表示されるマークに「maru.gif」を指定しています。

UL { list-style-image: url(maru.gif) }


list-style-position

【説 明】

各リスト項目の前に表示されるマークの表示位置を指定します。


【 値 】

inside

マークを以下のように表示します。2行め以降がマーカーの下の位置から表示されます。

 * LIST項目
 2行めの位置
outside

マークを以下のように表示します。2行め以降がマーカーより右の位置から表示されます。この状態が初期値です。

 * LIST項目
   2行めの位置


【使用例】

以下の例では、表示位置を「inside」に設定しています。

OL { list-style-position: inside }


list-style

【説 明】

「list-style」プロパティを使用すると、「list-style-type」と「list-style-image」と「list-style-position」の3つのプロパティを一度に設定することができます。


【 値 】

以下の順にそれぞれのプロパティの値をスペースで区切って指定します。必要のないものは省略することができます。

list-style-type

list-style-image

list-style-position


【使用例】

以下の例では、マークの種類と表示位置を設定しています。

UL { list-style: upper-alpha inside }


以下の例では、指定した画像(maru.gif)が表示できない場合「disc」で表示されます。

UL { list-style: url(images/maru.gif) disc }