効率的なCSSソースの記述｜CSSソースの記述

現在地: Home » 上級スタイルシートレイアウト講座：目次 » 効率的なCSSソースの記述

効率的なCSSソースの記述

スタイルシートの中身が増えてくると、どれがどの部分の指定なのか判別に迷ってしまう事があります。また、作成当初は理解できたものが、1年以上後でレイアウト変更しようとした際等、何の指定なのか解らなくなる事があります。折角スタイルシートを利用していても、メリットを十分に生かしきれない事も少なくありません。このような時コメントを付けていれば安心です。

----- 例 -----

/*グローバルナビゲーション*/
#globalnavi{
margin: 0;
padding: 0;
width: 100%;
}

/*ローカルナビゲーション*/
#navi{
margin: 0;
padding: 0;
width: 200px;
}

コメントの中にコメントを記述する事は出来ません。

CSSの記述

スタイルシートの記述は要素{プロパティ（属性）:プロパティ値（値）;}で記述しますが、スペース及びタブを入れる事が出来ます。なるべく見やすい記述を心がけましょう。

----- 記述例 1 -----

#left_sidebar{width: 200px;float: left;color: black;background-color: red;}


----- 記述例 2 -----

#left_sidebar{
width: 200px;
float: left;
color: black;
background-color: red; 
}


----- 記述例 3 -----

#left_sidebar{
     width: 200px;
     float: left;
     color: black;
     background-color: red; 
}


----- 記述例 4 -----

#left_sidebar
{
     width: 200px;
     float: left;
     color: black;
     background-color: red; 
}

記述方法はさまざまです。

▲Top

全称セレクタ

全ての要素に対して指定出来ます。「*」で指定します。

----- 例 -----

*{
margin: 0;
padding: 0
}

スタイルシートで段組する際よく利用します。こうする事で、全ての要素は余白ゼロとなります。よって必要最小限の指定だけで済みCSSの記述量も減ります。

▲Top

子孫セレクタ

ある要素内に含まれる特定のタグに対しての指定です。例えば#contents内の<p>に対してフォントサイズを85%、マージンを左側に2文字分とる場合は

例

#contents p{
font-size: 85%;
margin-left: 2em;
}

と指定します。各要素（セレクタ）を「半角スペース」で区切って指定します。

同様に「A B C{」ならA要素の中のB要素の中のCに対しての指定となります。

別要素同士に同じ指定

例えば下記のような場合

----- 例 -----

h2{
font-size: 150%;
color: blue;
background-color: #ffffff;
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: left center;
}

h3{
font-size: 120%;
color: blue;
background-color: #ffffff;
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: left center;
}

h4{
font-size: 100%;
color: blue;
background-color: #ffffff;
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: left center;
}

-----まとめて指定します-----

h2{font-size: 150%;}

h3{font-size: 120%;}

h4{font-size: 100%;}

h2,h3,h4{
color: blue;
background-color: #ffffff;
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: left center;
}

上記のように異なる要素でも、指定の内容が同じものがあれば「,カンマ」で区切って一括指定できます。

▲Top

省略指定

例

h2,h3,h4{
color: blue;
background-color: #ffffff;
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: left center;
}

-----まとめて指定します-----

h2,h3,h4{
color: blue;
background: #ffffff url(sample.gif) no-repeat left center;
}

▲Top