CSSの主なプロパティ（PDFファイル）

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
箇条書きのマークに使用する画像の設定
1
[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
2
微妙な色表現を実現するには、より細かい数値による設定が必要です。色の 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
h3
h3
h4
h5
{ color:red; }
{ color:#fff ; }
{ color:#008000 ; }
{ color:rgb(0,126,255) ; }
{ color:rgb(10%,30%,100%) ; }
★結果(HTML ファイル)
3
[font]－フォントの一括設定
書き方
font:値…;
OS にもともとあるシステムフォントを利用して表示するスタイルシートです。値には以
下の表のようなシステムフォントが使用できます。ただし、閲覧環境（使用 OS やブラウザ）
により表示にばらつきがあります。
設定値
割り当てられるフォント
caption
ボタン等のキャプションに使用されるフォント
icon
アイコンラベルに使用されるフォント
menu
アプリケーションなどのメニューフォント
message-box
メッセージボックスで使用されるフォント
small-caption
小さなコントロールキャプションのフォント
status-bar
ステータスバーに使用されるフォント
サンプル
p{ font:caption; }
段落の文字にキャプションのフォントを設定
★結果(HTML ファイル)
4
[font-size]－フォントサイズの設定
書き方
font-size:値 … ;
文字の大きさを変えるプロパティです。値として入力できるのは、大きく分けて 4 つあ
り、絶対サイズ/相対サイズ/数値/パーセントによる指定方法です。数値とパーセントによる
指定方法はこちらを参照してください。また、相対サイズと絶対サイズによる指定方法は
以下の表を参考にしてください。
絶対サイズ
設定値
相対サイズ
内容
設定値
内容
xx-small
極小
larger
一段階大きく
x-small
小さい
smaller 一段階小さく
small
やや小さい
medium
標準
large
やや大きい
x-large
大きい
xx-large
極大
サイズを相対値で示す場合、その基準となる長さはそれぞれ異なります。特に、パーセ
ントと上記の相対サイズによる指定「larger と smaller」については、長さの基準がその対
象要素の親要素で指定したサイズとなりますので、注意してください。
サンプル
body { font-size:small }
p { font-size: 30px; }
div { font-size:larger; }
BODY、DIV、P 要素について文字サイズをそれぞれ指定
5
★結果(HTML ファイル)
6
[font-family]－フォントの種類の設定
書き方
font-family:値,値…;
明朝体やゴシック体など、フォントの種類を変えるためのスタイルシートです。値とし
て有効な指定は「固有のフォント名（MS ゴシックなど）」、
「フォントの大まかな種類（グ
ループ）のみの指定」
、
「複数のフォントによる指定」の 3 種類の方法があります。
MS ゴシック、Arial など個別のフォントを指定する方法では、指定したフォントが閲覧
している人のパソコンにインストールされていた場合、ブラウザは該当のフォントで表示
します。一方、指定したフォントが用意されていない場合、最も似たフォントで表示され
ます。フォント名を直接指定するこの場合では、フォント名は正しく記述する必要があり
ます。例えば、
「大文字/小文字」、
「全角/半角」、「スペース」も一字一句同じにする必要が
あります。
多くのフォントを大まかな種類に分け、そのグループ名で指定することもできます。特
定のフォントを指定しているわけではないので、そのグループに属するフォントが一つで
もあれば、自動的に選ばれて表示されます。スタイルシートではフォントグループを以下
のように定めています。以下のグループ名を一つまたは複数、値に記述します。
フォントグループ
設定値
serif
グループ内容
明朝系（飾りのある）フォント
sans-serif ゴシック系（飾りのない）フォント
fantasy
装飾系フォント
cursive
草書体系フォント
monospace 等幅系フォント
固有のフォント名やフォントのグループ名を複数記述する指定方法もあります。記述順
に優先度が低くなります。最初に書いたフォントがない場合は 2 番目のフォントに、2 番目
がなければ 3 番目に…のような順序にフォントが選ばれます。従って、フォントの取りこ
ぼしがないように、最初は「固有のフォント名」で書き始めて、後に「フォントのグルー
プ名」を書くのが一般的です。なお、複数記述する場合は「フォント名，グループ名」の
ように名前同士を「,（半角カンマ）
」で区切ります。
7
サンプル
body { font-family:Verdana,Arial,Helvetica,sans-serif; }
BDOY 要素にフォントの種類を複数指定する
★結果(HTML ファイル)
8
[font-style]－文字を斜体にする
書き方
font-style:値…;
文字を斜体に変えるプロパティです。値には「normal/italic/oblique」のいずれかを記入
します。normal が標準であり、斜体は解除されます。italic と oblique についてですが、
多くの WEB ブラウザでは、見た目上の違いはありません。しかし、意味上では「italic」
のほうがより斜体らしいと定められています。
設定値
内容
normal
斜体なし
Italic
斜体あり（oblique との差はあまりない）
oblique
斜体あり
サンプル
h3 { font-style:oblique; }
見出しの文字を斜体に
★結果(HTML ファイル)
9
[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 ファイル)
10
[text-decoration]－文字装飾の設定
書き方
text-decoration:値値….;
文字などに下線、上線、または両方の線を引くスタイルシートです。ただし、このスタ
イルシートが有効なのは文字列のある要素に対してです。例えば、画像などにこのプロパ
ティで線を引くことはできません。また、文字に対して color プロパティを設定している（文
字色を指定している）場合、このプロパティによって引かれる線もその色になります。
設定値
内容
underline
文字列に下線を引く
overline
文字列に上線を引く
line-through 文字列に取り消し線を引く
none
装飾を解除する
サンプル
a { text-decoration:underline overline; }
b { text-decoration:line-through; }
上下線を引くという効果と、取り消し線を引くという効果をそれぞれ追加
★結果(HTML ファイル)
11
[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 ファイル)
12
[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 プロパティによって並べる
13
★結果(HTML ファイル)
14
[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 つめは回り込みを解除
★結果(HTML ファイル)
15
[height]－高さの設定
書き方
height:値;
「height」プロパティは、ボックスやブロックレベル要素などの高さを指定するスタイル
シートです。例えば、ボックスで言えば、
「height」プロパティは以下の図のように、ボッ
クスの内容の部分を表します。
「300px」などのサイズ（数値）による指定方法の他に、
「80%」
など、親要素の幅を基準にして相対的な値で記述する方法があります。親要素に幅が定め
られていない場合は、ウィンドウの幅（BODY 要素）が基準となります。
サンプル
p { height:150px; background-color:#ffdff9; }
段落要素の高さを指定
★結果(HTML ファイル)
16
[width]－幅の設定
書き方
width:値;
「width」プロパティは、ボックスやブロックレベル要素などの横幅を指定するスタイルシ
ートです。例えば、ボックスで言えば、「width」プロパティは以下の図のように、ボック
スの内容の部分を表します。
「300px」などのサイズ（数値）による指定方法の他に、
「80%」
など、親要素の幅を基準にして相対的な値で記述する方法があります。親要素に幅が定め
られていない場合は、ウィンドウの幅（BODY 要素）が基準となります。
サンプル
p { width:350px; background-color:#ffdff9; }
段落要素の幅を指定
★結果(HTML ファイル)
17
[margin]－マージンの設定
書き方
margin:値値…;
ボックスの外環（マージン）において四方向のサイズを一括で指定します。値について
は、以下の表のようにその数によって指定する方向が決まります。
記入する値の数
対象の方向
1つ
四方向（上/下/左/右）同じ
2つ
鉛直と水平方向（上下/左右の順）
3つ
上/左右/下の順
4つ
右回り方向（上/右/下/左の順）
サンプル
p { margin:10px 40px 20px; }
段落のマージンを一括で指定
★結果(HTML ファイル)
18
[padding]－パディングの設定
書き方
padding:値値…;
ボックスの余白において四方向のサイズを一括で指定します。値については、以下の表
のようにその数によって指定する方向が決まります
記入する値の数
対象の方向
1つ
四方向（上/下/左/右）同じ
2つ
鉛直と水平方向（上下/左右の順）
3つ
上/左右/下の順
4つ
右回り方向（上/右/下/左の順）
サンプル
p { padding:10px 20px 30px 40px; }
div { padding:5px 20px; }
段落と DIV 要素のパディングを指定
★結果(HTML ファイル)
19
[background-position]－背景画像の表示位置指定
書き方
background-position:値値 ;
「background-position」プロパティは、背景画像の表示位置を調節するプロパティです。
「background-repeat」プロパティによって画像の繰り返し設定がされている、いないに関
わらず背景画像は初期の状態では、要素の左上から開始されて表示されますが、この位置
を変えることができます。なお、このプロパティは背景画像を挿入する「background-image」
プロパティのサブプロパティなので、「background-image」プロパティも同時に記述され
ていなければ動作しません。
CSS の書き方にあるように、通常は 2 つの値を記入しスペースで区切ります。最初の値
は「横方向の位置（x 座標）
」を、後続の値は「縦方向の位置（y 座標）
」を記入します。値
の書き方は、
「left top」などキーワードによる指定の他に、
「33px 52%」のようにサイズや
パーセントで指定することもできます。キーワードによる指定については以下の表を参照
してください。
キーワード
横方向（x 座標）
縦方向（y 座標）
表示位置
left
画像を要素のパディングに合わせて左寄せ
center
画像を要素のパディングに合わせて中央揃え
right
画像を要素のパディングに合わせて右寄せ
top
画像を要素のパディングに合わせて上揃え
center
画像を要素のパディングに合わせて中央揃え
bottom
画像を要素のパディングに合わせて下揃え
20
値は 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 ファイル)
21
[background-color]－背景色の設定
書き方
background-color:値 ;
背景色を指定するスタイルシートです。「background-color」プロパティはページの背景
や各要素の背景に色を付けることができます。値には、目的の色をカラー名やカラーコー
ド、濃度で指定します。カラー名はカラーコードについてはこちらを参考にしてください。
サンプル
body { background-color:#ffdff9; }
BODY 要素の背景に色を付ける
★結果(HTML ファイル)
22
[background-image]－背景画像の指定
書き方
background-image:url (画像の URI) ;
「background-image」プロパティは、ページや要素に背景を表示するスタイルシートです。
値には「url(背景として使用する画像への絶対または相対パス)」を記述します。
絶対パス、相対パスについてはこちらを参照してください。
サンプル
body { background-image:url(../img/bg.gif); }
BODY 要素に背景画像を指定
★結果(HTML ファイル)
23
[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; }
段落要素に背景画像の繰り返し設定を適用する
★結果(HTML ファイル)
24
[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; }
各段落にボーダーを指定
25
★結果(HTML ファイル)
26
[border-color]－罫線の色の設定
書き方
border-color:カラーカラー …;
ボックスの外枠（境界線）は、色をまとめて指定することもできます。ボーダーカラープ
ロパティに対する値はその数によって、指定できる上下左右の方向が以下の表のよ
うになります。
記入する値の数
対象の方向
1つ
四方向（上/下/左/右）同じ
2つ
鉛直と水平方向（上下/左右の順）
3つ
上/左右/下の順
4つ
右回り方向（上/右/下/左の順）
サンプル
div { border:3px solid; border-color:#00ff00 #ff0000 #0000ff #000000; }
DIV 要素の外枠の太さを 3 ピクセルの実線、色は緑、赤、青、黒を指定
★結果(HTML ファイル)
27
[border-xxx]－罫線の上下左右の個別の設定
書き方
border-top:太さ線種色 ;
border-bottom:同上 ;
border-left:同上 ;
border-right:同上 ;
ボックスの外枠を上下左右それぞれ個別に指定します。「border-xxx:」に続く値に
は、ボーダーの太さ、線種、色をそれぞれ指定します。各値の間には半角スペースを
挿入します。またこれら 3 つの値の順序については順不同です。従って、「色/太さ/線
種」の順番に書いても問題ありません。線種には以下の値を指定できます。
線種
スタイル
none
なし（透明）
solid
実線
dashed
破線
dotted
点線
double
二重線
groove
くぼみ
ridge
浮きだし
inset
立体くぼみ
outset
立体浮きだし
28
サンプル
div
{
border-top:2px solid #ff0000;
border-bottom:5px dotted #000000;
border-left:3px double #00ff00;
border-right:4px dashed #0000ff;
}
DIV 要素のボーダーを上下左右、独立して指定する
★結果(HTML ファイル)
29
[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; }
表の境界線を重ねる
★結果(HTML ファイル)
30
[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; }
中の白いリストマークを要素の中に表示
★結果(HTML ファイル)
31
[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
ラテン語（大文字）
×
○
○
○
○
×
32
hebrew
ヘブライ語
×
○
○
×
○
×
armenian
アルメニア語
×
○
○
○
×
×
georgian
グルジア語
×
×
×
○
×
×
cjk-ideographic
漢数字
×
○
○
×
×
×
hiragana
ひらがな
×
○
○
×
×
×
katakana
カタカナ
×
○
○
×
×
×
hiragana-iroha
ひらがな（いろは
順）
×
○
○
×
×
×
katakana-iroha
カタカナ（いろは
順）
×
○
○
×
×
×
※引用元：藤本壱、スタイルシートポケットリファレンス、技術評論社、P247、2005
サンプル
ul { list-style-type:upper-alpha; }
リストマークの種類（大文字アルファベット）を UL 要素に適用
★結果(HTML ファイル)
33
[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 ファイル)
34
サイズの表し方
スタイルシートでは、文字の大きさやボックスの長さなど、常にサイズを指定する必要
があります。スタイルシートでのサイズの表し方は、大きく分けて 2 種類あります。一つ
はあるものを基準として長さを指定する『相対単位』とサイズを絶対的に指定する『絶対
単位』があります。また、ぞれぞれの長さの単位は以下のようにさらに細かく分けて指定
することができます。
相対サイズ指定
絶対サイズ指定
長さの単
位
長さの単
位
基準の長さ
基準の長さ
in
インチ（1inch=2.54cm）
ex
「x」の文字の高さ
mm
ミリメートル
em
1 文字分の高さ
cm
センチメートル
px
画面の 1 次点
pt
ポイント（72 ポイント=1 イン
チ）
pc
相対パーセント指定
%
親要素など
パイカ（1pc=12 ポイント）
ex や em は文字の高さを基準とする相対単位ですので、基準となる長さはその要素で指
定する『font-size』プロパティの指定を基準とします。
サンプル
p { font-size:15px ; padding-left:2em; }
段落の文字サイズを 15 ピクセル、左側の余白をフォントサイズの 2 倍にとる
★結果(HTML ファイル)
35
今度はフォントサイズに直接 ex や em で指定した場合です。この場合に表示される文字
サイズは、その要素の親にあたる親要素で指定された文字サイズ（font-size プロパティ）
が基準となります。
サンプル
p { font-size:15px ; }
strong { font-size:1.2em ; }
段落の文字サイズを 15 ピクセル、強調文字をその 1.2 倍で表示
★結果(HTML ファイル)
36

Download Report