*クラスと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) |