KAWANO's PukiWiki Plus! - クラスとdiv・span要素の利用

クラスとdiv・span要素の利用

div要素とspan要素の機能

div要素を使うと、 複数の要素をまとめてグループ化することができます。 また、クラスと組み合わせれば、オリジナルの要素（意味づけ）ができます。 div要素は、ブロックレベル要素なので、 ひとつのブロックを作ることができます。

<h1>第1章</h1>

<div class="section1">
<h2>第１節</h2>
<p>...</p>
<p>...</p>
</div>

<div class="section2>
<h2>第２節</h2>
<p>...</p>
<p>...</p>
</div>

...

span要素を使うと、 文章中に、HTMLには用意されていない、 オリジナルの要素（意味づけ）ができます。 span要素は、インラインレベル要素なので、 指定した部分は改行されません。

<p>
これからは<span class="note">Webカメラによる授業参観<span>ができるかもしれません。
</p>

div・span要素とクラスの組み合わせ

上の例にはすでに書かれていますが、 div要素やspan要素にクラスを指定することで、 HTMLの構成要素として定義されていない（定義できない） 部分に対しても、スタイルを設定することができます。

div要素にクラスを指定すれば、 複数の要素に対してまとめてスタイルを設定することができます。 span要素にクラスを指定すれば、 特定の部分にだけスタイルを設定することができます。

たとえば、上記のdiv要素とspanをを使った例に、 次のようなスタイルを指定することができます。

.section1 {
  background: #ffeeee;
  color: #ff0000;
}
.section2 {
  background: #ffeeee;
  color: #ff00ff;
}
.note {
  color: #ff0000;
  background: #ffff00;
}

次へ進んでください。