スタイルシートとHTML
スタイルシートの基本
スタイルシートで何が出来るのか?
スタイルシートとは、文章のレイアウト全般に対する
見栄えを指定するものです。
WEBで使用される場合、ホームページ全般に関わる構成要素の
位置情報や、幅、色、高さなどレイアウトに関するすべての情報を
扱えるデータやファイルなどのことを言います。
スタイルシートの書き方の基本
HTMLで書かれた構成要素や名前などの属性に対し
セレクターと呼ばれる属性名に対し、
プロパティと、主に数値情報とで構成されます。
例えばh1要素に対して文字を太くしたい場合以下のように書くことが出来ます。
h1{font-weight:bold;}
要素名の約束
要素名の指定の仕方には一定のルールがあります。
HTMLタグ
div,span,h1,h2,h3,p,table,tr,td.th,ul.li.etc....
「HTMLタグ」をそのまま要素名として記載します。
ID名
「#」を頭につけます。
CLASS名
「.」を頭につけます。
■上記の指定をする方法は以下の6通りの方法で指定できます。
(例)<h1 id="h1" class="h1">ようこそ!</h1>
h1{font-size:24px;} /*タグをそのまま */
h1#h1{font-size:24px;} /*タグとID名の指定 */
h1.h1{font-size:24px;} /*タグとClass名の指定 */
h1#h1.h1{font-size:24px;} /*ID名とclass名を同時に指定 */
#h1{font-size:24px;} /*ID名で指定 */
.h1{font-size:24px;} /*class名で指定 */
いずれも、h1の文字を24ピクセルの大きさにします。
この書き方を覚える方法
日本語に置き換えてみます。
書くときには、ブツブツと唱えながら書いて下さい(笑)
書きミスがあると、うまく反映されません。
h1 | = | h1要素に |
{ | = | 対して |
font-weight | = | 文字の太さ |
: | = | は |
bold | = | boldタイプを使用 |
; | = | します。 |
} | = | 以上 |