です。何も指定しないと、
background-repeat: repeat ということになり、X、Y 両方向へイメージが並びます。目次
前景色(文字色)や背景のプロパティです。
テキストの色(前景色)を決めます。プロパティ値はキーワード、またはRGB値で指定できます。RGB値 指定で16進三桁の記述(256色)をした場合、例えば、#F8A は #FF88AA という様に変換されます。
キーワードでの指定: color: red
RGB値での指定: color: #FF0000
属性値のkeywordやRGB値は、引用符 " " で囲んではいけません。HTMLと違う点です。
背景色を決めます。初期値は透過色 "transparent" です。属性は継承されませんが、初期値が透過色であるため継承されているように見えます。
background-color: lightgreen
colorとbackground-colorは必ずセットで設定した方が無難です。background-colorを設定しないと、 背景は透過色ということになり、後から親要素の背景色だけを変更したときに思いがけないことになってしまいますから。
【例】
というように、上の行は背景色が指定されていないため、親要素の背景色(Gray)がそのまま透けています。
ちなみに、背景色を恣意的に透過色にするキーワード値は transparent です。
bgimg.gif はです。何も指定しないと、
background-repeat: repeat ということになり、X、Y 両方向へイメージが並びます。
背景の繰り返し方を決めます。
repeat 初期値。X、Y両方向にイメージを並べます。 repeat-x X軸(横)方向にイメージを並べます。 repeat-y Y軸(縦)方向にイメージを並べます。 no-repeat ひとつだけ表示して繰り返しません。
背景イメージが固定するか、内容と一緒にスクロールするかを決めます。
scroll 初期値。スクロールします。 fixed 固定されます。
以下の例は、背景イメージを繰り返さず表示し、固定したものです。
結果はこの画面の左上の[Property]の画像のようになります。スクロールバーを動かしてもイメージは動きません。
body {
background: "#FFFFFF";
color: "#000000";
margin-left: 10%;
margin-right: 10%;
background-image: url(bgimg.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}
【注】NN4.0ではサポートされていません。
背景イメージの貼り付け地点を決めます。
キーワード指定
キーワードは二つ対で用いられます。top, center, bottom で垂直方向を、
left, center, right で水平方向を決定します。
ひとつを省略した場合、残りのひとつはcenterになります。
<div style=" border: thin solid blue; position: relative; width: 300px; height: 200px; background-image: url(bgimg.gif); background-repeat: no-repeat; background-position: center center; ">
パーセント指定
値は二つで一組です。片方を省略した場合、その値は水平方向と解釈され、垂直方向が50%とされます。その他、長さの数値(px、em、cm等）での指定もできます。パーセントと長さの組み合わせは可能ですが、パーセントや長さと、キーワードとの組み合わせはできません。
background-position を指定した場合、 background-repeat の値が repeat であった場合、IE4.0ではイメージはそのposition値の部分から、右、下の方向へ敷きつめられるます。 IE5.0では、(CSSの定義どおりに?)領域全部に敷きつめられるので注意が必要です。
背景プロパティは、空白文字で区切って以下の例のようにひとつにまとめて記述できます。
{background: grey url(img.gif) repeat-x fixed 30%}
特定のフォント名やフォントの種類を指定します。名前に空白を含む場合は引用符(" ")で囲みます。
カンマ( , )で区切って複数のフォント名や種類を指定することも出来ます。その場合は前に記述されたものの優先度が高くなります。
特定のフォント名を記述します。
font-family:'Times New Roman',serif
フォントの種類として以下の五種類が用意されています。
font-family:serif
font-family:sans-serif
font-family:cursive
font-family:fantasy
font-family:monospace
NN4.0では、内容が日本語で書かれている場合は、この属性の指定は無視されます。
書体を決めます。イタリック体と斜体(oblique)が用意されていますが、見え方はほとんど同じでは？
font-style:normal
font-style:italic
font-style:oblique
小さなサイズの大文字で表示します。日本語の文書では使い方がよく分かりません。小見出しのようなとき使うのでしょうか？
font-variant:normal
font-variant:small-caps
文字の太さを決めます。数値は0から900まで指定可能です。ある程度の大きさでないとその効果の違いが分かりませんね。
font-weight:normal
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:900
数値(0〜900)による重み付け
Sample 0
Sample 100
Sample 200
Sample 300
Sample 400
Sample 500
Sample 600
Sample 700
Sample 800
Sample 900
文字の大きさを決めます。
絶対指定
「絶対」といっても、他の要素に左右されないという意味ですが、 大きさのキーワードとして以下の7種類が定義されています。これらが表現される大きさはブラウザの解釈次第で、ユーザーサイドでブラウザのフォントサイズを変更することにより変えられます。
font-size: xx-large
font-size: x-large
font-size: large
font-size: medium
font-size: small
font-size: x-small
font-size: xx-small
他の絶対指定の単位として、px (ピクセル)、 cm (センチ)、 pt (ポイント)、 in (インチ)
があります。これらの単位はユーザー側のブラウザでは、スタイルシートのフォント指定を外さない限り、大きさを変えられません。使用する場合は十分注意しましょう
相対指定
親要素に対しての相対的大きさです。キーワードとして larger と smaller が用意されています。親要素のフォントサイズに対してより大きくなったり、より小さくなったりします。
【例】
<p style="font-size:medium">This is medium font-size<br>
<span style="font-size:larger">font-size: larger</span><br>
<span style="font-size:smaller">font-size: smaller</span>
</p>
この場合は以下のような表示結果になります。smallerは直前のlargerの文に対してではなく、SPAN 要素の親要素である P 要素(ここでは１行目)のサイズに対して小さくなっていることに注意してください。
This is medium font-size
font-size: larger
font-size: smaller
パーセント指定
これも親要素に対しての割合になります。
1行目が親要素です。
This is large font-size
font-size: 80%
font-size: 120%
font-size: 100%
数値指定
ｅｍ(全角の意味？)は長さの単位として便利なものです。親要素のフォントの高さが、単位ｅｍの大きさになっています。
次の例は、Ｐ要素へのインラインスタイルでの記述とその結果です。Ｐ要素の親要素、(ここではBODY要素ですが、)BODY要素で定められたフォントサイズ（特に指定していない場合は、ブラウザのデフォルトのフォントサイズ）の高さを単位長としています。
<p style="font-size:2em">font-size: 2em</p>
【結果】
font-size: 2em
フォントのプロパティはまとめて記述することが出来ます。
font:bold italic 16pt/16pt arial, First line
font:bold italic 16pt/16pt arial, Second line.
たぶん単語の間隔を決めるのでしょうが、IE、NN、両方ともサポートされていませんね。
This is a sample text.
文字の間隔を決めます。
letter-spacing:normal
letter-spacing:1em
テキストに線を引きます。[blink]はNN4.0でサポートされていて、文字を点滅させます。
text-decoration:none
text-decoration:underline
text-decoration:overline
text-decoration:line-through
text-decoration:blink
下付文字、上付文字です。
sample textvertical-align:sub
sample textvertical-align:super
下のサンプルどおりです。日本語では役に立ちませんね。
text-transform:capitalize
text-transform:uppercase
text-transform:lowercase
text-transform:none
文章の配置を決めます。
text-align:left
text-align:center
text-align:right
text-align:justify
指定無し
文章の一行目の頭をインデント(字下げ)します。
This is text-indent:1em,first line
This is text-indent:1em, second line
This is text-indent:10%,first line
This is text-indent:10%, second line
行の高さを決めます。文字列を中心に上下に半分ずつ割り振られるようです。負の値はとれないようです。
This is line-height:normal,first line
This is line-height:normal, second line
This is line-height:2em,first line
This is line-height:2em, second line
This is line-height:50%,first line
This is line-height:50%, second line