div・span要素を使った設定div要素とspan要素の機能div要素を使うと、 複数の要素をまとめてグループ化することができます。 また、クラスやIDを使えば、独自の意味をつけることができます。
body> div要素は、ブロックレベル要素なので、 ひとつのブロックを作ることができます。#spanend <h1>第1章</h1> <div class="section" id="sec1"> <h2>第1節</h2> <p>...</p> <p>...</p> </div> <div class="section" id="sec2> <h2>第2節</h2> <p>...</p> <p>...</p> </div> #spandel </body> #spanend #spandel </pre> #spanend #spanadd ... #spanend #spanaddspan要素を使うと、 文章中に、HTMLには用意されていない、 独自の意味づけをすることができます。 span要素は、インラインレベル要素なので、 指定した部分は改行されません。 #spanend #spanadd <p> #spanend #spanadd これからは<span class="note">Webカメラによる授業参観<span>ができるかもしれません。 #spanend #spanadd </p> #spanend #spanadd クラスを使った設定「クラス」を使えば、 ひとつの要素に複数の意味づけをしたり、 複数の要素で同じ意味づけを設定したりできます。 クラスを設定するときには、次のようにします。要素名.クラス名 { ... } .クラス名 { ... } /pre> div・span要素とクラス・IDの組み合わせ上の例にはすでに書かれていますが、 div要素やspan要素にクラスやIDを指定することで、 HTMLの構成要素として定義されていない(定義できない) 部分に対しても、スタイルを設定することができます。 div要素にクラスやIDを指定すれば、 複数の要素に対してまとめてスタイルを設定することができます。 span要素にクラスやIDを指定すれば、 特定の部分にだけスタイルを設定することができます。 たとえば、上記のdiv要素とspanをを使った例に、 次のようなスタイルを指定することができます。#spanend #spanadd .section { #spanend background: #ffeeee; #spanadd } #spanend #spanadd #sec1 { #spanend color: #ff0000; #spanadd } #spanend #spanadd #sec2 { #spanend color: #ff00ff; #spanadd } #spanend #spanadd .note { #spanend color: #ff0000; background: #ffff00; #spanadd } #spanend #spanadd 次へ進んでください。 }} |