CSSレイアウト サンプルソース

コメント

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

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

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

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

/*-- グローバルナビゲーション /*グローバルナビゲーションの指定*/ --*/

CSSの記述

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

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

全称セレクタ

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

ウェブデザイン制作の際、すべての要素のマージンとパディングなどをリセットする事はしばしばあります。

*{ margin: 0; padding: 0 }

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

子孫セレクタ

ある要素内に含まれる特定のタグに対しての指定です。例えば#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;
}

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

省略指定

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;
}