div要素

div要素はひとつのまとまり(グループ)を定義し、要素の内容に他のブロック要素を含める事が出来ますので、見出しや段落などをグループ化することができます。また、class属性、style属性などを用いてスタイルシートと組みあわせて使用する事で文書のスタイルを有効に定義できます。

例)

スタイルシート)
div.glay_f{
width: 450px;
border: 1px solid #cdcdcd;
}
h1.back_b{
background: #f5f5dc;
}
p.back_g{
background: #eeeeee;
}

本文)
<div class="glay_f">
<h1 class="back_b">○○○○○</h1>
<p class="back_g">AAA…。</p>
<p style="background: #eeeeee;">BBB…。</p>
</div>

Internet Explorer 9.0.3
div要素 グループ化 イメージ ie9


Mozilla Firefox 8.0.1
div要素 グループ化 イメージ ff8

※div要素にwidth: 450px;、border: 1px solid #cdcdcd;を指定しています。


text-alignプロパティ

div要素の内容の水平方向の表示位置を指定します

値)

<div style="text-align: center;">
<h2>テキストAAAaaa</h2>
<p>テキストBBBbbb</p>
<p>テキストCCCccc</p>
</div>

Internet Explorer 9.0.3
div要素 text-alignプロパティ イメージ ie9


Mozilla Firefox 8.0.1
div要素 text-alignプロパティ イメージ ff8

※div要素にwidth: 450px;、border: 1px solid #cdcdcd;を指定しています。

text-alignプロパティ


span要素

span要素はdiv要素と同じくひとつのまとまりを定義します。div要素がブロックレベルでのグループ化を行うのに対し、span要素はインライン(行内)を定義します。

また、div要素と同様に、class属性、style属性を用いてスタイルシートと組みあわせて使用する事で文書のスタイルを有効に定義できます。

例)

<p>テキスト<span style="color: #ff0000;">AAA</span>aaa</p>

Internet Explorer 9.0.3
div要素 align属性 イメージ ie9


Mozilla Firefox 8.0.1
div要素 align属性 イメージ ff8

※div要素にwidth: 450px;、border: 1px solid #cdcdcd;を指定しています。


ページトップへ戻る



RAWで撮ろうLife with a cameraLife with a camera 2


inserted by FC2 system