制作者の活動(PR)。

アイドル女優・堀北真希ちゃんにうさぎの耳を付けたら可愛いだろうなと思って作った制作者の創作キャラクタ
主な作品

制作者作成のイラストと動画作品(例)

<div>要素(グループ化されたブロックレヴェル要素)。

グループ化されたブロックレヴェル要素である<div>要素についての解説です。

<div>要素(グループ化されたブロックレヴェル要素)・目次。

<div>要素とは。

<div>要素とは、グループ化されたブロックレヴェル要素、言い換えれば特別な意味を持たないブロックレヴェル要素です。

主に以下のような使い方があります。

<p>要素と他のブロックレヴェル要素を論理的な段落として一纏めにする

現行のHTMLに於いては、段落(<p>要素)は内容としてリスト(<ul>要素, <ol>要素及び<dl>要素)など他のブロックレヴェル要素を入れる事は出来ません。

このため、他のブロックレヴェル要素が含まれる論理的な段落を纏めて<div>要素としてマークアップする事が出来ます。

外国語で書かれたブロックを一纏めにする

現行のHTMLの仕様では、lang属性/xml:lang属性を当てる事で文書のネイティヴ言語と異なる言語を記述する事が出来ます。

ただ、そのような段落などのブロックが連続する場合には、それらを一纏めに<div>要素としてマークアップし、その<div>要素にlang属性/xml:lang属性を当てると言う方法もあります。

特に意味のあるブロックレヴェル要素を一纏めにする

注釈, 例文, 訳文など、HTMLで定義されていないブロックレヴェル要素の集まりを<div>要素としてマークアップし、その<div>要素にclass属性を当てる事で当該要素の意図を明示出来ます。

尚、この他にも汎用のブロックレヴェル要素として利用する事も考えられますが、このような利用方法はしばしば好ましくないものとされます。

<div>要素を利用出来るHTML文書型。

<div>要素は、以下の文書型で利用出来ます。

<div>要素が含まれるXHTML モジュール。

<div>要素はテキストモジュールに属します。

<div>要素の扱い。

<div>要素はブロックレヴェル要素です。

<div>要素の内容はインライン要素・ブロックレヴェル要素のいずれも可能です。

<div>要素の属性。

<div>要素には、以下の属性が定められております。

共通属性

<div>要素で使える共通属性には

があります。

以下に挙げる<div>要素の属性はHTML 3.2, トランジッショナル文書型及びフレームセット文書型でのみ利用出来る属性で、排除勧告が出されております。

align属性

内容の配置を指定します。

値には以下の四つがあります。

left
左に寄せます。
right
右に寄せます。
center
中央に寄せます。
justify
両端に寄せます。

この属性が附与された場合、内容はブロックレヴェル要素でもインライン要素でもこの属性値に従って配置されます。

<div>要素に関する注意事項。

<div>の多用は好ましくないと言う意見があります。

<div>要素を多用する事をdivまみれだのdiv病などと言って揶揄する者がいます。

段落構造になっているブロックは<p>要素、リスト構造になっているブロックは<ul>要素などのリスト要素と言うように、HTML文書に於けるブロックレヴェル要素は何らかの適切なブロックレヴェル要素としてマークアップする事が可能であり、従って<div>要素を利用する必然性は殆ど無いと考えられるからです。

また、スタイルを当てると言う目的だけで<div>要素を多用する例もありますが、これもマークアップの観念からは好ましいものと言えないと言う考えもあります(物理マークアップと同じ発想だからです)。

しかし、制作者は<div>要素を使うなとまでは言えません。

ブロックレヴェル要素のグループ化と言う観点から考えるなら、<div>要素の直下にはブロックレヴェル要素のみが入るようにすれば良いでしょう。

以上の事から、制作者は個人的に<div>要素としてマークアップする際には、lang属性/xml:lang属性またはclass属性のどちらかは必ず附与する事をお勧めしております。

ISO-HTMLでの制約。

ISO-HTMLにおいては、以下のような制約があります。

<h○>要素は<div>要素の中には入れられません
<div>要素に限らず、<h○>要素は如何なるブロックレヴェル要素にも入れられません。従って、<h○>要素をグループ化する事は出来ません。
<address>要素は、必ず<div>要素の直下に入れなければなりません
逆に<address>要素は例え一つしかなくても<div>要素でグループ化しなくてはなりません。

<div>要素の例。

複数のブロックレヴェルを論理段落としてグループ化する
<div class="logPara">
    <p>初めてHTMLを学ぶという方は、取り敢えず、</p>
    <ul>
        <li>題名</li>
        <li>見出し</li>
        <li>段落</li>
        <li>アンカー</li>
        </ul>
    <p>をマスターするようにしましょう。</p>
    </div>

関連項目。

<span>要素
グループ化されたインライン要素
<center>要素
センタリング(排除勧告要素)

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com