ウェブデザインをスタイルシートでおこなおう！

それでは、フルにＣＳＳを使いこなして多彩なレイアウトを簡単に行う方法を紹介していこう。
まず最初に、基本事項の確認。

• 『セレクタ』：ここでは要素名のこと思えばよい。
• 『タグ』：タグとは、商品のタグと同じ意味で使われる。商品のタグは商品を飾る物ではなく、商品情報がかかれているだけである。ＨＴＭＬのタグも同じで、文章を飾る物ではなく、文章の意味（種類）を指す物である。ＨＴＭＬでは要素名を<>で囲んだ文字列をタグと呼ぶ。
  例： <br>
• 『要素』：ＨＴＭＬにおける要素とは、一つの部品と思えばよい。一つの部品は開始タグから終了タグまでのことを言う。img要素などは、タグ＝要素となる。
  例：<a>タグの要素名は a であり、<a>から</a>までをひっくるめて a要素 と呼ぶ。
• 『class(クラス)』 ：クラスとは、日本語で言うと『組』のことで、学校のクラスと同じ意味である。要素をクラス分けし、クラスにスタイルを適用するのが基本である。
• 『id』：idとは、普段使っているＩＤと同じ意味であり、ゲームのＩＤや、学校の学籍番号と同じである。同じ学籍番号の人が複数存在しないように、スタイルシートでも同じＩＤの要素は複数存在してはならない。ただし、複数存在しても、エラー修正処理の結果、見た目はclassとまったく同じ動作になる。
  また、１個という範囲は１ページのみであり、１ページ＝学校と見ればいいだろう。別のファイルに同じＩＤが存在しても問題無い。
  使い方は後述。

■一括指定
では、次の段階。
基本的な使い方をマスターし、使っていると面倒臭い場面に遭遇することだろう。

例：

<a class="submenu" ..... >....</a>
<a class="submenu" ..... >....</a>
<a class="submenu" ..... >....</a>

このように、classを毎回書き入れるのは非常に面倒である。
CSSには、このような状況を想定した書式が存在する。

<div class="submenu">
  <a ..... >....</a>
  <a ..... >....</a>
  <a ..... >....</a>
</div>

上ように一まとめに括って、submenuクラス要素内の全a要素にＣＳＳを適用ということができる。

.submenu a {



}

ＣＳＳでは、上記のように指定する。
クラス名、空白、セレクタ（要素名）の順で記述すれば良い。
このスタイルシートは、submenuクラスの要素内にあるa要素にのみ適用される。
もちろんクラスを使わず、セレクタのみで指定することも可能だ。(使う場面はあまりないが)

h1 a {



}

上記の指定では、h1要素内のa要素に対してスタイルを指定することになる。
この階層は何階層でも指定できる。

.submenu ul a {

}

上記の場合、submenuクラス内のul要素内のa要素に適用という意味になる。

■グループの中の最初の一つにだけ適用させたい

たとえば、次のような場合。

<div class="contents">
  <p> .... </p>
  <p> .... </p>
  <p> .... </p>
</div>

上記のような構成があり、後で最初のp要素だけスタイルを変えたいとなったとする。
普通なら、最初のp要素にクラスを書き入れると思うが、そこで待った！
htmlを書き換えなくても、cssを書き換えるだけでそれが叶ってしまうのだ。

.contents > p {
}

上記のように、 > をつけてやると、.contets要素内の最初の p要素 だけにスタイルが適用できる。
これで、全ページにクラスを付け加えという大変な作業から逃れられた。

■グループ外の最初の一つだけに適用させたい

では今度はどうだろう。

<h1> .... <h1>
<h2> .... <h2>
<h2> .... <h2>

このような状況で、h1要素の直後にあるh2要素にだけスタイルを適用したいと思った場合。

h1 + h2 {
}

今度は + を使うことで、それができる。

■idについて

CSSではあまり使うことの無いid。実際の動作は結果的にclassと同じになるため、あえて使う必要もないだろう。
中途半端に使おうとすれば、大変になるだけだ。idで指定したけど、後で複数の要素に適用させたいという事が無いともかぎらない。
絶対的に一つしか存在できないパーツにたいしてのみ、idを指定するようにしよう。
たとえば、ヘッダやフッタは複数存在することがありえないので、idを使うほうが好ましいと言える。

使い方は、クラスは .classname なのにたして、#idname となるだけだ。

<div id="header"> .... </div>

これにたいしＣＳＳでは、

#header { }

このように、classとidを使い分けることで、分かりやすく管理することも可能だという事も頭に入れておこう。
また、idとclassを合わせて指定も可能である。

■最後に、もっと複雑に処理する時に便利な擬似要素/クラスをマトメテ紹介
このリストにある要素名には、クラスも含めてかまわない。見やすくするために要素名とまとめて呼ぶ。

• 要素名:hovor
  カーソルをその要素の上に載せた時にだけダイナミックに適用させる。
  例： a:hovor { }
• 要素名:focus
  その要素が選択状態の時に適用されます。フォーム関連部品にて使用可能。
  例：input:focus { }
• 要素名：first-child
  要素名でしたようそ内にある最初の要素に対して適用する。
• 要素名:first-line
  要素内で、最初の一行目に対して適用。
• 要素名:first-letter
  要素内の最初の一文字目だけに適用。最初の一文字だけを大きくしたり太くしたりするときに便利。

以上で、基礎の全てと思ってもいいだろう。
スタイルシートを使いこなして、楽して楽しく思い通りのページを作ろう。