▽勝手にCSS辞典

たーさんのたーさんによるたーさんのためのCSS辞典です。 つまり、『勝手にHTML辞典』のCSS版です。

 『使えるものだけを重点的に』

CSSはCSS2になって適応範囲も広がっていろんな事ができるようになりましたが、いまだに、CSSのすべての要素に対応したブラウザは存在しません。そんな中で安心して使えそうなプロパティのみを抜き出してまとめてあります。

対象としている環境はある程度CSSを表示できるブラウザ。IEで言うなら4以降、ネスケなら6以降程度です。ただし、CSSが表示できない環境でも、それなりに内容がわかる用に構成します。

方針

基本はCSS2のサブセット
CSS2の中から使えそうなものだけを使います。
プロパティと属性はすべて小文字で記述
大文字でもいいんですけど、小文字で統一。

メモ

キーワードは引用符で囲まない
引用符で囲むと文字列になってしまうので要注意。

例)間違い『color: "white";』 正解『color: white;』
コメントはC言語形式
『/*』と『*/』で囲まれた部分がコメントになる。
IDセレクタ
『要素名#名前』の形式でセレクタを指定した場合、指定した名前のid属性を持つタグにそのスタイルが適用されます。id属性は同じページで重複できないので、一カ所だけを指定するための形式。あまり使いません。
クラスセレクタ
『要素名.名前』の形式でセレクタを指定した場合、指定した名前のclass属性を持つタグにそのスタイルが適用されます。こちらがよく使われる形式。
ボックスの説明
各要素を表示するボックスは以下のような4つの部分から成り立っています。
ボックスの構成
それぞれの要素の意味は・・・ まぁ、気合いで(´∀`;)

プロパティ

使える、CSSのプロパティは以下の通り。

●色と背景

color 文字色
文字の色を指定する。
background-color 背景色
背景の色を指定する。
background-image 背景画像
背景の画像を指定する。
background-repeat 背景画像の繰り返し
背景画像の並び方を指定する。
background-position 背景画像の表示位置
背景画像の表示する位置を指定する。
background-attachment 背景画像の固定
背景画像をウィンドウがスクロールしたときに一緒にスクロールさせるか、それとも固定したままにするかを指定する。
background 背景画像の一括指定
background-colorからbackground-attachmentまでの要素をまとめて指定する。

●フォントとテキスト

font-family フォント名
フォントファミリーを指定する。フォントファミリーの名前は引用符で囲もう。
font-size フォントサイズ
フォントのサイズを指定する。
font-weight フォントの太さ
フォントの太さを指定する。
font-style 斜体
イタリック体・斜体などの指定を行う。
font フォントの一括指定
フォント関係の指定をまとめて行う。わかりにくいので別々に指定した方が良い?
text-align 行揃え
文字列の表示する位置を『左寄せ』『中央揃え』『右寄せ』などから指定する。各タグで『align』を使えばすむのであまり使う必要はない?
line-height 行の高さ
行の高さを指定する。

●ボックス

ボックスに関するプロパティです。プロパティの名前に『?』が入っているところは『left』『right』『top』『bottom』のどれかが入ります。

width ボックスの幅
正確にはボックスのうち内容領域の幅を指定します。『内容領域の幅+パディングの幅+ボーダーの幅+マージンの幅』でボックス全体の幅になります。
height ボックスの高さ
widthと同様に、内容領域の高さを指定するプロパティです。
margin-? マージンのサイズ
上下左右の各マージンのサイズを指定します。
padding-? パディングのサイズ
上下左右の各パディングのサイズを指定します。
border-?-color ボーダーの色
上下左右の各ボーダーの色を指定します。
border-?-width ボーダーの太さ
上下左右の各ボーダーのサイズを指定します。
border-?-style ボーダーのスタイル
上下左右の各ボーダーの表示形式を指定します。

こうしてみると・・・ CSSって意外と指定できることが少ないかもw


[Etc] Presented by ta3 [2005/1/3]