TITLE:クラスとdiv・span要素の利用
*クラスとdiv・span要素の利用 [#m1a64293]
**div要素とspan要素の機能 [#o5ab8c3f]
''div''要素を使うと、
複数の要素をまとめてグループ化することができます。
また、クラスと組み合わせれば、オリジナルの要素(意味づけ)ができます。
div要素は、''ブロックレベル要素''なので、
ひとつのブロックを作ることができます。
#pre(novervatim){{
<h1>第1章</h1>
COLOR(red):<div class="section1">
<h2>第1節</h2>
<p>...</p>
<p>...</p>
COLOR(red):</div>
COLOR(red):<div class="section2>
<h2>第2節</h2>
<p>...</p>
<p>...</p>
COLOR(red):</div>
...
}}
''span''要素を使うと、
文章中に、HTMLには用意されていない、
オリジナルの要素(意味づけ)ができます。
span要素は、''インラインレベル要素''なので、
指定した部分は改行されません。
#pre(novervatim){{
<p>
これからはCOLOR(red):<span class="note">COLOR(black):Webカメラによる授業参観COLOR(red):<span>COLOR(black):ができるかもしれません。
</p>
}}
**div・span要素とクラスの組み合わせ [#v6c355a5]
上の例にはすでに書かれていますが、
div要素やspan要素にクラスを指定することで、
HTMLの構成要素として定義されていない(定義できない)
部分に対しても、スタイルを設定することができます。
div要素にクラスを指定すれば、
複数の要素に対してまとめてスタイルを設定することができます。
span要素にクラスを指定すれば、
特定の部分にだけスタイルを設定することができます。
たとえば、上記のdiv要素とspanをを使った例に、
次のようなスタイルを指定することができます。
#pre(novervatim){{
COLOR(blue):.section1 COLOR(red):{
background: #ffeeee;
color: #ff0000;
COLOR(red):}
COLOR(blue):.section2 COLOR(red):{
background: #ffeeee;
color: #ff00ff;
COLOR(red):}
COLOR(blue):.note COLOR(red):{
color: #ff0000;
background: #ffff00;
COLOR(red):}
}}
&br;
&navi2(Lecture/JouhouC2007/9th0th,next);進んでください。
----
#navi2(Lecture/JouhouC2007/9th,prev,toc,next)
|