クラスの利用リンク部分の設定クラスとは「クラス」 (class) を使えば、 同じ要素(タグ)に、それぞれ異なるデザインを設定することができます。 リンクの部分に対して、 スタイルを設定することができます。 たとえば、「段落」という要素(p要素)を、 「普通」の段落、 「注意」用の段落、 「ワンポイント」用の段落のように、 目的や役割別にデザインを使い分けたい場合を考えてみましょう。 このように、ひとつの要素に複数のデザインを設定したい場合に、 クラスを利用します。
クラスを使った設定「クラス」を使うと、 特定の要素やその他の要素に、 特定のスタイルを設定することができます。CSSファイルでの設定クラスを設定するときには、 CSSファイルで次のように設定します。#spandel 要素名.クラス名 { ... } #spanend #spandel .クラス名 { ... } #spanend #spanadd 要素名:link { ... } #spanend #spanadd 要素名:visited { ... } #spanend #spanadd 要素名:hover { ... } #spanend #spanadd 要素名:active { ... } #spanendなお、「要素名」の部分には、 「.クラス名」を指定することもできます。 「要素名.クラス」と指定すると、 指定した要素に対してクラスを設定することができます。 「.クラス」と指定すると、 そのクラスを指定したすべての要素に対してスタイルを設定することができます。 リンクの設定なので、 通常「要素名」のところは 「a」になります。 クラス名に使える文字には、次の制限があります。
HTMLファイルでの利用設定したクラスを使用するには、 HTMLファイルで次のように設定します。#spandel <要素名 class="クラス名">... #spanend #spanadd a:link { color: #0000ff; background: #ffffff } #spanend #spanadd a:visited { color: #000080; background: #ffffff } #spanend #spanadd a:hover { color: #ff3300; background: #ffffff } #spanend #spanadd a:active { color: #ff0000; background: #ffffff } #spanend クラスの利用例(1)たとえば、最初に説明した「段落」の説明では、 次のようにクラスを設定することができます。#spanend #spandel p.normal { #spanend color: #000000; background: #ffffff; #spandel } #spanend #spandel p.notice { #spanend color: #000000; background: #ffff66; #spandel } #spanend #spandel p.one-pt { #spanend color: #ff0000; background: #ffffff; #spandel } #spanend #spandelHTML文書では、次のように利用することができます。 #spanend #spandel <p class="normal"> #spanend #spandel それでは、見出しのタグについて説明しましょう。<br> #spanend #spandel ... #spanend #spandel </p> #spanend #spandel <p class="notice"> #spanend #spandel 次のことに注意しましょう。<br> #spanend #spandel ... #spanend #spandel </p> #spanend #spandel <p class="one-pt"> #spanend #spandel ワンポイント: h1〜h6の使い方 #spanend #spandel ... #spanend #spandel </p> #spanend #spandel クラスの利用例(1)また、 複数の要素で同じクラスを利用することもできます。 たとえば、特定のタグを指定しない、次のようなクラスを設定しておきます。#spanend #spandel .example { #spanend color: #000000; background: #ffff66; #spandel } #spanend #spandelそしてHTML文書では、次のようにして、 h2要素とp要素に設定したクラスを利用することができます。 #spanend #spandel <h2 class="example">見出しのタグの例</h2> #spanend #spandel <p class="example"> #spanend #spandel まず、見出し1を利用してみましょう。<br> #spanend #spandel ... #spanend #spandel </p> #spanend #spandel 次へ進んでください。 |