 |
ホームページ作成 ＨＴＭＬ基礎講座 スタイルシートの基本書式
ホームページ作成・HTML基礎・スタイルシート（CSS)・javascript・SEO対策
|
|
| ■スタイルシートの基本書式 |
 |
|
【解説】
スタイルシートの基本書式について解説 |
セレクタ｛プロパティ：値｝
セレクタ（selector）はスタイルを適用したいＨＴＭＬ要素を指定します。
プロパティ（property）はセレクタにあたえるスタイル（性質）を定義します。
値はプロパティの具体的な値（value）です。
HTML要素｛何を：どうする｝という意味になり、「何を：どうする」の部分がその右の要素に反映されます。
※値の部分ですがＨＴＭＬの属性値と異なり「”」や「’」で囲ってはダメです。 |
サンプルソ−ス
h1 { color:#ff0000 ;}
上記はｈ１要素を赤色にすると定義してありますのでｈ１タグで記述したのは赤で表示されます。
※プロパティが一つなら最後の；（セミコロン）は不用ですが癖をつける為に記述しています。 |
プロパティの複数宣言
その場合はセミコロン「；」で区切って記述して下さい。
セレクタ ｛プロパティ：値；プロパティ：値；・・・プロパティ：値；｝ |
サンプルソ−ス
h1 {color:#0000ff;background-color:#ffff00;text-align:center;}
上記は文字を青、背景を黄色で中央揃えで表示する宣言になります。 |
複数の要素に同じスタイルを適用
セレクタ,セレクタ,セレクタ ｛プロパティ：値;｝
セレクタ,セレクタ ｛プロパティ：値；プロパティ：値；・・・プロパティ：値;｝
セレクタ（要素）の部分を「*」にすると全ての要素が対象になります。
* ｛プロパティ：値;｝
* ｛プロパティ：値；プロパティ：値；・・・プロパティ：値;｝ |
サンプルソ−ス
h1,h2 { background-color: #0000ff; color: ff0000 ;}
* { background-color: #0000ff; color: ff0000 ;} |
▼スタイルシートではタブや改行それに1バイトスペースをいれる事が可能ですので見やすいように整理してみましょう。（上記を例にしてみました）
h1 {
color: #0000ff;
background-color: #ffff00;
text-align: center;
}
※最後の「；」は必要ないのですが癖をつける為にも記述をお勧めします。
▼スタイルシートでのコメントも指定できます。
コメントにしたい部分を「/*」と「*/」で挟んで下さい。
尚、コメントは入れ子には出来ませんので注意して下さい。
以下は注釈として利用しました。
h1 {
color: #0000ff; /*文字を青*/
background-color: #ffff00; /*背景を黄色*/
text-align: center; /*中揃え*/
}
こうする事でソースを修正する時に便利（わかりやすく）になります。
また書式全体をコメントアウトする事で無効にする事も出来る為、必要なくなった書式やテストで試したい時も削除しなくてコメントアウトする事で、後で必要になった場合もコメントの記号部分だけを削除すればまた有効となります。 |
|
|
|
ページトップへ |