リストのスタイル

リストのスタイルを紹介します。

list-style-typeプロパティ

リストマークの種類をキーワードで指定します。ULタグ用の記号とOLタグ用の番号がありますが、いずれにも使用することができます。

disc(ULのデフォルト)
黒丸
circle
白丸
square
黒四角
none
リストマークなし
decimal(OLのデフォルト)
数字
upper-alpha
アルファベット大文字
lower-alpha
アルファベット小文字
upper-roman
ローマ数字大文字
lower-roman
ローマ数字小文字

list-style-imageプロパティ

リストマークを画像にします。構文は、「url(画像のパス)」となります。

list-style-positionプロパティ

リストマークの表示位置を指定します。

outside(デフォルト)
リストマークをボックスの外側に表示します。文字列の1行目と2行目以降がそろいます。
inside
リストマークをボックスの内側に表示します。リストマークと文字列の2行目以降がそろいます。

余白のスタイル

余白のスタイルを紹介します。枠線(ボーダー)の外側にある余白がマージン、内側にある余白がパディングといいます。

marginプロパティ

他の要素との間隔、つまり外側の余白を指定します。要素が上下に並んでいる場合、大きいマージンが優先されます。
また、上下左右個別に指定する場合は、「margin-top」「margin-left」「margin-right」「margin-bottom」プロパティを使用します。

paddingプロパティ

枠線と内容との間隔、つまり内側の余白を指定します。
また、上下左右個別に指定する場合は、「padding-top」「padding-left」「padding-right」「padding-bottom」プロパティを使用します。

上下左右個別に指定する場合

設定する値の数により、以下のようになります。

値が1つ
上下左右同じ値となります。
値が2つ
上下 左右
値が3つ
上 左右 下
値が4つ
上 右 下 左

枠線のスタイル

枠線(ボーダー)のスタイルを紹介します。

border-styleプロパティ

枠線の種類を指定します。枠線の種類は以下のとおりです。

solid
実線
double
二重線
groove
溝線
ridge
稜線
inset
領域がくぼんで見える
outset
領域が浮き出て見える
none(デフォルト)
枠線なし
hidden
枠線を表示しない(太さは適用される)
dashed
破線
dotted
点線

また、上下左右個別に指定する場合は、「border-top-style」「border-left-style」「border-right-style」「border-bottom-style」プロパティを使用します。

border-widthプロパティ

枠線の太さを指定します。数値+単位、またはキーワードで指定されます。

thin
細線
medium
通常の太さの線
thick
太線

また、上下左右個別に指定する場合は、「border-top-width」「border-left-width」「border-right-width」「border-bottom-width」プロパティを使用します。

border-colorプロパティ

枠線の色を指定します。色はカラーネーム、カラーコード(16進数)、カラーコード(10進数)で指定します。
また、上下左右個別に指定する場合は、「border-top-color」「border-left-color」「border-right-color」「border-bottom-color」プロパティを使用します。

borderプロパティ

枠線のスタイル(線種、太さ、色)を半角スペースで区切り、まとめて指定します。
また、上下左右個別に指定する場合は、「border-top」「border-left」「border-right」「border-bottom」プロパティを使用します。

背景のスタイル

背景のスタイルを紹介します。

background-colorプロパティ

背景色を指定します。色はカラーネーム、カラーコード(16進数)、カラーコード(10進数)で指定します。

background-imageプロパティ

背景画像を指定します。構文は、「url(画像のパス)」となります。

background-repeatプロパティ

背景画像の繰り返し方法を指定します。

repeat(デフォルト)
上下・左右に繰り返します。
repeat-x
左右にのみ繰り返します。
repeat-y
上下にのみ繰り返します。
no-repeat
繰り返さず1つのみ表示します。

background-positionプロパティ

背景画像の位置を指定します。構文は、「横方向 縦方向」となります。
位置は、ピクセル(px)やパーセント(%)の数値、またはleft/center/right(横方向)、top/center/bottom(縦方向)で指定します。

background-attachmentプロパティ

背景画像のスクロール方法を指定します。

scroll(デフォルト)
ページのスクロールにあわせてスクロールします。
fixed
ページをスクロールしても、背景画像は固定されたままとなります。