ＣＳＳの使い方

スタイルシートの概念

スタイルシートでは、『プロパティ』と『セレクタ』の二つを用いてデザインを決めていきます。

・プロパティとは、『どう変更するか』を示すものです。
・セレクタとは、『どの部分を変更するか』を示すものです。

つまり、『プロパティで内容』、『セレクタで場所を』を指定します。
そしてこの二つを組み合わせて、以下のようにデザインを指定します。

例えば、HTMLの

で囲まれた部分の文字の色を青にするときは、
p
『p』がセレクタ、『color:blue』がプロパティです。

だいたい理解できましたでしょうか？次では、もう少し詳しく説明します。

スタイルシートの記述場所と優先順位

ホームページのレイアウトや書式はCSSで記述するとキレイで見やすいホームページを作ることが出来ます。 このサイトは初心者でもすぐに使えるCSSということを目的としていますので書式に絞ったCSSパーツの配布と解説をしています。
はじめにスタイルシートとは？といったとうなことに関して触れておきます。 ホームページにスタイルを適用する方法には3種類あります。

まず外部スタイルシートファイルを作りそこにCSSを記述する方法があります。
もっとも一般的な方法であり、全てのHTMLファイルに対して適用できるというメリットがあります。

次にHTMLの内に記述する方法があります。
その記述したHTMLファイル内のみに適用できます。１ページだけのホームページやこのページだけ全体の設定とは変えたいというときに使います。 設定が外部スタイルシートファイルと重なってもこちらに記述したスタイルが優先されます。

最後にHTMLの各タグに直接記述する方法です。
あるページのある部分にだけスタイルを適用したいときに使います。 例えばこの文字だけ色を赤くしたいとか、サイズを大きくしたいなど。スタイルの優先度は一番高く、前述２つの方法で設定したスタイルと重なっても こちらの方法で記述したスタイルが優先されます。

CSSの使い方

CSSの使い方 - 背景リファレンス（2)


■ 背景画像を固定

background-attachment: 値

値には以下のものが指定できます。



■ 背景画像の表示位置

background-position: 値

値には以下のものが指定できます。




■ まとめて指定
background:

background-colorの値
background-imageの値
background-repeatの値
background-attachmentの値
background-positionの値

上記のスタイルをまとめて指定できます。

CSSの使い方

CSSの使い方 - 背景リファレンス（1)


■背景色

background-color: 値

値には以下のものが指定できます。




■背景画像

background-image: 値

値には以下のものが指定できます。




■背景画像の繰り返し

background-repeat: 値

値には以下のものが指定できます。

CSSの使い方

CSSの使い方 - テキストリファレンス（3）


■単語間

word-spacing: 値

値には以下のものが指定できます



単語の区切りは半角スペースで行われます。text-alignで両端揃えを指定した場合には、指定した数値どうりの表示にならないことがあります。


■空白（タブを含む）および改行の処理

white-space: 値

値には以下のものが指定できます。
対象： ブロック要素




■表示方向

unicode-bidi: bidi-override;
direction: 値

一行目でunicodeごとに設定された表示方向に上書きすることを指定します。
値には以下のものが指定できます。