携帯便利ツールEZ-INFO

div病 

div病とかdiv厨って言葉を聞いたことがありますか？本物の病気じゃなくてHTMLでdiv要素を多用する症状のことを言うようです。

div要素はブロックレベル要素のグループ化に用いるものですが、グループ化の必要がないものまで何でもかんでもdiv要素を使っているとdiv厨と言われるのかもしれません。角丸などの複雑な見栄えを実現する為に使用するのはどうなのかわかりません。

CSS切替実現の為に2カラム/3カラムデザインと出来るようにdivを使っていたのですが、余計なところまでdivを使用していたりでこの病にかかっているのかもしれないと思い始めました。
そこでdivを使う必要のないところは廃する事が出来るようにCSSに手を加えてみました。まだ不要な部分はあるのかもしれませんが、その辺はもう少しHTMLの勉強を進めながらということで。

で、どんな改正をしたかというとヘッダーを

<div id="header">
 <h1>タイトル</h1>
 <div class="access">ここにサイトマップと問い合わせ</div>
 <div class="searchform">ここに検索フォーム</div>
 <div class="selectcss">ここにCSS切替画像</div>
 <div id="tabmenu">
  <ul>
    <li>メニュー<li>
    <li>メニュー<li>
    <li>メニュー<li>
  </ul>
 </div>
 <div id="tabline">
  <div id="breadcrumb">ここにパンくずリスト</div>
 </div>
</div>

こんな感じでdivりまくってたのを

<div id="header">
 <h1>タイトル</h1>
 <p class="access">ここにサイトマップと問い合わせ</p>
 <form ***><p class="access">ここに検索フォーム</p></form>
 <p class="access">ここにCSS切替画像</p>
 <ul>
   <li>メニュー<li>
   <li>メニュー<li>
   <li>メニュー<li>
 </ul>
 <p class="breadcrumb">ここにパンくずリスト</p>
</div>

のようにしました。改正前のdiv.access/searchform/selectcssは単に文字を右に寄せるだけのものだったのでp.accessに統一しました。本文中のはてなブックマークのブックマーク数表示もp.accessに揃えました。この場合classを付けずにpとしてdiv#header pに右に寄せるスタイル指定をした方が良いのかな？よくわかりません。
div#tabmenuのスタイル指定と同等のものをdiv#header ul/li辺りに付けてdiv#tablineをp.breadcrumbに移行しました。

こんな書き方で本当に正しいのかは今後勉強しながら確かめたいと思います。HTMLもCSSも面白いですね。

現在はさらに改正して、パンくずリスト以外はリストでマークアップするようにしました。パンくずリストなんだからこれもリストでマークアップしたいのですが、プラグインの改造が難しくて断念しております。

関連してそうな記事

タグ 

ナビゲーション

同カテゴリ

古い記事　:
新しい記事:

時系列

古い記事　:
新しい記事:

このドキュメントについて

メタ情報

カテゴリ
Web制作
トラックバックURI
http://www.ezinfo.jp/doc/2006/10/31/html-812.html/trackback

コメントは管理者の承認後に表示、トラックバックは言及リンクのある場合表示されます。

トラックバック/コメント一覧

div病へのコメント(2)

  1. Adobeがdiv病の元?:
    2007.12.11. at 1:29:59

    [...] – 教えて！goo caramel*vanilla – “DIV 病”　という病 div病 [...]

  2. [Web Design] Periodic Table of the Elements – サイト内で使われているタグを調べる事のできるウェブアプリ - mBlog:
    2010.8.23. at 22:21:27

    [...] が分かります。メディア系は下の方にやや隔離されて表示されます。各タグの上にマウスを持って行くと、実際に何個使われているかも分かるので、div病などの調査にもイイですねこれ。 [...]

コメントフォーム