スタイルシート記述方法

今回は、CSS（スタイルシート）の記述方法について説明します。
スタイルシートに記述されている「.content p」や「#banner h2」、「.content p.posted」などの意味がよく分らないという方には必須の講義です＾＾


■ タグ名に対するスタイルの指定
タグ名に対してスタイルを指定する場合は、下記のように記述します。

< スタイルシートの書式 >

タグ名 { プロパティ ： 値 ； }

　　　　※プロパティと値が１つの場合は、最後の「；」は省略可

例えば、h1タグで指定した文字にスタイルを適用する場合は、下記のように記述します。

< スタイルシートの記述例 >

h1 { 　color : red; }

■ 複数スタイルの指定方法
複数のスタイルを適用する場合は、「；（セミコロン）」で区切って記述します。

< スタイルシートの記述例 >

body { 　color : red; 　text-align: center; }

■ 複数タグに対する指定方法
また、異なるタグに同じスタイルを適用する場合は、「，（カンマ）」でタグを区切って記述します。

< スタイルシートの記述例 >

h1,h2,h3 { 　color : red; }

■ タグを入れ子にした指定方法
タグを入れ子にして指定することで、特定のタグに囲まれたタグだけにスタイルを適用させることができます。

< スタイルシートの書式 >

タグ名 タグ名 { プロパティ ： 値 ； }

例えば、下記のように、divタグとpタグを入れ子で指定した場合は、divタグ内のpタグに対してはスタイルが適用されますが、divタグに囲まれていないpタグには適用されません。

< スタイルシートの記述例 >

div p { 　color : red; }

■ クラス名によるスタイルの指定方法
同じタグを使うにしても、場合に応じて別のスタイルを指定したいこともあります。そのような場合には、クラス名を利用します。

< スタイルシートの書式 >

．クラス名 { プロパティ ： 値 ； }

< テンプレート（HTML）の書式 >

<タグ class="クラス名">～</タグ>

例えば、下記のように、color1とcolor2というクラス名でそれぞれスタイルを指定した場合、テンプレート内でそのクラスを利用することで、そのスタイルが適用されます。

< スタイルシートの記述例 >

.color1 {　color : red; } .color2 {　color : blue; }

< テンプレート内の記述例 >

<p class="color1">赤色</p> <p class="color2">青色</p>

■ クラス名にタグを指定する方法
特定のタグだけに有効なクラス名を指定することもできます。

< スタイルシートの書式 >

タグ名．クラス名 { プロパティ ： 値 ； }

< テンプレート（HTML）の書式 >

<タグ class="クラス名">～</タグ>

例えば、下記のように記述した場合、pタグの中にだけcolorというクラス名を指定することができ、他のタグで指定しても無効となります。また、同じpタグでもクラス名を記述しない場合は、スタイルが適用されません。

< スタイルシートの記述例 >

p.color {　color : red; }

< テンプレート内の記述例 >

<p class="color">赤色</p>

■ クラス名による入れ子指定
クラス名を指定したタグの中にある特定のタグにのみスタイルを適用させることもできます。

< スタイルシートの書式 >

．クラス名 タグ名 { プロパティ ： 値 ； }

< テンプレート（HTML）の書式 >

<タグ class="クラス名">～</タグ>

例えば、下記のように、contentというクラス名とh2タグを並べて記述した場合、テンプレート内でcontentを指定したdivタグに囲まれたh2タグに対してのみスタイルが適用されます。

< スタイルシートの記述例 >

.content h2 {　color : red; }

< テンプレート内の記述例 >

<div class="content"> <h2>赤色</h2> </div>

■ IDによるスタイルの指定方法
上記のクラス名による指定方法に似ていますが、ID名でスタイルを指定することができます。

クラス名とID名による指定方法の違いは、クラス名による指定の場合は、複数のタグで同じスタイルを何度も利用することができるのに対して、ID名による指定の場合は、ページ内で一回のみ利用する場合に使用します。

< スタイルシートの書式 >

＃ID名 { プロパティ ： 値 ； }

< テンプレート（HTML）の書式 >

<タグ id="ＩＤ名">～</タグ>

例えば、下記のように、color1というＩＤ名でスタイルを指定した場合、テンプレート内でそのIDを利用することで、そのスタイルが適用されます。

< スタイルシートの記述例 >

#color1 {　color : red; }

< テンプレート内の記述例 >

<div id="color1">赤色</p>

■ ID名にタグを指定する方法
特定のタグだけに有効なID名を指定することもできます。

< スタイルシートの書式 >

タグ名＃ID名 { プロパティ ： 値 ； }

< テンプレート（HTML）の書式 >

<タグ id="ID名">～</タグ>

例えば、下記のように記述した場合、pタグの中にだけcolorというIDを指定することができ、他のタグで指定しても無効となります。また、同じpタグでもID名を記述しない場合は、スタイルが適用されません。

< スタイルシートの記述例 >

p#color {　color : red; }

< テンプレート内の記述例 >

<p id="color">赤色</p>

■ ID名による入れ子指定
ID名を指定したタグの中にある特定のタグにのみスタイルを適用させることもできます。

< スタイルシートの書式 >

＃ＩＤ タグ名 { プロパティ ： 値 ； }

< テンプレート（HTML）の書式 >

<タグ id="ID名">～</タグ>

例えば、下記のように、contentというID名とpタグを並べて記述した場合、テンプレート内でcontentというIDで囲まれたh2タグに対してのみスタイルが適用されます。

< スタイルシートの記述例 >

#content p {　color : red; }

< テンプレート内の記述例 >

<div id="content"> <p>赤色</p> </div>

＜タグ名に対するスタイルの指定方法＞

記述方法	記述例
■ タグ名に対する指定方法 タグ名 { 　プロパティ ： 値 ； }	h1 { 　color : red; }
■ 複数スタイルの指定方法 タグ名 { 　プロパティ1 ： 値1 ； 　プロパティ2 ： 値2 ； }	body { 　color : red; 　text-align: center; }
■ 複数タグに対する指定方法 タグ名，タグ名，タグ名 { 　プロパティ ： 値 ； }	h1,h2,h3 { 　color : red; }
■ タグを入れ子にした指定方法 タグ名　タグ名 { 　プロパティ ： 値 ； }	div p { 　color : red; }

＜クラス名によるスタイルの指定方法＞

記述方法	記述例
■ クラス名によるスタイルの指定 ．クラス名 { 　プロパティ ： 値 ； }	.content { 　color : red; }
■ クラス名による入れ子指定 ．クラス名　タグ名 { 　プロパティ ： 値 ； }	.content h2 { 　color : red; }
■ クラス名にタグを指定 タグ名．クラス名 { 　プロパティ ： 値 ； }	p.posted { 　color : red; }
■ クラス名による入れ子指定 　　＋クラス名にタグを指定 ．クラス名　タグ名．クラス名 { 　プロパティ ： 値 ； }	.content p.posted { 　color : red; }

＜ID名によるスタイルの指定方法＞

記述方法	記述例
■ ID名によるスタイルの指定 ＃ID名 { プロパティ ： 値 ； }	#banner { color : red; }
■ ID名による入れ子指定 ＃ID名 タグ名{ プロパティ ： 値 ； }	#banner h2 { color : red; }
■ ID名にタグを指定 タグ名＃ID名 { 　プロパティ ： 値 ； }	p#color { 　color : red; }

以上、CSS（スタイルシート）の記述方法について説明しました。
今回の内容は少し分かりにくかったかもしれませんね。
スタイルシートの記述方法は、実際にカスタマイズしていくと理解できるようになりますので、カスタマイズの際に参考にしてくださいね。

[次の講義へ] → 望ましい文字サイズの指定方法とは

参考になりましたら、1クリックの応援お願いします