[color]- 色 の 設 定 color: 値 ; スタイルシートでは 文 字 の 色 を 変 えたり 背 景 に 色 を 付 けたりすることができます こ のとき 色 の 指 定 が 必 要 になりますが CSS では 大 きく 分 けて カラー 名 による 指 定 と 数 値 (RGB) に

1

CSS の主なプロパティ

プロパティ

説明

color

色の設定

font

フォントの一括設定

font-size

フォントサイズの設定

font-family

フォントの種類の設定

font-style

文字を斜体にする

text-align

位置の設定

text-decoration

文字装飾の設定

vertical-align

文字の高さを揃える

float

文章や画像の回り込みを設定

clear

回り込みの指定を解除

height

高さの設定

width

幅の設定

margin

マージンの設定

padding

パディングの設定

background

_-position

背景画像の表示位置指定

background-color

背景色の設定

background-image

背景画像の指定

backgraound-repeat

背景画像の並び方の設定

border

罫線の一括設定

border-color

罫線の色の設定

border-top

上罫線の設定

border-bottom

下罫線の設定

border-right

右罫線の設定

border-left

左罫線の設定

border-collapse

罫線の間隔の設定

list-style

箇条書きの一括設定

list-style-type

箇条書きのマークの種類の設定

list-style-image

箇条書きのマークに使用する画像の設定

2

[color]－色の設定

書き方

color:値…;

スタイルシートでは文字の色を変えたり、背景に色を付けたりすることができます。こ のとき、色の指定が必要になりますが、CSS では大きく分けて『カラー名』による指定と、 『数値（RGB）』による指定の 2 種類に分かれます。さらに、後者の『数値（RGB）』によ る指定方法は、細かく 4 種類に分かれます。カラー名による指定は、以下の表のように、 赤なら「red」、黒なら「black」のように指定できます。カラー名が直接、表示色になって いるので、実際の色をつかみやすいという利点がある反面、指定できる色が限られるので、 微妙な色表現はできないのが欠点です。なお、CSS レベル 1 ではカラー名は 16 色が割り当 てられています。

色

表示色

カラー名

RGB

白

white

#ffffff

銀色

silver

#c0c0c0

灰色

gray

#808080

黒

black

#000000

栗色

maroon

#800000

赤

red

#ff0000

紫

purple

#800080

明るい紫

fuchsia

#ff00ff

緑

green

#008000

ライム

lime

#00ff00

オリーブ

olive

#808000

黄色

yellow

#ffff00

藍色

navy

#000080

青

blue

#0000ff

青緑

teal

#008080

水色

aqua

#00ffff

3 微妙な色表現を実現するには、より細かい数値による設定が必要です。色の 3 原色は 「Red」、「Green」、「Blue」ですが、各原色をさらに 256 の色に分け、それぞれに 16 進数 を割り当てたものが、RGB による指定方法です。各原色は 256 通り表現が可能なので、色 全体では「256×256×256」で約 1677 万色の表現が可能です。ただし、閲覧する環境がこ の色数に対応していることが条件となります。なお、CSS ではこの RGB による指定は以下 の 4 種類の方法があります。全て半角英数字で記述します。（ ）カッコや「rgb」間のス ペースの有無は関係ありません。

設定値(半角)

解説

#rgb

赤（Red）、緑（Green）、青(Blue)それぞれの濃さを、

「0～9、a～f」までの 16 段階で示す

#rrggbb

赤（Red）、緑（Green）、青(Blue)それぞれの濃さを、

「00～99、aa～ff」までの 256 段階で示す。最も一般的な指定方法

rgb(r,g,b)

赤（Red）、緑（Green）、青(Blue)それぞれの濃さを、

「0～255」までの 256 段階の数字で示す。

rgb(r%,g%,b%)

赤（Red）、緑（Green）、青(Blue)それぞれの濃さを、

「0～100%」までの 101 段階のパーセントで示す。

サンプル

h1 { color:red; }

h3 { color:#fff ; }

h3 { color:#008000 ; }

h4 { color:rgb(0,126,255) ; }

h5 { color:rgb(10%,30%,100%) ; }

★結果(HTML ファイル)

4

[font]－フォントの一括設定

書き方

font:値…;

OS にもともとあるシステムフォントを利用して表示するスタイルシートです。値には以 下の表のようなシステムフォントが使用できます。ただし、閲覧環境（使用OS やブラウザ） により表示にばらつきがあります。

設定値

割り当てられるフォント

caption

ボタン等のキャプションに使用されるフォント

icon

アイコンラベルに使用されるフォント

menu

アプリケーションなどのメニューフォント

message-box

メッセージボックスで使用されるフォント

small-caption

小さなコントロールキャプションのフォント

status-bar

ステータスバーに使用されるフォント

サンプル

p{ font:caption; }

段落の文字にキャプションのフォントを設定

★結果(HTML ファイル)

5

[font-size]－フォントサイズの設定

書き方

font-size:値 … ;

文字の大きさを変えるプロパティです。値として入力できるのは、大きく分けて 4 つあ り、絶対サイズ/相対サイズ/数値/パーセントによる指定方法です。数値とパーセントによる 指定方法はこちらを参照してください。また、相対サイズと絶対サイズによる指定方法は 以下の表を参考にしてください。

絶対サイズ

設定値

内容

xx-small 極小

x-small

小さい

small

やや小さい

medium

標準

large

やや大きい

x-large

大きい

xx-large

極大

相対サイズ

設定値

内容

larger 一段階大きく

smaller 一段階小さく

サイズを相対値で示す場合、その基準となる長さはそれぞれ異なります。特に、パーセ ントと上記の相対サイズによる指定「larger と smaller」については、長さの基準がその対 象要素の親要素で指定したサイズとなりますので、注意してください。

サンプル

body { font-size:small }

p { font-size: 30px; }

div { font-size:larger; }

BODY、DIV、P 要素について文字サイズをそれぞれ指定

6 ★結果(HTML ファイル)

7

[font-family]－フォントの種類の設定

書き方

font-family:値,値…;

明朝体やゴシック体など、フォントの種類を変えるためのスタイルシートです。値とし て有効な指定は「固有のフォント名（MS ゴシックなど）」、「フォントの大まかな種類（グ ループ）のみの指定」、「複数のフォントによる指定」の3 種類の方法があります。 MS ゴシック、Arial など個別のフォントを指定する方法では、指定したフォントが閲覧 している人のパソコンにインストールされていた場合、ブラウザは該当のフォントで表示 します。一方、指定したフォントが用意されていない場合、最も似たフォントで表示され ます。フォント名を直接指定するこの場合では、フォント名は正しく記述する必要があり ます。例えば、「大文字/小文字」、「全角/半角」、「スペース」も一字一句同じにする必要が あります。 多くのフォントを大まかな種類に分け、そのグループ名で指定することもできます。特 定のフォントを指定しているわけではないので、そのグループに属するフォントが一つで もあれば、自動的に選ばれて表示されます。スタイルシートではフォントグループを以下 のように定めています。以下のグループ名を一つまたは複数、値に記述します。

フォントグループ

設定値

グループ内容

serif

明朝系（飾りのある）フォント

sans-serif ゴシック系（飾りのない）フォント

fantasy

装飾系フォント

cursive

草書体系フォント

monospace 等幅系フォント

固有のフォント名やフォントのグループ名を複数記述する指定方法もあります。記述順 に優先度が低くなります。最初に書いたフォントがない場合は2 番目のフォントに、2 番目 がなければ 3 番目に…のような順序にフォントが選ばれます。従って、フォントの取りこ ぼしがないように、最初は「固有のフォント名」で書き始めて、後に「フォントのグルー プ名」を書くのが一般的です。なお、複数記述する場合は「フォント名，グループ名」の ように名前同士を「,（半角カンマ）」で区切ります。

8

サンプル

body { font-family:Verdana,Arial,Helvetica,sans-serif; }

BDOY 要素にフォントの種類を複数指定する

9

[font-style]－文字を斜体にする

書き方

font-style:値…;

文字を斜体に変えるプロパティです。値には「normal/italic/oblique」のいずれかを記入 します。normal が標準であり、斜体は解除されます。italic と oblique についてですが、 多くのWEB ブラウザでは、見た目上の違いはありません。しかし、意味上では「italic」 のほうがより斜体らしいと定められています。

設定値

内容

normal

斜体なし

Italic

斜体あり（oblique との差はあまりない）

oblique

斜体あり

サンプル

h3 { font-style:oblique; }

見出しの文字を斜体に

★結果(HTML ファイル)

10

[text-align]－位置の設定

書き方

text-align:値;

ブロックレベル要素の行揃えを指定するスタイルシートです。4 種類の指定方法が可能で、 「left（左揃え）」、「center（中央揃え）」、「right（右揃え）」、「justify（均等割付）」のそれ ぞれです。初期値についてはブラウザに依存されますが、多くの WEB ブラウザの場合は 「left」です。

設定値

ブロックレベル要素の行揃え

left

左揃え

center

中央揃え

right

右揃え

justify

均等割付

サンプル

p.left { text-align:left; }

p.center { text-align:center; }

p.right { text-align:right; }

段落要素に対し、クラス指定で行揃えを指定

★結果(HTML ファイル)

11

[text-decoration]－文字装飾の設定

書き方

text-decoration:値 値….;

文字などに下線、上線、または両方の線を引くスタイルシートです。ただし、このスタ イルシートが有効なのは文字列のある要素に対してです。例えば、画像などにこのプロパ ティで線を引くことはできません。また、文字に対してcolor プロパティを設定している（文 字色を指定している）場合、このプロパティによって引かれる線もその色になります。

設定値

内容

underline

文字列に下線を引く

overline

文字列に上線を引く

line-through 文字列に取り消し線を引く

none

装飾を解除する

サンプル

a { text-decoration:underline overline; }

b { text-decoration:line-through; }

上下線を引くという効果と、取り消し線を引くという効果をそれぞれ追加

★結果(HTML ファイル)

12

[vertical-align]－文字の高さを揃える

書き方

vertical-align:値;

縦方向の文字揃えを調節するプロパティです。例えば、文字の大きさの異なる文字や、 英字と漢字など、文字の高さが異なる文字が含まれる文章の文字揃えを縦方向に調整しま す。「baseline」など、予め決まっているキーワードとサイズによる数値指定が可能です。 この「vertical-align」プロパティの初期値は baseline です。baseline とは、アルファベッ ト字体の底辺の位置のことを指します。通常「baseline」のようにアルファベットはこの baseline を基本として文字が揃えられます。

キーワード

内容

baseline

ベースラインを基本

top

上揃え

middle

中央揃え

bottom

下揃え

super

上付き

sub

下付き

text-top

テキストの上端揃え

text-bottom テキストの下端揃え

サンプル

span.eng { vertical-align:super; }

SPAN 要素にクラスで縦方向の文字揃えを指定

★結果(HTML ファイル)

13

[float]－文章や画像の回り込みを設定

書き方

float:値;

「float」プロパティは、文章や画像を回り込みさせる機能をもつスタイルシートです。 例えば、「float:left;」とすると、この「float」プロパティを指定した内容や要素は左寄せさ れ、後に続く内容が、その右側に回り込みます。逆に、「float:right;」とすれば、回り込み は右側に設定されます。 この回り込みは「clear」プロパティによってその回り込みが解除されるまで、もしくは 後に続くブロックレベル要素の「width」プロパティの値が指定されており、なおかつその 要素が内容に収まりきらないときに回り込みが解除されます。 「float」プロパティは、連続して使用することができます。従って、「float」プロパティ を指定した連続するブロック要素は、連続して回り込みます。例えば、「float:left;」を連続 すると、最初の要素の右側に次の内容が回り込みます。 「float」プロパティをブロックレベル要素に指定する場合は、必ずそのブロックレベル 要素の「width」プロパティの値を定めなければなりません。また、2 つ以上のブロックレ ベル要素を「float」プロパティによって並べて表示する場合、すべてのブロックレベル要 素において「float」プロパティを指定しなければなりません。そうしないと、主に Gecko 系エンジン（FireFox や Netscape）で正しく表示されません。

設定値

内容

left

左に回り込み

right

右に回り込み

none

回り込みなし

サンプル

p { height:400px; width:250px;}

p.sm1 { float:left; background-color:#ffdff9; }

p.sm2 { float:left; background-color:#eeeeee; margin-left:10px;}

2 つの段落要素を float プロパティによって並べる

14 ★結果(HTML ファイル)

15

[clear]－回り込みの指定を解除

書き方

clear:値;

設定値

内容

left

左寄せした要素に隣接する要素の回り込み解除

right

右寄せした要素に隣接する要素の回り込み解除

both

左右療法の回り込みを解除

none

解除しない

サンプル

p { height:400px; width:250px;}

p.sm1 { float:left; background-color:#ffdff9; }

p.sm2 { clear:left; background-color:#eeeeee; margin-top:10px;}

1 つめの段落要素を左寄せ、2 つめは回り込みを解除

16

[height]－高さの設定

書き方

height:値;

「height」プロパティは、ボックスやブロックレベル要素などの高さを指定するスタイル シートです。例えば、ボックスで言えば、「height」プロパティは以下の図のように、ボッ クスの内容の部分を表します。「300px」などのサイズ（数値）による指定方法の他に、「80%」 など、親要素の幅を基準にして相対的な値で記述する方法があります。親要素に幅が定め られていない場合は、ウィンドウの幅（BODY 要素）が基準となります。

サンプル

p { height:150px; background-color:#ffdff9; }

段落要素の高さを指定

★結果(HTML ファイル)

17

[width]－幅の設定

書き方

width:値;

「width」プロパティは、ボックスやブロックレベル要素などの横幅を指定するスタイルシ ートです。例えば、ボックスで言えば、「width」プロパティは以下の図のように、ボック スの内容の部分を表します。「300px」などのサイズ（数値）による指定方法の他に、「80%」 など、親要素の幅を基準にして相対的な値で記述する方法があります。親要素に幅が定め られていない場合は、ウィンドウの幅（BODY 要素）が基準となります。

サンプル

p { width:350px; background-color:#ffdff9; }

段落要素の幅を指定

★結果(HTML ファイル)

18

[margin]－マージンの設定

書き方

margin:値 値…;

ボックスの外環（マージン）において四方向のサイズを一括で指定します。値について は、以下の表のようにその数によって指定する方向が決まります。

記入する値の数

対象の方向

1 つ

四方向（上/下/左/右）同じ

2 つ

鉛直と水平方向（上下/左右の順）

3 つ

上/左右/下の順

4 つ

右回り方向（上/右/下/左の順）

サンプル

p { margin:10px 40px 20px; }

段落のマージンを一括で指定

★結果(HTML ファイル)

19

[padding]－パディングの設定

書き方

padding:値 値…;

ボックスの余白において四方向のサイズを一括で指定します。値については、以下の表 のようにその数によって指定する方向が決まります

記入する値の数

対象の方向

1 つ

四方向（上/下/左/右）同じ

2 つ

鉛直と水平方向（上下/左右の順）

3 つ

上/左右/下の順

4 つ

右回り方向（上/右/下/左の順）

サンプル

p { padding:10px 20px 30px 40px; }

div { padding:5px 20px; }

段落と DIV 要素のパディングを指定

★結果(HTML ファイル)

20

[background-position]－背景画像の表示位置指定

書き方

background-position:値 値 ;

「background-position」プロパティは、背景画像の表示位置を調節するプロパティです。 「background-repeat」プロパティによって画像の繰り返し設定がされている、いないに関 わらず背景画像は初期の状態では、要素の左上から開始されて表示されますが、この位置 を変えることができます。なお、このプロパティは背景画像を挿入する「background-image」 プロパティのサブプロパティなので、「background-image」プロパティも同時に記述され ていなければ動作しません。 CSS の書き方にあるように、通常は 2 つの値を記入しスペースで区切ります。最初の値 は「横方向の位置（x 座標）」を、後続の値は「縦方向の位置（y 座標）」を記入します。値 の書き方は、「left top」などキーワードによる指定の他に、「33px 52%」のようにサイズや パーセントで指定することもできます。キーワードによる指定については以下の表を参照 してください。

キーワード

表示位置

横方向（x 座標）

left

画像を要素のパディングに合わせて左寄せ

center 画像を要素のパディングに合わせて中央揃え

right

画像を要素のパディングに合わせて右寄せ

縦方向（y 座標）

top

画像を要素のパディングに合わせて上揃え

center 画像を要素のパディングに合わせて中央揃え

bottom 画像を要素のパディングに合わせて下揃え

21

値は1 つだけ設定することも可能です。キーワードで値を 1 つ設定した場合、以下の表の ように解釈されます。つまり、一方は必ず「center」となります。

キーワードの省略形

解釈

left

left center （0% 50%）

center

center center （50% 50%）

right

right center （100% 50%）

top

center top （50% 0%）

bottom

center bottom （50% 100%）

サンプル

p.bk1 { background-image:url(../../img/bg_smp.gif); background-position:center

center; }

p.bk2 { background-image:url(../../img/bg_smp.gif); background-position:20px; }

段落要素にクラス指定で画像の表示位置を設定

★結果(HTML ファイル)

22

[background-color]－背景色の設定

書き方

background-color:値 ;

背景色を指定するスタイルシートです。「background-color」プロパティはページの背景 や各要素の背景に色を付けることができます。値には、目的の色をカラー名やカラーコー ド、濃度で指定します。カラー名はカラーコードについてはこちらを参考にしてください。

サンプル

body { background-color:#ffdff9; }

BODY 要素の背景に色を付ける

★結果(HTML ファイル)

23

[background-image]－背景画像の指定

書き方

background-image:url (画像の URI) ;

「background-image」プロパティは、ページや要素に背景を表示するスタイルシートです。 値には「url(背景として使用する画像への絶対または相対パス)」を記述します。 絶対パス、相対パスについてはこちらを参照してください。

サンプル

body { background-image:url(../img/bg.gif); }

BODY 要素に背景画像を指定

★結果(HTML ファイル)

24

[background-repeat]－背景画像の並び方の設定

書き方

background-repeat:値 ;

「background-repeat」プロパティは、背景画像の繰り返しを設定するスタイルシートです。 通常、「background-image」プロパティによって、背景画像を読み込んだ場合、背景画像 は繰り返して全面に表示されます。これは、「background-repeat」プロパティの初期値 （repeat）にもあるように、標準では背景画像は繰り返して表示されるためです。

設定値

内容

repeat

全面に繰り返し

repeat-x 横方向(x 方向)のみ繰り返し

repeat-y 縦方向(y 方向)のみ繰り返し

norepeat 繰り返しなし

サンプル

p { width:350px; height:120px; background-image:url(../../img/bg_smp.gif); }

p.x-posit { background-repeat:repeat-x; }

p.y-posit { background-repeat:repeat-y; }

p.no-posit { background-repeat:no-repeat; }

段落要素に背景画像の繰り返し設定を適用する

25

[border]－罫線の一括設定

書き方

border:太さ 線種 色 ;

ボックスの外枠（境界線）を四方向一括で指定します。「border:」に続く値には、ボーダ ーの太さ、線種、色をそれぞれ指定します。各値の間には半角スペースを挿入します。ま たこれら 3 つの値の順序については順不同です。従って、「色/太さ/線種」の順番に書いて も問題ありません。線種で指定できる値は以下の表を参照してください。

線種

スタイル

none

なし（透明）

solid

実線

dashed

破線

dotted

点線

double

二重線

groove

くぼみ

ridge

浮きだし

inset

立体くぼみ

outset

立体浮きだし

サンプル

p.solid { border:5px solid #ffdff9; }

p.dashed { border:5px dashed #ffdff9; }

p.dotted { border:5px dotted #ffdff9; }

p.double { border:5px double #ffdff9; }

p.groove { border:5px groove #ffdff9; }

p.ridge { border:5px ridge #ffdff9; }

p.inset { border:5px inset #ffdff9; }

p.outset { border:5px outset #ffdff9; }

各段落にボーダーを指定

26 ★結果(HTML ファイル)

27

[border-color]－罫線の色の設定

書き方

border-color:カラー カラー …;

ボックスの外枠（境界線）は、色をまとめて指定することもできます。ボーダーカラープ

ロパティに対する値はその数によって、指定できる上下左右の方向が以下の表のよ

うになります。

記入する値の数

対象の方向

1 つ

四方向（上/下/左/右）同じ

2 つ

鉛直と水平方向（上下/左右の順）

3 つ

上/左右/下の順

4 つ

右回り方向（上/右/下/左の順）

サンプル

div { border:3px solid; border-color:#00ff00 #ff0000 #0000ff #000000; }

DIV 要素の外枠の太さを 3 ピクセルの実線、色は緑、赤、青、黒を指定

28

[border-xxx]－罫線の上下左右の個別の設定

書き方

border-top:太さ 線種 色 ;

border-bottom:同上 ;

border-left:同上 ;

border-right:同上 ;

ボックスの外枠を上下左右それぞれ個別に指定します。「border-xxx:」に続く値に

は、ボーダーの太さ、線種、色をそれぞれ指定します。各値の間には半角スペースを

挿入します。またこれら 3 つの値の順序については順不同です。従って、「色/太さ/線

種」の順番に書いても問題ありません。線種には以下の値を指定できます。

線種

スタイル

none

なし（透明）

solid

実線

dashed

破線

dotted

点線

double

二重線

groove

くぼみ

ridge

浮きだし

inset

立体くぼみ

outset

立体浮きだし

29

サンプル

div

{

border-top:2px solid #ff0000;

border-bottom:5px dotted #000000;

border-left:3px double #00ff00;

border-right:4px dashed #0000ff;

}

DIV 要素のボーダーを上下左右、独立して指定する

★結果(HTML ファイル)

30

[border-collapse]－罫線の間隔の設定

書き方

border-collapse:値 ;

「border-collapse」プロパティは、セルに境界線を表示した場合の境界線の重なり

方を指定するスタイルシートです。通常では、境界線は互いに離れて表示されますが、

境界線を重ねて（つぶして）表示させることもできます。

設定値

内容

separate 境界線を離して表示（初期値）

collapse 境界線を重ねて表示

サンプル

table { border-collapse:collapse; width:350px; border:1px solid #666666;

background:#f6f6f6;}

td { border:1px solid #666666; padding:2px; }

表の境界線を重ねる

31

[list-style]－箇条書きの一括設定

書き方

list-style:list-style-type の値 list-style-image

の値

list-style-position の値 ;

「list-style」プロパティは、リスト関連のスタイルシートを一括で指定するスタイルシ

ートです。「list-style-type」プロパティの値、「list-style-image」プロパティの値、

「list-style-position」プロパティの値をそれぞれ並べて記述します。値同士は半角ス

ペースで区切ります。また、これら 3 つの値を記述する順序は自由です。また一部の

プロパティを省略することもできます。この場合、省略したプロパティはその初期値が

与えられたものとして解釈されます。

サンプル

ul { list-style:inside circle; background:#ffdff9; }

中の白いリストマークを要素の中に表示

32

[list-style-type]－箇条書きのマークの種類の設定

書き方

list-style-type:値 ;

「list-style-type」プロパティは、リスト項目（箇条書き）の前に付くリストマークの種

類を変えることができるスタイルシートです。CSS レベル 2 では、この種類が豊富に用

意されていますが、どのブラウザも完全には対応していません。

値

内容

IE 5.0

以上

NS7.1 FF1.0 OP8.0 SF

MAC

IE5.0

none

マーカーなし

○

○

○

○ ○

○

disk

塗りつぶした丸

○

○

○

○ ○

○

circle

中の白い丸

○

○

○

○ ○

○

square

塗りつぶした四角

○

○

○

○ ○

○

decimal

数字

○

○

○

○ ○

○

decimal-leading-zero

先頭に 0 がつく数

字

×

○

○

○ ×

×

lower-roman

ローマ数字（小文

字）

○

○

○

○ ○

○

upper-roman

ローマ数字（大文

字）

○

○

○

○ ○

○

lower-greek

ギリシャ文字（小

文字）

×

○

○

○ ○

×

lower-alpha

アルファベット（小

文字）

○

○

○

○ ○

○

upper-alpha

アルファベット（大

文字）

○

○

○

○ ○

○

lower-latin

ラテン語（小文字）

×

○

○

○ ○

×

upper-latin

ラテン語（大文字）

×

○

○

○ ○

×

33

hebrew

ヘブライ語

×

○

○

× ○

×

armenian

アルメニア語

×

○

○

○ ×

×

georgian

グルジア語

×

×

×

○ ×

×

cjk-ideographic

漢数字

×

○

○

× ×

×

hiragana

ひらがな

×

○

○

× ×

×

katakana

カタカナ

×

○

○

× ×

×

hiragana-iroha

ひらがな（いろは

順）

×

○

○

× ×

×

katakana-iroha

カタカナ（いろは

順）

×

○

○

× ×

×

※引用元：藤本 壱、スタイルシート ポケットリファレンス、技術評論社、P247、2005

サンプル

ul { list-style-type:upper-alpha; }

リストマークの種類（大文字アルファベット）を UL 要素に適用

★結果(HTML ファイル)

34

[list-style-image]－箇条書きのマークに使用する

画像の設定

書き方

list-style-type:値 ;

「list-style-image」プロパティは、リストマーク（箇条書きのマーク）に画像を使うため

のスタイルシートです。list-style-image:url(画像ファイルの URI);」のように、リストマー

クに使用したい画像へのパスを相対パスもしくは絶対パスで記述します。要素に、

「list-style-type」プロパティと「list-style-image」プロパティを同時に指定することも可

能です。この場合は、「list-style-image」プロパティが優先されて表示されます。

「list-style-image」プロパティは、リストマークを表示する位置までは指定することがで

きません。表示位置を変えたい場合は、このプロパティではなく、「background-image」

プロパティと「background-position」プロパティを使うと上手く指定できます。

サンプル

ul { list-style-image:url(../../img/list8.gif); }

リストマーク（ul 要素）に画像を指定

★結果(HTML ファイル)

35

サイズの表し方

スタイルシートでは、文字の大きさやボックスの長さなど、常にサイズを指定する必要 があります。スタイルシートでのサイズの表し方は、大きく分けて 2 種類あります。一つ はあるものを基準として長さを指定する『相対単位』とサイズを絶対的に指定する『絶対 単位』があります。また、ぞれぞれの長さの単位は以下のようにさらに細かく分けて指定 することができます。

絶対サイズ指定

長さの単

位

基準の長さ

in

インチ（1inch=2.54cm）

mm

ミリメートル

cm

センチメートル

pt

ポイント（72 ポイント=1 イン

チ）

pc

パイカ（1pc=12 ポイント）

相対サイズ指定

長さの単

位

基準の長さ

ex

「x」の文字の高さ

em

1 文字分の高さ

px

画面の 1 次点

相対パーセント指定

%

親要素など

ex や em は文字の高さを基準とする相対単位ですので、基準となる長さはその要素で指 定する『font-size』プロパティの指定を基準とします。

サンプル

p { font-size:15px ; padding-left:2em; }

段落の文字サイズを 15 ピクセル、左側の余白をフォントサイズの 2 倍にとる

★結果(HTML ファイル)

36 今度はフォントサイズに直接ex や em で指定した場合です。この場合に表示される文字 サイズは、その要素の親にあたる親要素で指定された文字サイズ（font-size プロパティ） が基準となります。

サンプル

p { font-size:15px ; }

strong { font-size:1.2em ; }

段落の文字サイズを 15 ピクセル、強調文字をその 1.2 倍で表示

★結果(HTML ファイル)