Embed Size (px)
Citation preview
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 要素にフォントの種類を複数指定する
★結果(HTML ファイル)
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 つめは回り込みを解除
★結果(HTML ファイル)
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; }
段落要素に背景画像の繰り返し設定を適用する
★結果(HTML ファイル)
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 ピクセルの実線、色は緑、赤、青、黒を指定
★結果(HTML ファイル)
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; }
表の境界線を重ねる
★結果(HTML ファイル)
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; }
中の白いリストマークを要素の中に表示
★結果(HTML ファイル)
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 ファイル)
