<div>病と嫌<div>潔癖症。

テーマ

CSSが普及するにつれて現われ増えたとされる<div>病と、それを批判してきた結果陥る事になる嫌<div>潔癖症について。

<div>病とは。

<div>病とは、その名の通りHTML文書マークアップの際に<div>要素を濫用する者を、病に準えた(なぞらえた)言葉です。

何時誰がどのように定義したかは詳らかではありませんが、平成14年には既にそのような呼称があったようです(参考文献 1)。

具体的な<div>病の例。

  • 以下のマークアップ例は、意図的にかなり酷いマークアップとしましたので、閲覧者の皆様は決して真似をしないでください！ と言いますか、書いていて頭が痛くなってきた…。
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
        <meta http-equiv="content-style-type" content="text/css" />
        <title>×××のウェブサイト</title>
        <link rel="start" href="http://www.XXX.uso800.uso/" />
        <link rel="stylesheet" href="style/myStyle.css" />
        <link rev="made" href="mailto;usomail@XXX.uso800.uso" />
        </head>

    <body>
        <div class="green bold centered size-LL">×××のウェブサイト</div>
        <div><span class="red bold">×××のウェブサイト</span>にようこそ。</div>
        <div>このサイトは、HTMLを習いたての×××が作った、コンテンツが沢山あるサイトです。</div>

        <div class="green bold size-L">管理人について</div>
        <div class="skyblue-frame">
            <div><span class="green bold">名前</span> ×××</div>
            <div><span class="green bold">出身</span> 千葉県</div>
            <div><span class="green bold">血液型</span> B</div>
            <div><span class="green bold">思想</span> 自称中道左派</div>
            <div><span class="green bold">俺の嫁</span> 堀北真希ちゃん</div>
            </div>

        <div class="green bold size-L">×××のウェブサイト・目次</div>
        <div class="skyblue-frame">
            <div><a href="illustrations/index.html">管理人が描いたイラスト(お仕事募集中！)</a></div>
            <div><a href="novels/index.html">管理人が書いたショートストーリー(出版社募集中！)</a></div>
            <div><a href="http://blogs.uso800.uso/XXX/">管理人の日記</a></div>
            <div><a href="http://bbs.uso800.uso/XXX/">管理人の掲示板</a></div>
            <div><a href="link.html">リンク</a></div>
            </div>

        <div class="gray-upperline italic">Copyright (c) 2010 XXX <a href="mailto:usomail@XXX.uso800.uso">usomail@XXX.uso800.uso</a></div>
        </body>
    </html>
  • 具体的な<div>病の例はここまで

つまり、基本として、

  • 何でもかんでもブロックレヴェル要素は<div>要素としてしまう(<a>要素以外のマークアップを伴うインライン要素はやはり何でもかんでも<span>要素だ)。
  • 特に、見出しも<h○>要素とせず<div>要素、段落も<div>要素、素直にリストにすべき箇所まで<div>要素の入れ子。

と言うマークアップをする者を<div>病と呼ぶ訳です。

また、本質と関係があるかどうか分かりませんが、

  • クラス名やIDはスタイルに絡んだものが多い。
  • (この例では使いませんでしたが)クラス名やIDで用いるスタイルに関連する語句を日本語のローマ字にしている。

と言う傾向もあるようです。

何故<div>病になるのか。

参考文献 1に詳しく書かれておりますが、<div>病とは初心者がCSSでの表現効果を追求する事ばかりに力を入れ、正しいマークアップを学ぶ事を怠った結果と言えます。

その他にも、以下に該当する方は<div>病に陥る傾向が高くなります。

HTMLを正しく学んでいない。

HTMLをブラウザに命令するプログラム言語と言うのは論外ですが、表示させる事ばかりに主眼を置いて学ぼうとすると、マークアップも歪(いびつ)なものになってしまいます。

一番良いのはHTMLの仕様書を読んでそれを理解する事ですが、それが無理でも、先ずは基本的なマークアップを一通り学ぶべきです。

逆に一番良くないのはタグ講座と名乗る入門サイトで学ぶ事で、この名前が付いているHTML入門サイトはその大半がHTMLを正しく学べないサイトです。

  • この名前の付いたサイトの大半がこう表示したいときにはこう書けと言うやり方を採るからです。しかし、HTMLは表示を指定する言語ではないので、根本的に間違っていると言えるのです。

文法チェッカでの結果に汲々とする。

実は、制作者はHTML入門に於いて、文法チェッカについては余り詳しく書かないようにしております。

それは、文法チェッカは文法が合っているか否かだけをチェック出来れば良いと思っていると言うのもあるのですが、本来の使い方とは思えないような使い方がされていて、それが悪影響をもたらす恐れがあると考えているからです。

ある有名な文法チェッカは、点数形式で結果が出されるのですが、その文法チェッカでの点数が文法が合っているか否か以上に重視される場合があります。その結果点数の高低でマークアップの優劣を決めるような風潮が見られるようになりました。

しかし、文法チェッカは所詮コンピュータプログラムであり、文法チェッカが出す点数を維持しつつもHTMLのあり方に反したマークアップを行う事は幾らでも可能です。

高得点を取る事ばかりに汲々とし、その結果好ましいマークアップについて考察する事を忘れれば、<div>病のような形になって現われるのは至極当然の事です。

そう、言ってみれば、論語知らずの論語読みならぬ文法チェッカ知らずの文法チェッカ使いが<div>病に陥るのです。

勿論、正しいHTMLを学ばせ、その上で文法チェッカの指導を受けると言うのであれば文法チェッカはHTMLの学習に非常に有用なものとなります。

ですが、そう言ったプロセスを尽くすっ飛ばして文法チェッカの点数でマークアップの良し悪しを論じて修正を求めるようなやり方は百害あって一利なし、初心者を間違った方向に導き兼ねない極めて危険なやり方であると言えます。

拡大解釈されてきた<div>病。

具体的な<div>病の例で挙げたHTMLのマークアップは、きちんとHTMLを学んだ方であれば誰でも酷いマークアップだと思うでしょう。

問題点として、

と言ったところが挙げられるでしょう。

ですが、これらのマークアップを正しく施していても、ブロックのスタイルコンテナとして<div>要素を多用していると言うだけで、<div>病だの<div>まみれだのと言い出す者まで現れるようになってしまいました。

そう、まさに嫌<div>潔癖症患者と呼ぶに相応しい者が現れるようになったのです。

<div>病が嫌<div>潔癖症を産んだ!?

嫌<div>潔癖症とは、<div>病の対極にある概念で、正当な<div>要素の使い方まで<div>病だの<div>まみれだのと罵るような者に対して、その病的振りを示すための言葉です。

このような嫌<div>潔癖症患者が現われるようになったのは、<div>病と言うのが本来正統とされるマークアップを行っていない者への批判だったのが、何時の間にか<div>要素そのものを悪いものと見るようになって、使う事を咎めるようになってしまった結果だと考えます。

しかし、HTML 4.01の仕様書には、以下のように書かれております。

DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。各々、内容が行内であるか(SPAN)ブロックレベルであるか(DIV)は定めるが、他のプレゼンテーション的語彙を示すことはない。従って著者は、この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。

確かに何の意味も持たないであろう<div>要素ですが、HTMLに任意の構造を加えるためのものとして再定義されているのです。

ですから、<div>要素に依るマークアップは意味がないと言われるものの、文書作成者が意味を持たせたマークアップに用いる事については仕様書を見る限り咎めるべきものと言えません。

しかし、<div>要素がスタイルコンテナとして用いる事ばかりが目立ってきた事もあってか、<div>要素は<center>要素などと同様忌むべき物理マークアップのための要素とされてしまい、何時しか仕様に沿った使い方をしているのに<div>病だの<div>まみれだのと罵られる事となったのです。

制作者は、そのように正当な<div>要素の使い方まで批判する者は、もはや嫌<div>潔癖症患者だと断言します。

<div>病にも嫌<div>潔癖症にもならないようにするには。

<div>要素を濫用する<div>病にしても、<div>要素の使用を殊の他忌み嫌う嫌<div>潔癖症にしても、程度を過ぎれば病的に見えるものです。

要するに、両極端な思想はどちらであれ程度を過ぎれば病的であると言う事です。

そこで、<div>病にも嫌<div>潔癖症にもならないようなマークアップの考えを述べておきます。

私は<div>病じゃないと言い切れるマークアップ。

以下のようなマークアップ作法を行っている方は、他者からお前は<div>病だと言われたとしても、そう言うあなたこそ嫌<div>潔癖症なんじゃないですか？と返せるようになります。

文書の全ての要素を基本的なブロックレヴェル要素に含める

基本的なブロックレヴェル要素とは、いろいろな意見があるかも知れませんが、

これだけ使えれば充分でしょう。

文書の全てのテキストが、これらのいずれかに収まるようにマークアップしているのであれば、その上で<div>要素を幾ら用いようとも問題はない筈です。

CSSでのスタイル効果を当てにしない

文書作りの基本中の基本ですが、意外に見落とされているものです。

CSSでのスタイル効果に依り特別なブロックと見てもらえるようにしたところで、CSSに対応していない環境では普通のブロックと同じスタイルになってしまうので、そのように見てはもらえません。

通常の段落などと異なった特別なブロックとしたいのであれば、<div>要素とせずに、リストなどで表現するのが良いでしょう。そして、それに適切なスタイルを与えるようにすれば良いのです。

或いは、<div>要素をスタイルコンテナとして用いるのであれば、CSSを使えない環境でもプレヴューしてみて、分かり難くならない事を確認すると良いでしょう。

尚、ここで書いた事が理解出来ないのであれば、HTMLを一から学び直す事を強くお奨めします。

あなたは嫌<div>潔癖症だと呼ばれないために。

<div>病がどうのこうのと言う方は、取り敢えず、CSSが使えない環境でも問題がなければ、良しとしましょう。

  • テキストブラウザ・Lynx(リンクス)が有名ですが、最近のグラフィカルなウェブブラウザにもCSSを無効にする機能を持つものがあります。

それでも不満なら、(<div>病をどうこう言う方は)間違いなくHTML文書のソースを見ているでしょうから、ソースから<div>要素のタグを取り払っても問題がないのであれば、良しとしましょう。

そして、何よりも、HTMLの仕様書をもう一度見直してください。

少なくともブロックレヴェル要素をグループ化するために用いているのであれば問題視する必要はないのですから。