スタイルシートの書き方
スタイルシートの書き方
スタイルシートには決まった書き方があります。ここではスタイルシートのファイルの内容を実際に書き込む方法を解説します。
スタイルシートの書き方
スタイルシートの書き方は、以下のようにスタイルを指定し、必要なだけ繰り返し書きます。HTML文章のHTMLである事を定義する「<html>HTML文章</html>」のように、特にスタイルシートである事を定義する記述をする必要などはありません。
□ { ○:△;}
（□には、ID名、またはCLASS名、またはタグ名が入ります）
（○には、指定したいプロパティが入ります）
（△には、指定したいプロパティの値が入ります）
注意すべきは、「□」の記述の仕方と、ブラウザによりスタイルシート自体や各プロパティ、値などに対応/非対応/一部対応が異なり、そして解釈（表現方法）が異なる場合（バグを含む）があるという点です。
タグにCLASS名やID名を指定する方法
見出しタグ、段落タグ、リストタグなど今まで登場しましたが、例えば、見出し1である「<h1>見出し1</h1>」というタグに「sitetitle」というIDを付けたい場合は「<h1 id="sitetitle">見出し1</h1>」といった具合に、「line」というCLASSをつけたい場合は「<h1 class="line">見出し1</h1>」といった具合になります。
スタイルシートでのID名、CLASS名、タグ名の書き方
まず、「□」の記述の仕方は、「ID名、CLASS名、タグ名」と3つ出しましたが、ID名、CLASS名、タグ名とは、上記に解説している通り、HTML上の各タグにIDやCLASSを設定する事が可能で、そのID名とCLASS名と結び付けられます。また、複数指定する事も可能で、複数指定する場合は「,」（カンマ）で区切ります。
注意しなければならない点があり、少しわかりにくいかもしれませんが、HTMLタグ、HTMLタグのID名やCLASS名は「入れ子」状態になる事が出来ます。（なります）例えば、段落に「line」というクラス名を付けると「<p class="line">段落</p>」となり、その段落の中に強い強調である「<strong>強調</strong>」というタグを入れた場合は以下のようになります。
<p class="line">段落<strong>強調</strong></p>
上記の場合、「line」というクラス名は、この「<strong>強調</strong>」にも適用されます。つまり、この「<strong>強調</strong>」は、「line」のクラス名と結びつけられている事になります。これは非常に重要な事なので、しっかりと覚えておきましょう。
実際のスタイルシートの記述方法に話を戻します。例えば、CLASS名「line」と結びつけた見出し1、つまり「<h1 class="line">見出し1</h1>」という状態だったとします。
この見出し1の文字の大きさを指定する場合、スタイルシートは以下のように記述します。
以下の例では、読んで字のごとく、「文字の大きさを80%に」と指定します。（注意点があり、スタイルシート上でCLASS名を指定する場合は、CLASS名の前に「ドット」（ピリオド）である「.」を書く必要があり、ID名を指定する場合は、ID名の前にシャープである「#」を書かなければ、ID名である、CLASS名であると認識されません）
h1.line { font-size: 80%;｝
これは「lineというCLASS名が付いているh1タグ限定にこのスタイルを適用」という意味になります。実は、タグ名でも指定出来ると書いた通り、以下のように記述しても同じように指定出来ます。
h1 { font-size: 80%;}
これは「h1タグ全てに対してこのスタイルを適用」という意味になります。但し、この場合だとh1（見出し1）タグ全てに指定されてしまいます。複数h1が存在する場合に、それぞれ指定を別々に変えたい場合は、CLASS名を付けて指定する方が良いでしょう。
また、これだけでなく、以下のようにも指定出来ます。
.line { font-size: 80%;}
これは、「lineというCLASS名を持つ全てのタグに適用」という意味になり、h1でなくても、h2でも、h3でも、pでも、CLASS名に「line」を付けるとそのスタイルが適用されます。
複数指定方法があり、少々わかりにくいかもしれませんが、それぞれ使い所が大きく違ってきます。どれも覚えておいた方が良いです。
次は「文字を赤、下線、14ピクセル」です。
この「初めてのホームページ作成」の分類には以下のページがあります。
