これは基本：基本的にスタイルシートは　プロパティ: パラメータ; と指定する。


メニュー
フォント関連 テキスト・行関連 ブロック関連 カラー・バックグラウンド関連

●フォント関連

　font-size: n(px/pt/pc/mm/cm/in/%)



　フォントのサイズを細かな単位で指定します。
単位はそれぞれ、ピクセル、ポイント、センチ、インチ、パーセントです。

　font-size: larger | smaller



　フォントのサイズを大きい・小さいで指定します。
でもこれは のよりも曖昧だから、ほとんど意味がないと思いますが...

　font-size: xx-small | x-small | large | x-large | xx-large



　フォントのサイズを文字列で指定します。
でもこれって の様に曖昧だから、意味がないと思いますが...

　font-family: serif | san-serif | monospace |



　フォントの基本スタイルを指定します。セリフ（明朝体）、サンセリフ（ゴシック体）、モノスペースから選べます。いろいろなOSのフォント名がわからないときに有効でしょう。

　font-family: "フォント名,フォント名,フォント名"



　フォント名を指定します。ＯＳや環境によって持っているフォントが違うので、第１希望、第２希望、第３希望のように並べて指定しましょう。

　font-weight: extra-light | light | demi-light | medium | demi-bold | bold | extra-bold

(boldのみ)

　フォントの太さを指定します。ただし実際に使えるのはmediumとboldだけです。

　font-style: italic | normal

(italicのみ)

　フォントの傾きを指定します。NC4/IE4では他に normal(傾斜無し）があります。

　font-style: italic | normal



　フォントのスモールキャプスを指定します。小さい文字が出てきます。(<small>タグと同じ働きです。)

●テキスト関係

　text-align: left | center | right



　テキストの位置を、左、中央、右のように指定します。

　text-height: n(px/pt/pc/mm/cm/in/%)



　行の間隔を数値で指定します。単位は先ほどと同じです。

　text-decoration: none | underline | line-through | blink | overline |

(underline/line-throughのみ)(blink以外)(overline以外)

　テキストの修飾をしてします。例えば<a> タグにtext-decoration: none と指定すると、リンクの下線がなくなります。

　text-indent: n(px/pt/pc/mm/cm/in/%)



　文字のインデント（字下げ）を数値で指定します。単位は先ほどと同じです。

　text-transform: capitalize | uppercase | lowercase | none



　文字の大文字化・小文字化などを指定します。caplitalize・uppercaseは大文字化・lowercaseは小文字化です。

　line-height: n(px/pt/pc/mm/cm/in/%) | normal



　行の高さを指定します。

●ブロック関係

 （BODYやULやBLOCKQUOTEやDIV などに使用するもの）

　width: n(px/pt/pc/mm/cm/in/%)



幅を数値で指定します。

　height: n(px/pt/pc/mm/cm/in/%)



高さを数値で指定します。

　margin-left: n(px/pt/pc/mm/cm/in/%) | margin-right: n(px/pt/pc/mm/cm/in/%) | margin-top: n(px/pt/pc/mm/cm/in/%) | margin-bottom: n(px/pt/pc/mm/cm/in/%)



これは左から、右から、上から、下からの距離を数値で指定します。単位は先ほどと同じです。
これの組合せで、文字に影をつけるたりすることができます。

　margin: n(px/pt/pc/mm/cm/in/%)



これは左から、右から、上から、下からの距離を数値で指定します。単位は先ほどと同じです。
左右上下のすべての値が同一になります。

　padding-left: n(px/pt/pc/mm/cm/in/%) | padding-right: n(px/pt/pc/mm/cm/in/%) | padding-top: n(px/pt/pc/mm/cm/in/%) | padding-bottom: n(px/pt/pc/mm/cm/in/%)



これウィンドウの左側枠、右側枠、上側枠、下側枠からの距離を数値で指定します。単位は先ほどと同じです。

　padding: n(px/pt/pc/mm/cm/in/%)



これはウィンドウの左側枠、右側枠、上側枠、下側枠からの距離を数値で指定します。単位は先ほどと同じです。
左右上下のすべての値が同一になります。

　border-left-width: n(px/pt/pc/mm/cm/in/%) | border-right-width: n(px/pt/pc/mm/cm/in/%) | border-top-width: n(px/pt/pc/mm/cm/in/%) | border-bottom-width: n(px/pt/pc/mm/cm/in/%)



画像やフレーム、テーブルなどの「Border(枠)」の幅を数値で指定します。単位は先ほどと同じです。

　border-width: n(px/pt/pc/mm/cm/in/%)



画像やフレーム、テーブルなどの「Border(枠)」の幅を数値で指定します。単位は先ほどと同じです。
左右上下のすべての値が同一になります。

　border: n(px/pt/pc/mm/cm/in/%)



画像やフレーム、テーブルなどの「Border(枠)」の太さを数値で指定します。単位は先ほどと同じです。
左右上下のすべての値が同一になります。

　border-style: none | solid | double | groove | ridge | inset | outset



画像やフレーム、テーブルなどの「Border(枠)」のスタイルを単語で指定します。

●カラー／バックグラウンド関係

　color: #16進数



　色を16進数で指定します。
16進数はHTMLでお馴染みですが、念のため説明すると、
数は0/1/2/3/4/5/6/7/8/9/a/b/c/d/e/f の順に大きくなり、# の後の６桁の数字はそれぞれ、赤赤緑緑青青で、１６進数の２桁の組合せです。例えば、
赤はFF0000、
緑は00FF00、
青は0000FF、
黄はFFFF00、
白はFFFFFF、
黒は000000
になりますが、このように1677万色を細かく指定できますので、いろいろ試してください。

　color: カラー名



　カラー名には、white,black,blue,red,green,aqua,gray,navy,orangeなどがあります。16進数が分からない人にはこちらがお勧めです。（ただしカラー名を覚えなければならない）

　color: rgb(x,y,z)

　これは先ほどの16進数を10進数で表す方法。赤緑青の順番は先ほどと一緒で、0 から255 まである。赤はrgb(255,0,0)となる。

　background-color: #16 進数 | background-color: カラー名



　これらはさっきのcolor と同じ。

　background-image: url(イメージファイル名)



　これは壁紙の画像ファイルを指定するときに使う。

　background-repeat: repeat | repeat-x | repeat-y | no-repeat



　それぞれ、壁紙ファイルをすべてくり返すとき。
　壁紙を横方向にくり返すとき。
　壁紙を縦方向にくり返すとき。
　壁紙をくり返さないとき。

　background-attachment : scroll | fixed



壁紙のスクロールを設定します。 scrollだと、画面がスクロールすると同時に壁紙もスクロールし、fixedだと固定されます。

　background: （省略形)



背景の指定を簡略化して書きます。

これらbackgroundを組合せ、次のようにできます。
body{ 
  background: url(wall01.gif) #ffffff repeat-y fixed; 
}



戻る