とほほのスタイルシート入門(リファレンス)

HOME > とほほのWWW入門 > とほほのスタイルシート入門 > リファレンス
1998年5月31日版
CSS1、および、ポジショニング、および、IE4.0での独自スタイルシートについて説明します。C1/e3/N4は、CSS1、IE3.0、NN4.0で定義・使用可能であることを意味します。

値の指定方法

色は例えば次のような方法で指定します。
    color: red
    color: #FF0000
    color: #F00      ... #FF0000と同じ
    color: rgb(255.0.0)
    color: rgb(100%.0%.0%)

URL

URLは次のように指定します。
    background: url(http://aaa.bbb.ccc/zzz.gif)

長さ

長さの単位には次のようなものがあります。
    font-size: 1.2in ... インチ(1in=2.54cm)
    font-size: 1.2cm ... センチメートル
    font-size: 1.2mm ... ミリメートル
    font-size: 1.2pt ... ポイント(1pt=1/72in)
    font-size: 1.2pc ... パイカ(1pc=12pt)
    font-size: 1.2px ... ピクセル
    font-size: 1.2ex ... 文字 x の高さ
    font-size: 1.2em ... フォントの高さ

割合

画面の横幅や通常のフォントサイズに対する割合を指定することもできます。
    font-size: 120% ... 120%の大きさにする。

フォント

font: style variant weight size/height family

C1/e3/N4。以降で説明する、stylevariantなどを一度に指定します。heightを指定する時はsizeとスラッシュ( / )で区切って指定します。CSS1ではsizefamily以外は省略可能となっています。NN4.0でsizefamilyを省略するとfont:全体が無視されます。
BODY, TD, TH {
    font: italic bold 100%/150% serif;
}

font-style: style

C1/e3/N4。normal(通常), italic(イタリック), oblique(斜め)のいずれかを指定します。CSS1ではitalicとobliqueに微妙な定義の違いがあるのですが、IE3.0やNN4.0ではobliqueをサポートしていません。IE4.0は未確認。IE3.0ではnormalの実装をサボっている(<I>をnormalで元に戻せない)ようです。

font-variant: variant

C1/e4。normal または small-caps を指定します。small-capsを指定すると、小文字が(すこし小さ目の)大文字で表示されます。

font-weight: weight

C1/e3/N4。フォントの太さを normal, bold, bolder, lighter, 100, 200, ... 900で指定します。

font-size: size

C1/e3/N4。フォントの大きさを指定します。絶対指定としてxx-small, x-small, small, medium, large, x-large, xx-large、相対指定として larger, smaller、単位指定として 10in, 10cm, 10mm, 10pt, 10pc, 10%, 10ex, 10em などを指定できます。IE3.0ではsmallerと指定するとバグなのか大きくなってしまい、また、emとexの解釈が誤っています。IE4.0では改善されましたが、今度はlargerがmediumと同じフォントサイズになってしまいました。

line-height: height

C1/e3/N4。テキストの高さを 2.0em, 120% などで指定します。行間をあけて、読みやすい文章を記述するのに便利です。
    P { line-height: 130% }

font-family: family, family,...

C1/e3/N4。フォントを指定します。カンマ( , )で複数記述すると、指定したフォントが無ければ次のフォントが採用されます。スペースを含むフォントは "Times New Roman"のように "..." もしくは '...' で囲みます。CSS1ではserif, sans-serif, cursive, fantasy, monospaceが定義されています。Windowsだと、"MS ゴシック", "MS 明朝", "MS Pゴシック", "MS P明朝" あたりが一般的です。Pがつくのはプロポーショナルフォントです。しかし、NNでは日本語フォントの指定はうまくいきません。

color: color

C1/e3/N4。red や green や #0000FF などのフォントの色を指定します。リンクテキストの色を変更するには、A:link { color:red }などの定義済みクラスを指定します。色の詳細は「とほほの色入門・色見本」を参照してください。

バックグランド

background: color image repeat attachment position

C1/e3/N4。color, image, repeat, attachment, positionを一度に指定します。順序は自由で、省略も可能です。IE3.0での背景関連は、このbackground:の形式のみがサポートされているようです。BODYタグの他、SPANやTABLEなどに対しても用いることができます。
BODY {
    background: url(xx.gif) no-repeat fixed 50% 50%
}

background-color: color

C1/e4/N4。背景色を指定します。テキスト部分のみの指定も可能です。colorにtransparentを指定すると透過色になりますが、IE3.0やNN4.0ではサポートされていない(IE4.0は未確認)ようです。
H1 { background-color: #CCCCCC }

background-image: image

C1/e4/N4。背景画像を指定します。SPANやBタグなどにも使用できますが、NN4.0の場合はTABLEタグやTRタグには使用できませんでした。
BODY { background-image: url(image/xxx.gif); }

background-repeat: repeat

C1/e4/N4。背景画像の並べかたを repeat(敷き詰める), repeat-x(横方向のみ), repeat-y(縦方向のみ), no-repeat(ひとつだけ)のいずれかで指定します。

background-attachment: attachment

C1/e4。ウィンドウのスクロールを動かした時の背景の動作を scroll(一緒にスクロールする), fixed(スクロールしない)のいずれかで指定します。NN4.0ではまだサポートされていないようです。

background-position: position position

C1/e4。背景の横方向の位置を left, center, right, 0〜100% で、縦方向の位置を指定し、スペースで区切って縦方向の位置を top, center, bottom, 0〜100% で指定します。fixedと共に指定すると、背景画像の表示位置を指定することができます。

テキスト配置

word-spacing: w_spacing

C1。各ワード間のスペースをnormalまたは10pxなどの長さで指定します。

letter-spacing: l_spacing

C1/e4。各文字間のスペースをnormalまたは2pxなどの長さで指定します。

text-decoration: decoration decoration ...

C1/e3/N4。テキストの装飾を none(何もなし), underline(下線), overline(上線), line-through(打ち消し線), blink(点滅)の中から指定します。IE3.0ではnone, underline, line-throughが、NN4.0ではこれに加えてblinkが指定可能です。Aタグに対してnoneを指定することで、下線の無いリンクテキストを実現できます。複数指定も可能です。
    A { text-decoration: nonde; }

vertical-align: v_align

C1/e3/N4。テキストの配置を baseline, middle, sub, super, text-top, text-bottom, top, bottomの中から、もしくは70%のようなパーセンテージで指定します。<IMG>タグのALIGN属性に相当します。

text-transform: transform

C1/e4/N4。capitalize(各単語の最初の文字を大文字にする), uppercase(すべて大文字にする), lowercase(すべて小文字にする), none(何もしない) のいずれかを指定します。NN4.0では文字コードセットが欧米フォントの際に有効です。

text-align: t_align

C1/e3/N4。テキストの配置をleft, right, center, justifyのいずれかで指定します。IE3.0やNN4.0ではjustifyはサポートされていません。

text-indent: indent

C1/e3/N4。テキストの最初の1行のインデント(字下げ)を数値やパーセントで指定します。段落の最初を字下げする際に便利です。

マージン

margin: top right bottom left
margin-top: top
margin-bottom: bottom
margin-left: left
margin-right: right

C1/e3/N4。上下左右のマージン(余白)を 2.0, 20em, 120%などのように指定します。マージンは、ボーダーが存在する場合、その外側になります。margin: は上下左右のマージンを一度に指定します。値が4つの場合はそれぞれ上、右、下、左を、値が3つの場合はそれぞれ上、左右、下を、値が2つの場合はそれぞれ上下、左右を、値が1つの場合は上下左右のマージンを表します。NN4.0では上下のマージンはうまく指定できない場合があります。

パディング

padding: top right bottom left
padding-top: top
padding-bottom: bottom
padding-left: left
padding-right: right

C1/e4/N4。上下左右のパディング(余白)を 2.0, 20em, 120%などのように指定します。パディングは、ボーダーが存在する場合、その内側になります。padding: はmargin:と同様に上下左右のパディングを一度に指定します。

ボーダー

border: width style color
border-top: width style color
border-bottom: width style color
border-left: width style color
border-right: width style color

C1/e4/N4。borderは上下左右すべての、border-xxxは上下左右それぞれのボーダーの width, style, color を一度に指定します。IEでは<DIV>などのブロック系タグに使用できます。
<SPAN STYLE="border: thin solid">あああ</SPAN>

border-color: color

C1/e4/N4。ボーダーの色を指定します。

border-style: style

C1/e4/N4。ボーダーのスタイルを none, dotted, dashed, solid, double, groove, ridge, inset, outset で指定します。solid dotted のように複数指定も可能です。

border-width: top right bottom left
border-top-width: top
border-bottom-width: bottom
border-left-width: left
border-right-width: right

C1/e4/N4。上下左右のボーダー(境界線)の太さを thin, medium, thick, 0.5em などのように指定します。border-width: は margin: と同様に上下左右のボーダーを一度に指定します。

リスト

list-style: type image position

C1/e4/N4。list-style-type, list-style-image, list-style-position を一度に指定します。

list-style-type: type

C1/e4/N4。<LI>タグで表示されるマーカーの形を disc, circle, square, dicimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none のいずれかで指定します。

list-style-image: image

C1/e4。<LI>タグで表示されるマーカーのイメージを指定します。

list-style-position: position

C1/e4。マーカーの位置を inside, outside のいずれかで指定します。insideを指定すると、リストアイテムが折り返された時に、マーカー分の字下げが無視されます。
    UL { list-style-position: inside }

ポジショニング

position: type

e4/N4。ポジショニングの方法を、absolute(絶対位置指定)、relative(相対位置指定)、static(通常)のいずれかで指定します。
<SPAN STYLE="position:absolute; top:100; left:100;">
XXX
</SPAN>

top: top
left: left

e4/N4。position:absolute もしくは position:relative と共に使用します。位置を絶対位置、もしくは相対位置で指定します。

width: width
height: height

C1/e4。画像などの横幅と高さを指定します。

float: float

C1/e4/N4。画像などの位置を left, right, none のいずれかで指定します。<IMG>タグのALIGN=leftなどと同様です。

visibility: visibility

e4。表示するしないを、visible(表示する)、hidden(表示しない)、inherit(上位のオブジェクトに依存する)のいずれかで指定します。JavaScriptで表示のオン・オフを切り替えることで、いろいろな効果を実現することができます。
<SPAN STYLE="visibility:hidden">
<SPAN STYLE="visibility:inherit">XXXX</SPAN>
</SPAN>

clip: region

e4。表示する範囲を指定します。regionにautoを指定すると通常通り、rect(0,50,50,0)を指定すると、top=0,right=50,bottom=50,left=0 の範囲のみを表示します。

z-index: order

e4。表示の際の重なりの順序を指定します。この数値が大きなものほど、前面に表示されます。

その他

clear: clear

C1/e4/N4。テキストの回り込み制御を none, left, right, bothで指定します。<BR>タグのCLEAR属性と同様です。

display: display

C1/e4/N4。画面にどのように表示されるかを block(ブロック要素), inline(インライン要素), list-item(リスト要素), none(表示しない) のいずれかで指定します。

white-space: space

C1/N4。要素の中の空白がどのように扱われるかを normal, pre, nowrap のいずれかで指定します。

filter: filter

e4。「とほほのフィルタ入門」を参照。

overflow: overflow

e4。未稿。

cursor: cursor

e4。マウスを上に乗せた時のマウスカーソルの形状を指定します。cursorにはauto, crosshair, default, hand, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, helpのいずれかを指定します。

page-break-before: where
page-break-after: where

e4。未稿。

その他

ここで紹介したのは CSS1 として定義されているもののみですが、他にも、W3Cで標準化が進められIE4.0で先走り実装された position や、IE4.0 独自の「フィルタ」などがあります。

Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )