HTML文書は、テキスト内容を"見出し要素" "段落要素" "リスト要素" "リンク要素(ハイパーリンク)"などの"要素"とする考え方を基に、それぞれの要素をタグで囲む(マークアップにより書き表す)文書構造になっています。
■ブロックレベル要素とは・・・?
ひとつのブロック(まとまり)から構成される要素の名称です。 ブロックレベル要素の前後は、要素特性により、段落または改行されます。
■ブロックレベル要素群(abc順)
<address> <blockquote> <center> <div> <dl>
<fieldset> <form> <h1〜h6> <hr> <noframes> <noscript>
<ol> <p> <pre> <table> <ul>
▼
★ 汎用ブロックレベル要素 <div>タグ
★ div は 「Division」=分割、区分の略
<div>〜<div>タグは、HTMLの定義上、特定の意味はないようです。 <div>〜<div>タグで挟まれた前後は、要素特性により改行されます。
divタグ以外の各種ブロックレベル要素は、<要素>〜</要素>の中に、他の要素を組み込むことはできませんが、<div>〜<div>タグは可能です。
あらゆる要素を<div>〜<div>タグ内に格納できる万能なタグと言う位置付けから、divタグは汎用ブロックレベル要素と言われる由縁とも思われます。
div要素の構文にテキストの位置指定[align属性]:は、HTML4.01非推奨
>> スタイルシート推奨 >> 後述
●先ずはdiv要素との比較作例です。 p要素で記述した場合
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。
◇ソース表示
<p>未知の苦html解道</p>
<p>html・css・javascript・cgiの覚え書きサイトです。</p>
●p要素をdiv要素で記述した場合1
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。
◇ソース表示
<div>未知の苦html解道</div>
<div>html・css・javascript・cgiの覚え書きサイトです。</div>
●p要素をdiv要素で記述した場合 2 ・・・段落を目的に改行要素<br>記述
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。
◇ソース表示
<div>未知の苦HTML解道</div> <br>
<div>HTML・CSS・Javascript・CGIの覚え書きサイトです。</div>
● 応用 ・・・div要素とp要素に書き分けた場合
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。
◇ソース表示
<div>未知の苦HTML解道</div>
<p>HTML・CSS・Javascript・CGIの覚え書きサイトです。</p>
次のように記述しても同等の結果が得られます。
<div>未知の苦HTML解道
<p>HTML・CSS・Javascript・CGIの覚え書きサイトです。</p>
</div>
▼
テキストの位置指定をする場合、[align属性]とその値の記述は、HTML定義「HTML4.01 Transitional」=非推奨要素属性のため、スタイルシートの設定を推奨しています。
■Ddivに挟まれたテキストの位置指定 [text-align属性]
div要素+スタイルシートを直接記述(インラインスタイル)の場合
左揃え style="text-align:left;"
センタリング style="text-align:center;"
右揃え style="text-align:right;"
左揃えの例 ▼
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。
センタリングの例 ▼
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。
右揃えの例 ▼
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。
▼
※注:要素名とSTYLE属性の間に半角スペース必須
|←←←←←←←←←← 要 素 →→→→→→→→→→| |
↓要素名 div |
↓要素内容 | |
<div style="text-align:center;">未知の苦HTML..</div> |
|←←←←属 性→→→→| | | |
|←←← 値→→→→| | | |
段落要素pタグ内にtable要素、あるいは、見出し要素などを挟むと、文法違反になりますが、div要素内であれば問題ありません。
ノーグッドの例・・・"段落要素間に見出し要素"を挟んだタグの記述。
▼
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。
××× 上の作例の場合、次のようなタグの記述は間違い ×××
<p>
<h4>未知の苦HTML解道</h4>
HTML・CSS・Javascript・CGIの覚え書きサイトです。
</p>
▼
Another HTML-lintの文法検証では、次のように警告されます。
<h4>の前に</p>が省略されているとみなします。
<p>と</p>の間が空です。
</p>に対する開始タグ<p>が見つかりません。
▼
○○○ div要素であれば問題ありません ○○○
未知の苦HTML解道
HTML・CSS・Javascript・CGIの覚え書きサイトです。
◇ソース表示
<div>
<h4>未知の苦HTML解道</h4>
HTML・CSS・Javascript・CGIの覚え書きサイトです。
</div>
■ブロックレベル要素とインラインレベル要素
The Web KANZAKI様 TOP | やや詳しい目次 | インターネットやコンピュータの話 | HTMLの説明 >> 簡単なHTMLの説明 | 2文書の骨格となる基本要素 >> 文書の骨格をかたちづくる基本要素 | ブロックとインライン >> ブロックレベル要素とインライン要素
|