「CSSの記述方法について」無料ホームページテンプレート

ここでは実際に記述方法の説明をしていきます。
まずは記述のルールについて。

/* 基本的な記述 */



セレクタ {

　　プロパティ:値;

}



/* 整えなくてもOK */



セレクタ {プロパティ:値;}

セレクタでターゲットを指定。
そしてプロパティで属性を指定し、値で属性の詳細を指定します。
基本セレクタ以外のidやclassの名前は自由に決めることができます。
プロパティと値はそれぞれ定義されているものを記述します。

例えばh1の文字サイズを12pxにしたい時、記述方法は以下のようになります。

 /* 基本セレクタの場合 */


h1 {

　　font-size:12px;

} 

全ての<h1></h1>に適用されます。

 /* idセレクタの場合 */


#header h1 {

　　font-size:12px;

}


又は


#f12px {

　　font-size:12px;

} 

1番目の記述は<div id="header"><h1></h1></div>という形で使います。
これは<div id="header"></div>内のh1に指示を出しています。

2番目の記述は<h1 id="f12px"></h1>という形で使います。
これはh1タグにidを付加させる方法です。

 /* classセレクタの場合 */


.header h1 {

　　font-size:12px;

}


又は


.f12px {

　　font-size:12px;

} 

1番目の記述は<div class="header"><h1></h1></div>という形で使います。
これは<div class="header"></div>内のh1に指示を出しています。

2番目の記述は<h1 class="f12px"></h1>という形で使います。
これはh1タグにclassを付加させる方法です。

 /* プロパティが複数ある場合 */


.header h1 {

　　font-size:12px;

　　padding: 5px;

　　margin: 5px;

}

プロパティは何個でも追加が可能です。

idとclassは[#][.]が違うだけで、記述方法は同じです。
idはページ内に一回だけ、classはページ内で何回でも使えます。

また「Free Template」をダウンロードして構造を見て頂ければ、
どのようにレイアウトしているか参考になると思います。