スタイルシート(CSS)の書き方

記述:2010年5月4日

スタイルシート(CSS)の書き方は色々な方法があります。

基本的なスタイルシートの書き方を覚えましょう。
文字は大文字でも小文字でも構いませんが、小文字で書いていきます。

基本的な書き方

p { font-size : 13px ; }
セレクタ {プロパティ : 値 ; }

上記が基本的なスタイルシート(CSS)の書き方になります。
この場合は「p(段落)」で囲まれたタグが、フォントサイズ:13pxで表示されます。

プロパティを2個以上指定する

基本的な書き方を理解したら、スタイルシート(CSS)を修正してみましょう。
フォントサイズ以外に文字のカラーも変更したい場合はどうすれば良いでしょうか?
セレクタ {プロパティ : 値 ; }を2個書けば良いのですが、綺麗な書き方とは言えません。

正解は、、、

p { font-size : 13px ;
color : #0000FF ;
}

「プロパティ : 値 ;」を続けて書くが正解です。
セレクタが変わる場合は、セレクタ {プロパティ : 値 ; }をそれぞれ書きます。

セレクタを同時に指定

次はセレクタを同時に2個以上指定する場合のスタイルシート(CSS)の書き方です。

h1, p { font-size : 13px ; }
セレクタ, セレクタ {プロパティ : 値 ;}

上記のポイントはセレクタとセレクタを「,(半角カンマ)」で区切る事です。
この場合は「p(段落)」と「h1(見出し1)」が、フォントサイズ:13pxで表示されます。

IDセレクタ

次は「IDセレクタ」の説明です。
このIDセレクタは、HTMLページ内に一回しか出てきてはいけないと言う決まりがあります。
しかし、2回以上使用してもページには反映します。

p #data { font-size : 13px ; }
セレクタ #名前 {プロパティ : 値 ;}

上記は「p(段落)」のタグ内に「#data」という名前を持った物に対してだけに機能します。
ちなみに「#」の後の名前は何でも構いませんが、使用する部分の名前にしましょう。
ここでは「data」となっていますので、日付部分に使うという意味です。

HTMLタグに組み込む場合は下記の様に書きます。
CSSは外部ファイルから読み込む場合のスタイルシート(CSS)の書き方です。

HTMLページに直接書き込む事が出来ますが、
効率を考えると外部ファイルを使用した方が修正が手軽になります。

<p id="data">2010年5月4日</p>

どうでしょう?難しいと思われるかもしれませんが、慣れれば簡単です。
意味が解からないという方は、実際にページを作成してみましょう。

クラスセレクタ

IDセレクタに似た、同じ様な物があります。
それは「クラスセレクタ」という物です。

IDセレクタと異なる所は、HTMLページ内に何回でも登場させることが出来ます。
スタイルシート(CSS)の書き方は、「#」が「.(ドット)」になっただけです。

p .data { font-size : 13px ; }
セレクタ .名前 {プロパティ : 値 ;}

名前は使用する部分の名前にしましょう。
HTMLページに書き込む場合は下記のようにします。
「id」を「class」に変更しただけです。

<p class="data">2010年5月4日</p>

もう一度言いますが、IDセレクタの何回も使用出来る版です。
どちらを使用するか迷った時は、クラスセレクタを使用しましょう。
こちらは1回でも5回でも使用が可能です。

この他の書き方

この他にもスタイルシート(CSS)の書き方がありますが、とりあえずここまで、、、

今までに挙げたスタイルシートの書き方でそれなりのホームページが作れます。
覚えることは沢山ありますので、ゆっくりとじっくりと覚えましょう。


inserted by FC2 system