スタイルシートの基本書式:ホームページ作成・基礎講座・HTML・CSS・javascript・SEO対策

超初心者でも簡単にできるホームページ作成,HTML基礎講座 EasyStudyHTML

ホームページ作成 HTML基礎講座 スタイルシートの基本書式

ホームページ作成・HTML基礎・スタイルシート(CSS)・javascript・SEO対策



スタイルシートの基本書式 clear.gif
【解説】
スタイルシート基本書式について解説

セレクタ{プロパティ:値}
セレクタ(selector)はスタイルを適用したいHTML要素を指定します。
プロパティ(property)はセレクタにあたえるスタイル(性質)を定義します。
値はプロパティの具体的な値(value)です。
HTML要素{何を:どうする}という意味になり、「何を:どうする」の部分がその右の要素に反映されます。
※値の部分ですがHTMLの属性値と異なり「”」や「’」で囲ってはダメです。

サンプルソ−ス
h1 { color:#ff0000 ;}
上記はh1要素を赤色にすると定義してありますのでh1タグで記述したのは赤で表示されます。
※プロパティが一つなら最後の;(セミコロン)は不用ですが癖をつける為に記述しています。
プロパティの複数宣言
その場合はセミコロン「;」で区切って記述して下さい。
セレクタ {プロパティ:値;プロパティ:値;・・・プロパティ:値;}
サンプルソ−ス
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;          /*中揃え*/
  }

こうする事でソースを修正する時に便利(わかりやすく)になります。
また書式全体をコメントアウトする事で無効にする事も出来る為、必要なくなった書式やテストで試したい時も削除しなくてコメントアウトする事で、後で必要になった場合もコメントの記号部分だけを削除すればまた有効となります。


ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora