スタイルシートの書き方

スタイルシートには決まった書き方があります。ここではスタイルシートのファイルの内容を実際に書き込む方法を解説します。

スタイルシートの書き方

スタイルシートの書き方は、以下のようにスタイルを指定し、必要なだけ繰り返し書きます。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ピクセル」です。

一番上に戻る

この「初めてのホームページ作成」の分類には以下のページがあります。

  1. ホームページとは
  2. ホームページ作成に必要なもの
  3. 拡張子の変更方法
  4. 拡張子「.html」ファイルの作成方法
  5. HTMLのルール
  6. HTMLタグ一覧表
  7. スタイルシートとは
  8. スタイルシートの書き方現在のページ
  9. 文字を赤、下線、14ピクセル
  10. 色を16進数の#RRGGBBで求める
  11. カラーピッカー comin
  12. marginで空間作成
  13. paddingで空間作成
  14. backgroundで背景に画像
  15. font-familyで書式を変更
  16. font-weightで文字の太さ
  17. スタイルシートのプロパティ一覧
自作パソコンのキモ

ここより下はホームページに関するメニュー

ここより下はホームページに関するメニュー

ここより下は自作パソコン基礎&組み立てメニュー

ここより下はパソコンを納得して選ぶにはメニュー

ここより下はレンタルサーバーに関するメニュー


スマフォ時代にWiMAXが熱い!キャッシュバック有りの月額3,880円。クレードル(1,490円)も買えば、家では据え置きの一台二役で家ネットもパケット定額も解約出来る!?