クラスとdiv・span要素の利用クラスの利用div要素とspan要素の機能div要素を使うと、 複数の要素をまとめてグループ化することができます。 また、クラスと組み合わせれば、オリジナルの要素(意味づけ)ができます。 div要素は、ブロックレベル要素なので、 ひとつのブロックを作ることができます。#spanend #spandel <h1>第1章</h1> #spanend #spanadd **クラスとは [#w75794a1] #spanend #spanadd 「クラス」 (class) を使えば、 #spanend #spanadd 同じ要素(タグ)に、それぞれ異なるデザインを設定することができます。 #spanend #spandel <div class="section1"> #spanend #spandel <h2>第1節</h2> #spanend #spandel <p>...</p> #spanend #spandel <p>...</p> #spanend #spandel </div> #spanend #spanadd たとえば、「段落」という要素(p要素)を、 #spanend #spanadd 「普通」の段落、 #spanend #spanadd 「注意」用の段落、 #spanend #spanadd 「ワンポイント」用の段落のように、 #spanend #spanadd 目的や役割別にデザインを使い分けたい場合を考えてみましょう。 #spanend #spandel <div class="section2> #spanend #spandel <h2>第2節</h2> #spanend #spandel <p>...</p> #spanend #spandel <p>...</p> #spanend #spandel </div> #spanend #spanadd このように、ひとつの要素に複数のデザインを設定したい場合に、 #spanend #spanadd クラスを利用します。 #spanend -クラス名「normal」:「普通」の段落用デザイン --文字色は「黒」、背景色は「白」 -クラス名「notice」:「注意」の段落用デザイン --文字色は「黒」、背景色は「薄い黄色」 -クラス名「one-pt」:「ワンポイント」の段落用デザイン --文字色は「赤」、背景色は「白」 #spandel ... #spanend #spandelspan要素を使うと、 文章中に、HTMLには用意されていない、 オリジナルの要素(意味づけ)ができます。 span要素は、インラインレベル要素なので、 指定した部分は改行されません。 このように、HTMLやCSSでは、 あらかじめ用意されている構成要素に、 「特定の役割」や 「意味づけ」 を追加することができます。 それが、「クラス」という考え方です。 クラスを使った設定「クラス」を使うと、 特定の要素やその他の要素に、 特定のスタイルを設定することができます。CSSファイルでの設定クラスを設定するときには、 CSSファイルで次のように設定します。#spandel <p> #spanend #spandel これからは<span class="note">Webカメラによる授業参観<span>ができるかもしれません。 #spanend #spandel </p> #spanend #spanadd 要素名.クラス名 { ... } #spanend #spanadd .クラス名 { ... } #spanend「要素名.クラス」と指定すると、 指定した要素に対してクラスを設定することができます。 「.クラス」と指定すると、 そのクラスを指定したすべての要素に対してスタイルを設定することができます。 div・span要素とクラスの組み合わせ上の例にはすでに書かれていますが、 div要素やspan要素にクラスを指定することで、 HTMLの構成要素として定義されていない(定義できない) 部分に対しても、スタイルを設定することができます。 クラス名に使える文字には、次の制限があります。
HTMLファイルでの利用設定したクラスを使用するには、 HTMLファイルで次のように設定します。#spandel .section1 { #spanend background: #ffeeee; color: #ff0000; #spanadd <要素名 class="クラス名">... #spanend #spanadd クラスの利用例(1)たとえば、最初に説明した「段落」の説明では、 次のようにクラスを設定することができます。#spanend #spanadd p.normal { #spanend color: #000000; background: #ffffff; } #spandel .section2 { #spanend background: #ffeeee; color: #ff00ff; #spanadd p.notice { #spanend color: #000000; background: #ffff66; } #spandel .note { #spanend #spanadd p.one-pt { #spanend color: #ff0000; background: #ffff00; background: #ffffff; }HTML文書では、次のように利用することができます。 #spanend #spanadd <p class="normal"> #spanend #spanadd それでは、見出しのタグについて説明しましょう。<br> #spanend #spanadd ... #spanend #spanadd </p> #spanend #spanadd <p class="notice"> #spanend #spanadd 次のことに注意しましょう。<br> #spanend #spanadd ... #spanend #spanadd </p> #spanend #spanadd <p class="one-pt"> #spanend #spanadd ワンポイント: h1〜h6の使い方 #spanend #spanadd ... #spanend #spanadd </p> #spanend #spanadd クラスの利用例(1)また、 複数の要素で同じクラスを利用することもできます。 たとえば、特定のタグを指定しない、次のようなクラスを設定しておきます。#spanend #spanadd .example { #spanend color: #000000; background: #ffff66; #spanadd } #spanend #spanaddそしてHTML文書では、次のようにして、 h2要素とp要素に設定したクラスを利用することができます。 #spanend #spanadd <h2 class="example">見出しのタグの例</h2> #spanend #spanadd <p class="example"> #spanend #spanadd まず、見出し1を利用してみましょう。<br> #spanend #spanadd ... #spanend #spanadd </p> #spanend #spanadd 次へ進んでください。 |