HTML CSS 講座 トップページへ

ホームページ作成 いまさらHTML,CSS講座
|  Home  |  ホームページ作成の知識  |  HTML 講座  |  HTML TABLE 講座  |  スタイルシート(CSS) 講座  |  携帯サイト 作成 講座  |
[HTMLテンプレートカテゴリ] [未分類カテゴリ]

いまさらHTML,CSS講座トップ > HTML4.01 講座インデックス > div要素
様々なブックマークサービスがご利用頂けます。

ブロックレベル要素 div要素

div要素は、p要素が『段落』を定義する要素に対して、『ひとつのまとまり』を定義します。
『ひとつのまとまり』(グループ化)を定義する要素は『段落』を定義するp要素とは異なり、ブロック要素の中に他のブロック要素を含める事が出来ます。
■div 要素
ソース  基本ソース
<div>
ブラウザが正しい表現が行えるように、〜・・・云々
</div>
<div>
各要素が持つ意味に沿った正しいMarkupで・・・云々
</div>
<div>
文書を作成する事が大切です。・・・云々
</div>
表示  表　示
ブラウザが正しい表現が行えるように、〜・・・云々
各要素が持つ意味に沿った正しいMarkupで・・・云々
文書を作成する事が大切です。・・・云々
※上記の表示は、フォントサイズ：12pxが設定してあります。
ポイント  P要素とは異なり、前後の１行空きはありません。
ソース  ソース
<div align="center">
<p>ブラウザが正しい表現が行えるように、〜・・・云々<p>
</div>
表示  表　示

ブラウザが正しい表現が行えるように、〜・・・云々

※上記の表示は、フォントサイズ：12pxが設定してあります。
ポイント 他のブロック要素を内に含める事が出来ます。

マーク div要素内のテキストや画像の水平方向の指定
ソース  ソース
<div align="center">ブラウザが正しい表現が行えるように、〜・・・云々</div>
表示  表　示
ブラウザが正しい表現が行えるように、〜・・・云々
align属性で指定します。
  • left  (インライン内容を左揃えに表示)
  • center  (インライン内容を中央揃えに表示)
  • right  (インライン内容を右揃えに表示)
ポイント  align属性は、CSSの text-alignプロパティで代替指定する事が推奨されています。
マーク スタイルシートでの様々な指定方法
■ <head>要素に記述する場合

<style type="text/css">
<!--
div { color : red ; font-size : 12px ; text-align : center ; }
-->
</style>

div要素内を、フォントカラー：赤、フォントサイズ：12px、中央揃えと指定しました。またclass指定も出来ます。
⇒ colorプロパティ　fontプロパティ
■ div要素に、style属性で指定する場合
ソース  ソース
<div style="color : red ; font-size : 12px ; text-align : center ;">フォントカラー：赤、サイズ：12px、中央揃え</div>
表示  表　示
フォントカラー：赤、サイズ：12px、中央揃え

(C) いまさらHTML CSS講座 2002-2008 All right reserved