CSS
更新日:2007/9/6
CSSで扱うサイズはいろいろな単位で指定することができる。
単位には以下の種類がある。
mm
ミリメートル
cm
センチメートル
in
インチ ... 1インチは2.54cm
pt
ポイント ... CSS2では1ポイントは1/72インチ
pc
パイカ ... 1パイカは12ポイント
px (*)
ピクセル ... 出力機器(デバイス)の表示の最小単位(画素)
% (*)
パーセント ... タグの要素に対する割合
em (*)
大文字の「M」を基準にした1文字の大きさ ... そのページで表示されている文字の大きさを基準にする
ex (*)
小文字の「x」を基準にした1文字の大きさ ... そのページで表示されている文字の大きさを基準にする
(*) 「px」「%」「em」「ex」は相対的な大きさなので、画面サイズやフォントの大きさによって実際のサイズが異なる。
サンプル
5mm
5cm
5in
5pt
5pc
5px
5%
5em
5ex
更新日:2007/9/6
ここではテキストに関するプロパティについて説明する。
尚、特定のブラウザでしかサポートしていないプロパティやパラメータは記載しない。
文字の色
color: <色>;
文字の位置
text-align: <設定値>;
設定値
left
左端に配置
right
右端に配置
center
中央に配置
インデント
text-indent: <数値+単位>;
インデントとは段落を変えた時の1文字目の左に空けるスペースのことである。例えば1文字分を空けたいときは「1em」と設定する。
文字の装飾
text-decoration: <設定値>;
設定値
none (デフォルト)
装飾なし
overline
上線
underline
下線
line-through
取り消し線
装飾なしは通常の状態なので普通は使用しない。
しかし、リンクされている文字(aタグ)には通常の状態では下線が入っているのでその下線を消す場合に使用する。
サンプル
text-decoration: overline
text-decoration: underline
text-decoration: line-through
英文テキストの大文字・小文字表示
text-transform: <設定値>;
設定値
none (デフォルト)
記述した通りに表示
capitalize
単語の先頭文字を大文字で表示
lowercase
全てを小文字で表示
uppercase
全てを大文字で表示
サンプル
This is sample(none)
This is sample(capitalize)
This is sample(lowercase)
This is sample(uppercase)
文字間隔
letter-spacing: <数値+単位>;
数値の前に何もつけない場合は通常の位置から数値分間隔が空き、「-」(マイナス)を付けた場合は通常の位置から数値分間隔が狭まる。狭めすぎると文字が重なっていく。
文字の垂直位置
vertical-align: {<設定値>|<数値+単位>};
設定値
super
上付き文字
sub
下付き文字
top
上詰め
middle
中詰め
bottom
下詰め
パラメータを数値と単位で指定した場合、数値の前に何もつけない場合は通常の位置から数値分上に移動し、「-」(マイナス)を付けた場合は通常の位置から数値分下に移動する。
空白、改行や折り返しの表示方法
通常、(X)HTML文書内に空白やタブ、改行を連続して記述しても空白は1文字分しか表示されないが、このパラメータによってその挙動を変えることができる。
また、通常では画面端で折り返されて表示される内容が折り返さないように設定することも可能である。
white-space: <設定値>;
設定値
normal (デフォルト)
・複数の連続する空白・タブ・改行を1文字の空白として表示する。
・画面端で自動的に内容を折り返す。
pre
・複数の連続する空白・タブ・改行をそのまま表示する。
nowrap
・複数の連続する空白・タブ・改行を1文字の空白として表示する。
・画面端で内容を折り返さず、そのまま右に向かって表示する。
行間
line-height: <数値[+単位]>;
パーセント以外の単位を指定した場合はその行の上のラインから次の行の上のラインまでの高さになる。例えば文字サイズが「12px」のときに行間が「12px」だと行間がなくなりぴったりくっついて表示される。
また、単位なしの数値も指定できるが、その場合は通常の行間からの倍数になる。例えば2を指定すると行間は通常の2倍になる。
更新日:2007/9/6
ここでは疑似クラスについて説明する。
尚、特定のブラウザでしかサポートしていないクラスは記載しない。
擬似クラス
CSSには「擬似クラス」と呼ばれる特別なものがある。
これはaタグの未読リンクや既読リンクなど、同じタグでも状態によって効果を変えたい場合に使用する。
擬似クラスには以下のものがある。
aタグ専用
a:link
未読リンクのときの効果
a:visited
既読リンクのときの効果
a:hover
マウスカーソルが重なっている時の効果
a:active
マウスボタンが押されているなどアクティブな時の効果
この擬似クラスは基本的にはaタグのみになるので最初に「a:」を入れておく。
またlink、visited、hover、activeの順に指定しないとうまく効果が出ないことがある。
尚、通常この擬似クラスはaタグに付随して指定するが、代わりにclassやidを指定することも可能である。これは特定のリンクだけに効果を発揮させたいときに有効である。
一般タグ用疑似クラス
:first-letter
最初の1文字
:first-line
最初の1行
更新日:2007/9/20
ここでは位置に関するプロパティについて説明する。
表示位置の配置方法
position: <設定値>;
設定値
static (デフォルト)
本来の位置
absolute
要素を絶対的に配置
relative
要素を相対的に配置
positionプロパティを指定すると通常の表示位置に関係なく好きな場所に要素を配置することが可能になる。
同プロパティは単独で設定するのではなく以降で説明するtopプロパティなどと組み合わせて使用する。
absoluteは要素を絶対的な位置に配置する。これはページの左上からの距離を指定したところに絶対的に配置する。
rerativeは要素を相対的な位置に配置する。これはその要素が通常表示される位置からの距離を指定したところに相対的に配置する。
サンプル
padding: 4px;
background-color: #d9d9b2;
width: 220px;
position: absolute;
top: 780px;
left: 410px;
padding: 4px;
background-color: #d9d9b2;
width: 220px;
position: relative;
top: 10px;
left: 20px;
表示位置
top: <数値+単位>; bottom: <数値+単位>; left: <数値+単位>; right: <数値+単位>;
top
基準位置上端からの距離
bottom
基準位置下端からの距離
left
基準位置左端からの距離
right
基準位置右端からの距離
基準位置というのはpositionプロパティがabsoluteならばブラウザの一番外側の部分になり、relativeの場合は通常の表示位置からということになる。
これらのプロパティは単独で指定しても変化はないので必ずpositionプロパティと一緒に使用すること。
重なり合わせの順番
z-index: <数値>;
positionプロパティなどで位置をずらしたときにブロック同士が重なり合ってしまうことがある。
その場合、通常は記述順に前に出てくが、その順番を変えるときにこのプロパティを使用する。
<数値>の部分には整数を指定し、大きい値になるほど前面に表示される。
マイナスの数値を設定することも可能である。
回り込み
float: <設定値>;
設定値
left
画像等が左に寄り、文字が右に回りこむ
right
画像等が右に寄り、文字が左に回りこむ
このプロパティは画像などに対して文字を回り込ませるかどうかを決める時に使用する。
回り込み解除
clear: <設定値>;
設定値
left
「float: left」を解除
right
「float: right」を解除
both
両方の回り込みを解除
このプロパティはfloatプロパティで指定した回り込みを解除する。
画像の切り抜き表示
clip: <設定値>;
設定値
auto (デフォルト)
画像全体を表示
rect
「rect(上,右,下,左)」形式により、対象となる矩形の左上端からの位置を指定する。位置は<数値+単位>形式か「auto」(0と同じ)のどちらかを指定する。
このプロパティは「position: absolute」要素にのみ適用される。
更新日:2007/9/6
ここではリストに関するプロパティについて説明する。
リスト(マーク指定)
list-style-type: <設定値>;
設定値
リストの前につけるマークを以下から選択する。
disc (デフォルト)
黒丸
circle
白丸
square
四角
decimal
アラビア数字
lower-roman
小文字ローマ数字
upper-roman
大文字ローマ数字
lower-alpha
小文字アルファベット
upper-alpha
大文字アルファベット
リスト(マーク配置変更)
list-style-position: <設定値>;
設定値
outside (デフォルト)
外側
inside
内側
通常のマークの位置はリストの項目の外側に配置されるが、insideを指定することで項目の内側に配置できる。
リスト(独自マーク指定)
list-style-image: url("<画像ファイル>");
リストマークを独自のもの(画像)にできる。
画像ファイルのパスは絶対パスでも相対パスでもよいが、CSSを外部ファイルで指定している場合はそのファイルからの相対パスになる。
リスト(一括)
このプロパティでリスト関連のパラメータを一括して設定することができる。
それぞれの値に以下の内容を設定する。
list-style: type position image;
値を省略した場合はそれぞれのパラメータの初期値が設定される。
更新日:2007/9/6
ここではフォントに関するプロパティについて説明する。
尚、特定のブラウザでしかサポートしていないプロパティやパラメータは記載しない。
フォントの種類
font-family: <フォント名1>[,<フォント名2>,<フォント名3>...];
フォントは複数指定することができる。
指定したフォントがない場合、2つ以上指定している場合は次のフォントから、それでもない場合は似たフォントをブラウザ側が判断して表示させる。
フォント名指定
フォント名は大文字/小文字、全角/半角、スペースの有無などを含めて正確に指定する必要がある。
例えば「ＭＳ 明朝」をフォントで使用したい場合には、「ＭＳ」と「明朝」は全角で、ＭＳと明朝の間にあるスペースは半角で指定しなければならない。
さらに、フォント名にスペースが含まれているものはかならず「"」で括らなければならない。
2つ以上フォントを指定する時はフォント名を「,」で区切る。
フォントファミリー指定
<フォント名>の部分には他にフォントファミリーを指定することもできる。
フォントファミリーならブラウザ側が自身で使用可能なフォントを選択してくれるので表示するフォントがないということは少なくなる。
指定できるフォントファミリー名は以下の通りである。
serif
明朝体などのフォント
sans-serif
ゴシック体などのフォント
cursive
筆記体などのフォント
fantasy
装飾的なフォント
monospace
等幅フォント
尚、フォントはクライアントのOSやブラウザによって環境が左右されるので、必ずしも意図したとおりに表現されないことがあるということを考慮すること。
サンプル
font-family: "ＭＳ 明朝","Times New Roman",Arial
font-family: serif
font-family: sans-serif
font-family: cursive
font-family: fantasy
font-family: monospace
斜体(イタリック)
font-style: <設定値>;
設定値
normal (デフォルト)
通常
italic
斜体
oblique
斜体 (CSS1では通常のフォントを擬似的に斜体にする)
CSS2では両パラメータともイタリックフォントを使用する。
サンプル
font-style: normal(通常)
font-style: italic
font-style: oblique
文字の太さ
font-weight: <設定値>;
設定値
normal (デフォルト)
通常
bold
太字
bolder
今までより太くする
lighter
今までより細くする
100〜900
数値に対応して太さが変わる
boldを指定すると文字が単純に太くなる。
bolderやlighterは相対的な指定で、今までの太さに比べて太くしたり細くしたりできる。ただし、これは太さがいくつか用意されている場合に限られている。
100〜900を指定した場合、数値に対応して太さが変わる。数値は100刻みで9段階で指定できる。400が標準で大きいほど太くなる。ただし、フォントによっては全ての数値に対応しているわけではなく、9段階全てに対応しているフォントもないようである。
例えば「ＭＳ 明朝」の場合は500以下は全て400の値で、600以上は600の値で統一されていて2段階の太さしか表せない。
サンプル
font-weight: normal
font-weight: bold
font-weight: bolder
font-weight: lighter
font-weight: 200
font-weight: 500
font-weight: 600
font-weight: 800
文字のサイズ
font-size: <設定値>;
設定値
数値+単位
指定したサイズ
xx-small
一番小さい文字サイズ
x-small
小さい文字サイズ
small
少し小さい文字サイズ
medium
普通の大きさ
large
少し大きい文字サイズ
x-large
大きい文字サイズ
xx-large
一番大きい文字サイズ
smaller
相対的に小さい文字サイズ
larger
相対的に大きい文字サイズ
サンプル
font-size: 18px
font-size: xx-small
font-size: x-small
font-size: small
font-size: medium
font-size: large
font-size: x-large
font-size: xx-large
font-size: smaller
font-size: larger
スモールキャップ
font-variant: <設定値>;
設定値
normal (デフォルト)
通常
small-caps
スモールキャップ指定
スモールキャップとは日本文ではなじみがないが大文字を一回り小さいサイズで扱う英文独自の表現である。
small-capsを指定することでスモールキャップを設定することができる。
基本は英文であるが、日本文もやや小さめに表現される。
サンプル
font-variant: normal (通常)
font-variant: small-caps
フォント(一括)
このプロパティでフォント関連のパラメータを一括して設定することができる。
それぞれの値に以下の内容を設定する。
font: style variant weight size/height family;
height(line-height)を指定する時はsizeと「/」で区切って指定する。
sizeとfamily以外は省略可能である。
値を省略した場合はそれぞれのパラメータの初期値が設定される。
更新日:2007/9/20
CSSで扱う色はいろいろな方法で指定することができる。
指定の方法には以下の種類がある。
#RGB方式
RGBの部分にRは赤色、Gは緑色、Bは青色の度合いの数値を入れていく。
数値は「0〜f」までの16進数を使用し、「#f00」や「#111」などのように記述する。
これにより表現できる色数は16x16x16=4,096色になる。
#RRGGBB方式
RGB方式と同様の方法であるが、桁数がそれぞれ2桁ずつになっている。
数値もRGB方式と同様に16進数を使用して「00〜ff」までの256まで設定できる。
これにより表現できる色数は256x256x256=約1,670万色になる。
RGB(a%,b%,c%)方式
a,b,cの部分にそれぞれ赤、緑、青をそれぞれ何パーセントの度合いで出力するかを設定していく。
数値は「0〜100」の間で表現し、「rgb(10%,10%,20%)」のように記述する。
これにより表現できる色数は100x100x100=1,000,000色になる。
RGB(a,b,c)方式
RGB(a%,b%,c%)方式と同様にa,b,cの部分にそれぞれ赤、緑、青をそれぞれどれだけの度合いで出力するかを設定していく。
数値は「0〜255」の256個で表現し、「rgb(100,250,30)」のように記述する。
これにより表現できる色数は256x256x256=約1,670万色になる。
#RRGGBB方式に似ているがこちらの場合は10進数で表現できる。
色名を指定する
この方法はブラウザなどで指定されている色をそのまま書いていくやりかたで、例えば赤なら「red」、青なら「blue」という具合に記述する。
この方法は簡単な反面、ブラウザによって出せる色と出せない色があるということに注意する必要がある。
「transparent」
透明。
background-colorプロパティなどでtransparentを指定すると親要素の背景の色がそのまま表示される。
以上のいずれの方式で色を指定した場合でも、見る側のモニタ能力や使用するOS、ブラウザによっても表現できる色は異なってくる。
サンプル
↑#RGB方式で「#00f」と指定した色。青を最大限に出している。
↑#RGB方式で「#f0f」と指定した色。青と赤を最大限に出している。
↑#RRGGBB方式で「#ff0000」と指定した色。赤を最大限に出している。
↑#RRGGBB方式で「#ffff00」と指定した色。赤と緑を最大限に出している。
↑RGB(a%,b%,c%)方式で「rgb(50%,50%,50%)」と指定した色。赤、緑、青をそれぞれ50%づつ出している
↑RGB(a%,b%,c%)方式で「rgb(0%,100%,0%)」と指定した色。緑を最大限に出している。
(*) RGB値なので緑を最大限発色すれば緑色になるはずであるが色名の「green」とは色が異なる。この場合の色名は「lime」になる。
↑RGB(a,b,c)方式で「rgb(0,0,0)」と指定した色。何も発色していないので見た目は黒になる。
↑RGB(a,b,c)方式で「rgb(255,255,255)」と指定した色。全ての色を最大限出しているので見た目は白(何も見えない)になる。
↑色名指定方式で「aqua」と指定した色。「#00ffff」「rgb(0%,100%,100%)」「rgb(0,255,255)」と同じである。
↑色名指定方式で「silver」と指定した色。「#c0c0c0」「rgb(75%,75%,75%」「rgb(192,192,192)」と同じである。
付録
色名が付けられている140色(ブラウザによっては対応していない場合もある)
#000000 black
#000080 navy
#00008b darkblue
#0000cd mediumblue
#0000ff blue
#006400 darkgreen
#008000 green
#008080 teal
#008b8b darkcyan
#00bfff deepskyblue
#00ced1 darkturquoise
#00fa9a mediumspringgreen
#00ff00 lime
#00ff7f springgreen
#00ffff aqua
#00ffff cyan
#191970 midnightblue
#1e90ff dodgerblue
#20b2aa lightseagreen
#228b22 forestgreen
#2e8b57 seagreen
#2f4f4f darkslategray
#32cd32 limegreen
#3cb371 mediumseagreen
#40e0d0 turquoise
#4169e1 royalblue
#4682b4 steelblue
#483d8b darkslateblue
#48d1cc mediumturquoise
#4b0082 indigo
#556b2f darkolivegreen
#5f9ea0 cadetblue
#6495ed cornflowerblue
#66cdaa mediumaquamarine
#696969 dimgray
#6a5acd slateblue
#6b8e23 olivedrab
#708090 slategray
#778899 lightslategray
#7b68ee mediumslateblue
#7cfc00 lawngreen
#7fff00 chartreuse
#7fffd4 aquamarine
#800000 maroon
#800080 purple
#808000 olive
#808080 gray
#87ceeb skyblue
#87cefa lightskyblue
#8a2be2 blueviolet
#8b0000 darkred
#8b008b darkmagenta
#8b4513 saddlebrown
#8fbc8f darkseagreen
#90ee90 lightgreen
#9370db mediumpurple
#9400d3 darkviolet
#98fb98 palegreen
#9932cc darkorchid
#9acd32 yellowgreen
#a0522d sienna
#a52a2a brown
#a9a9a9 darkgray
#add8e6 lightblue
#adff2f greenyellow
#afeeee paleturquoise
#b0c4de lightsteelblue
#b0e0e6 powderblue
#b22222 firebrick
#b8860b darkgoldenrod
#ba55d3 mediumorchid
#bc8f8f rosybrown
#bdb76b darkkhaki
#c0c0c0 silver
#c71585 mediumvioletred
#cd5c5c indianred
#cd853f peru
#d2691e chocolate
#d2b48c tan
#d3d3d3 lightgrey
#d8bfd8 thistle
#da70d6 orchid
#daa520 goldenrod
#db7093 palevioletred
#dc143c crimson
#dcdcdc gainsboro
#dda0dd plum
#deb887 burlywood
#e0ffff lightcyan
#e6e6fa lavender
#e9967a darksalmon
#ee82ee violet
#eee8aa palegoldenrod
#f08080 lightcoral
#f0e68c khaki
#f0f8ff aliceblue
#f0fff0 honeydew
#f0ffff azure
#f4a460 sandybrown
#f5deb3 wheat
#f5f5dc beige
#f5f5f5 whitesmoke
#f5fffa mintcream
#f8f8ff ghostwhite
#fa8072 salmon
#faebd7 antiquewhite
#faf0e6 linen
#fafad2 lightgoldenrodyellow
#fdf5e6 oldlace
#ff0000 red
#ff00ff fuchsia
#ff00ff magenta
#ff1493 deeppink
#ff4500 orangered
#ff6347 tomato
#ff69b4 hotpink
#ff7f50 coral
#ff8c00 darkorange
#ffa07a lightsalmon
#ffa500 orange
#ffb6c1 lightpink
#ffc0cb pink
#ffd700 gold
#ffdab9 peachpuff
#ffdead navajowhite
#ffe4b5 moccasin
#ffe4c4 bisque
#ffe4e1 mistyrose
#ffebcd blanchedalmond
#ffefd5 papayawhip
#fff0f5 lavenderblush
#fff5ee seashell
#fff8dc cornsilk
#fffacd lemonchiffon
#fffaf0 floralwhite
#fffafa snow
#ffff00 yellow
#ffffe0 lightyellow
#fffff0 ivory
#ffffff white
更新日:2007/9/6
ここではボックスに関するプロパティについて説明する。
ボックスはマージン(margin)、ボーダー(border)、パディング(padding)、コンテンツ(contents)の4つの要素からなっている。各要素の意味は以下のとおりである。
マージン
ボックスの一番外側に位置し、背景を指定してもこの部分には何も表示されず常に透明になっている。
ボーダー
いわゆる枠線のことで、ボックスの周りに表示される。
パディング
コンテンツとボーダー部分の間に表示される部分である。背景を指定した場合はここまで背景が表示される。
コンテンツ
プロパティの内容部分で中心となる部分である。テキストや画像などはすべてここに表示される。一部の例外を除いて通常は幅と高さをここで指定する。
普段はマージン、ボーダー、パディングは表示されることはないので意識することはないが、CSSではほとんどのプロパティのマージン、ボーダー、パディングを設定することができる。
実際にマージン、ボーダー、パディングがどのような関係になっているかは以下のサンプルで確認できる。
サンプル
margin: 20px; /* ボックスの周りの余白 */
border: 3px solid #788eae; /* ボックスの枠線 */
padding: 10px; /* ボーダー - コンテンツ間の余白 */
background-color: #d9d9b2; /* コンテンツの背景色(ボックス内に適用) */
尚、特定のブラウザでしかサポートしていないプロパティやパラメータは記載しない。
幅/高さ
width: <数値+単位>; height: <数値+単位>;
widthでボックス領域の幅を、heightでボックス領域の高さをそれぞれ指定する。
マージン
margin: <数値+単位>;
備考
マージンはマイナス値を設定できる。
ボーダー(線種)
対象となる辺に応じて以下の4種類の方法がある。以降、ボックスの説明で四辺に対して影響を与えるプロパティは全てこのルールが適用される。
四辺の全てのボーダーを一括して指定
border-style: <設定値>;
四辺の上下・左右のボーダーを個別に指定
border-style: <設定値(上下)> <設定値(左右)>;
四辺の上・左右・下のボーダーを全て個別に指定
border-style: <設定値(上)> <設定値(左右)> <設定値(下)>;
四辺の上・下・左・右のボーダーを全て個別に指定
border-style: <設定値(上)> <設定値(右)> <設定値(下)> <設定値(左)>;
設定値
none (デフォルト)
表示しない
solid
直線
double
二重線
groove
溝線
ridge
稜線
inset
沈み込み
outset
浮き上がり
dotted
点線
dashed
破線
サンプル
border-color: #d9d9b2;
border-width: 8px;
border-style: solid double groove ridge; /* 上 右 下 左 */
border-color: #d9d9b2;
border-width: 8px;
border-style: inset outset dotted dashed; /* 上 右 下 左 */
備考
このプロパティは以下のように個別に指定することもできる。
border-top-style
上
border-right-style
右
border-bottom-style
下
border-left-style
左
ボーダー(色)
border-color: <色>;
備考
このプロパティを単独で指定してもborder-styleで枠線の種類を指定しておかないと枠線は表示されない。
ボーダー(太さ)
border-width: {<数値+単位>|<設定値>};
設定値
thin
細めの線
thick
太めの線
備考
このプロパティを単独で指定してもborder-styleで枠線の種類を指定しておかないと枠線は表示されない。
ボーダー(一括)
このプロパティでボーダー関連のパラメータを一括して設定することができる。
それぞれの値に以下の内容を設定する。
border: width style color;
値を省略した場合はそれぞれのパラメータの初期値が設定されるが、styleだけは設定しないと枠線が表示されない。
また、borderで一括指定するとボックスの四辺は全て同じボーダー指定になるので、個別に指定するときはborder-topなどを使用する。
パディング
padding: <数値+単位>;
備考
パディングはマージンと違いマイナス値を設定できない。
更新日:2007/9/6
ここでは背景に関するプロパティについて説明する。
尚、特定のブラウザでしかサポートしていないプロパティやパラメータは記載しない。
背景色
background-color: <色>;
背景画像
background-image: url(<画像ファイル>);
<画像ファイル>に指定するパスは絶対パスでも相対パスでも構わないが、CSSファイルによってスタイルシートを読み込んでいる場合、相対パスはHTMLファイルからではなくCSSファイルからの相対パスになるので、CSSファイルとHTMLファイルが異なるディレクトリにある場合は注意が必要である。
背景の繰り返し方法
background-repeat: <設定値>;
<設定値>
repeat (デフォルト)
水平、垂直方向に繰り返し
repeat-x
横方向に繰り返し
repeat-y
縦方向に繰り返し
no-repeat
繰り返しなし(1点だけで表示)
背景画像のスクロール可否
背景画像が指定されている場合に、画面スクロールと一緒に背景画像をスクロールさせるかどうかを指定できる。
background-attachment: <設定値>;
<設定値>
scroll (デフォルト)
画面のスクロールと一緒に背景画像もスクロールする。
fixed
画面をスクロールしても背景画像が固定される。
背景画像の位置
background-position: <位置(X)> [<位置(Y)>];
<位置>
<数値+単位>
top
上端に配置(垂直方向のみ)
bottom
下端に配置(垂直方向のみ)
left
左端に配置(水平方向のみ)
right
右端に配置(水平方向のみ)
center
中央に配置
background-repeatでno-repeatを設定しない場合は決めた位置から繰り返し画像が貼られる。
<位置(X)>のみを指定する方法は水平方向(左端からの値)と垂直方向(上端からの値)が同一の値をとる時に使用し、<位置(X)>と<位置(Y)>を指定する場合は水平方向と垂直方向が異なった時にそれぞれの方向に対する値を指定する。
この属性を使う場合は前述のbackground-repeat属性を使わないと全体に表示されてしまうのでセットで使うこと。
背景(一括)
このプロパティで背景関連のパラメータを一括して設定することができる。
それぞれの値に以下の内容を設定する。
background: color image repeat attachment position;
値を省略した場合はそれぞれのパラメータの初期値が設定される。