KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2005/7th/div_span のバックアップ(No.2)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2005/7th/div_span へ行く。
  • 1 (2007-02-24 (土) 07:05:44)
  • 2 (2007-02-24 (土) 07:10:26)

div・span要素を使った設定

div要素とspan要素の機能

div要素を使うと、 複数の要素をまとめてグループ化することができます。 また、クラスやIDを使えば、独自の意味をつけることができます。 div要素は、ブロックレベル要素なので、 ひとつのブロックを作ることができます。

<h1>第1章</h1>

<div class="section" id="sec1">
<h2>第１節</h2>
<p>...</p>
<p>...</p>
</div>

<div class="section" id="sec2>
<h2>第２節</h2>
<p>...</p>
<p>...</p>
</div>

...
</pre>

span要素を使うと、
文章中に、HTMLには用意されていない、
独自の意味づけをすることができます。
span要素は、インラインレベル要素なので、
指定した部分は改行されません。
#pre(novervatim){{
<p>
これからは<span class="note">Webカメラによる授業参観<span>ができるかもしれません。
</p>
</pre>


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

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

たとえば、上記のdiv要素とspanをを使った例に、
次のようなスタイルを指定することができます。
#pre(novervatim){{
.section {
  background: #ffeeee;
}
#sec1 {
  color: #ff0000;
}
#sec2 {
  color: #ff00ff;
}
.note {
  color: #ff0000;
  background: #ffff00;
}
</pre>




次へ進んでください。
----
#navi2(Lecture/InfoDesignB2005/7th,prev,toc,next)