- September 27, 2005 1:26 AM
- Movable Type | XHTML CSS
DIV要素を使った構造の補強について。
- 弟
-
*ガチャ*
なぁなぁ兄ちゃん、ちとHTMLの参考書貸してや。
- 兄
-
お、どしたん、参考書見るなんて珍しいやん。
- 弟
-
はっはは！俺もちょっと本気で勉強したくなってんて！
- 兄
-
ほぉーええことや。ほなら壁際の本棚の1段目にHTML関連の参考書あるから、適当にもってってええよ。
- 弟
-
おー、ありがとなー。 それにしても兄ちゃんの部屋は綺麗に整理整頓されてるわー。
- 弟
-
お、これやな。ふむふむ。何やら難しそうやなぁ。
- 兄
-
HTMLの何が勉強したいん？
- 弟
-
んとな、DIV要素を使った構造の補強っていうのがなんかええみたいやねんけど、何の事かようわからんねん。
兄ちゃん暇やったら教えてや。眞鍋かをりの新しい写真集みせてあげるから。
- 兄
-
暇ちゃうけど写真集は見たいな。ちと持ってきて。
- 弟
-
あかんｗ ちゃんと俺に構造の補強っての教えてからな！それまでお預けや。
- 兄
-
偉そうやなー・・。まぁええわ。ほんならお前の部屋いこか。
- 弟
-
えー！先に写真集見るんやないやろなー！俺の部屋散らかってるしここでええって！
- 兄
-
写真集は最後に見るから。ちゃんと考えがあるねんて、いこいこ。
- 弟
-
むむむ・・・。
ツリー構造
- 兄
-
ほんま汚ったない部屋やなー。
- 弟
-
これでも俺には何がどこにあるか、ちゃーんとわかんねんで。
- 兄
-
ほなら、眞鍋かをりの写真集がほんまにあるか、読まへんから見せてみ。
- 弟
-
待ってな、えーと、確かこの洗濯物の下あたりに・・・。 *ガサゴソ ガサゴソ*
こっちやったっけなー・・・。 あれー。 あ、兄ちゃんの後ろ、そのマガジンの下にあるわ。
- 兄
-
お、あったあった。
ちゃんと整理整頓せなあかんて。洋服やら漫画が床にバラバラに置かれてるし、おまけに何やこのスペース、香水やら小物でごちゃごちゃやん。
- 弟
-
そこかっこええやろ。オトナの色気っちゅうもんあるやろ。ｗ
- 兄
-
・・・。まぁええけど、もしこの部屋がHTMLやった構造が補強されてない状態やなー。
- 弟
-
お、なんや!?この部屋がHTMLと関係するんか!?
- 兄
-
そうや。部屋の整理とHTMLの整理、つまり構造の補強は似たようなもんや。
まず先にツリー構造(木構造)と、その見方を説明するな。
- 弟
-
なんや、ツリー構造て。
- 兄
-
だからこれから説明するゆうてるやろ。
下の画像を見てみ。
これは俺の部屋にある要素をツリー構造で表したもんや。この図ではな、一番天辺にある「兄貴の部屋」をルート要素、つまり根っこ要素やな、それを元に枝葉のように俺の部屋にある各要素が繋がってるやろ。こうやって親子関係を示した図を「ツリー構造」ってゆうんや。上下ひっくり返したら１本の木に見えるやろ。
- 弟
-
おおーなんか家計図みたいやなｗ
- 兄
-
そうや、家系図とおんなじや。例えば図のルート要素になってる「兄貴の部屋」の子供はどれかわかる？
- 弟
-
「本棚」と「タンス」と「クローゼット」が子やな！そんで「本棚」の子供には「上段」「中段」「下段」って名前の子がおるわ。変な名前の三兄弟やｗ
- 兄
-
お、大丈夫そうやな。子供にあたる要素を子要素と言うんや。「本棚」「タンス」「クローゼット」からしたら、「兄貴の部屋」は親にあたる親要素やな。他にも自分から下の要素全てを子孫要素と言ったり、自分と同じ親を持つ要素、図でいう「本棚」からして、「タンス」と「クローゼット」は兄弟要素って言ったりするんやで。
- 弟
-
ほぉー、ツリー構造は簡単やな。
- 兄
-
よしそんなら次、弟の部屋をツリー構造で示したのが下の図や。
- 弟
-
うわ、なんやこれ、ツリーになってないやん!ｗ えらい子沢山やなー！
- 兄
-
各要素を纏める枝が無いから木に見えへんねん。こういう枝の無いツリー構造はカビの胞子みたいやから「カビ構造」っていうんやで。
- 弟
-
ほんまか!ｗ
- 兄
-
うそや。
- 弟
-
・・・。いらんてそうゆうの。話 長なるやん・・・。部屋の話よりHTMLの話してや。
- 兄
-
ごめんごめん。HTMLの説明でも部屋の話と繋がるから、我慢してもうちょっと聞いてな。
俺の部屋では「本」は「本棚」の「上・中・下段」、沢山の「服」は「タンス」の「ひきだし」といった具合に、入れ物を用意して同じ種類の要素を纏めてるやろ、こうやって関係のある要素をグループ化する親要素を作り、階層化するとええことがあるんや。
- 弟
-
ふむ、俺の部屋では床に全部置いてるから階層なんてないなぁ。せやけど俺には何がどこにあるかちゃーんとわかるんやけどなぁ・・・。
- 兄
-
うん、でもな、ちゃんと入れ物を用意して整理整頓すると色々なメリットが生まれるんや。
構造を補強するメリット
- 兄
-
よし、ツリー構造が見えるようになったところで、このHTMLを見てみよか。
<body> <h1>wuのホムペ</h1> <p>ようこそwuのホムペに！</p> <p>ここは私が日々思ったことや感じたこと、回りで起こった出来事などを不定期に書いているサイトです。</p> <h2>9/25日の日記</h2> <p>今日は無印良品で生活雑貨を沢山買いました。</p> <p>無印良品って文房具とお菓子を売ってるメーカーかと思ってたら、家具から洋服まで何でも扱っているんですね。びっくりしました。</p> <h2>9/24の日記</h2> <p>こんにちわ。今日は朝から雨が降っていて洗濯物が干せなくて困ってます。</p> <p>昼過ぎに雨が弱くなってきたので、犬にレインコートを着させて散歩にいきました。</p> </body>
これをさっきと同じツリー構造で見てみるとこうなる。
この図でのルート要素は「body」で (通常、HTML文書のルート要素はhtmlになります)、その下にずらっと各要素が並列に並んでるな。要素で見たら、これは弟の部屋と同じ構造や。これでもどこも間違ってないで、見出しはH1,H2要素、段落はP要素と構造化された綺麗なHTMLや。
けどな、これを後々HTMLのスタイルシートであるCSSで見栄えを細かく表現したいと思ったら、ちょっと不便なとこがあんねん。
- 弟
-
え、これでも十分装飾できるやん。H2要素は青色でー、P要素は文字ちっちゃくてーって。
- 兄
-
そやな、それぐらいやったら十分やな。けどじゃあ、日記部分は日ごとに枠線でぐるっと囲いたかったり、日記のP要素だけ文字の色を緑にしたいなーって思ったときはどうや？
- 弟
-
難しいなｗ 日付ごとに枠線で囲みたいとか良くやりたくなるわ・・・。日記の中のP要素だけ文字ちっちゃくなんてどうやるんや・・・。
- 兄
-
他のP要素と区別できんもんな。さっきのHTMLをDIV要素を使って構造を補強してみたのがこれや。
<body> <h1>wuのホムペ</h1> <div class="description"> <p>ようこそwuのホムペに！</p> <p>ここは私が日々思ったことや感じたこと、回りで起こった出来事などを不定期に書いているサイトです。</p> </div> <div class="diary"> <h2>9/25日の日記</h2> <p>今日は無印良品で生活雑貨を沢山買いました。</p> <p>無印良品って文房具とお菓子を売ってるメーカーかと思ってたら、家具から洋服まで何でも扱っているんですね。びっくりしました。</p> </div> <div class="diary"> <h2>9/24の日記</h2> <p>こんにちわ。今日は朝から雨が降っていて洗濯物が干せなくて困ってます。</p> <p>昼過ぎに雨が弱くなってきたので、犬にレインコートを着させて散歩にいきました。</p> </div> </body>
１つの日記を構成しているH2やPを、DIVっていう要素で挟み込んで１つに括ってるやろ。日記を表すDIARY要素なんてのはHTMLでは用意されてないから、仕方なく何の意味も持たないDIVという要素を使って纏め、区別するためにclass属性をつけたんや。まぁ先に言った通り、DIVは意味を持ってないから、挟んだところで"何か同じような要素の集合"としか表現できへんねんけどな。HTMLではこうやって構造を補強するのが精一杯なんやな。
薄いオレンジのとこが新しく追加した「入れ物」や。ツリー構造で見るとややこしく見えるかもしれへんけど、構造が補強されて階層構造ができたやろ。これで各要素の扱いのし易さはグーンっと上がってるねんで。
こうやって要素をグループ化するとCSSで細かく装飾できるようになるわけや。各日記に枠線つけたかったら、div.diary {border: 1px solid gray}ってやればいいし、日記のP要素だけ色変えたかったら div.diary p {color: green;}てやればいいな。
- 弟
-
・・・。 なんか話難しくなってきたなぁ。俺、不安なってきたわ・・・。
- 兄
-
あかん。よし、今難しいと思ったところは忘れて。部屋で例えて説明するわ。
例えばな、弟の部屋の漫画本だけに赤いブックカバーをしたいと思ったとき、オカンにどう頼んだらええ？
- 弟
-
う～ん・・・、難しいなー。表紙が漫画本っぽい参考書も置いてあるし、その逆もあるからなー。「1個1個読んでみて、漫画だったら赤いブックカバーしてー」ってゆうのもなぁ・・・。
- 兄
-
そやな、時間もかかりそうやし、間違うかもしれへんしな。
俺の部屋だと簡単やで。
「俺の部屋の本棚の中段にある本全部に赤いブックカバーしてやー」 これだけや。漫画本は全部本棚の中段にしまってあるからな。
- 弟
-
おお、ほんまや。それなら早いし、オカンでも間違うことないな。
- 兄
-
オカンへのお願いを言い換えると、「兄貴の部屋」要素の「本棚」要素の「中段」要素にある「本」要素全てに赤いブックカバーしてやー。やな。ツリー構造を上から順に辿っていけば間違うことあらへん。本が何百冊あろうと、オカンが10人いようと、きちんと構造化されていれば迷う事も無い。これはCSSでの説明やけど、プログラムでHTMLを扱う時も同じように便利なことがあるんやで。
例えばそやな、弟の部屋には洋服が沢山転がってるけど、どれが洗ってある洋服で、どれが洗濯物なのか、パっと見てわからんな。
- 弟
-
そやなｗ オカンがいつも「これ洗うんか？これは洗うんか？この靴下片っぽ見あたらへんけど知らんか？」って五月蝿いわ。ｗ
- 兄
-
それはお前が悪いわ。ｗ
ここで「洗濯物」って書いた箱を１つ用意して、洗濯物は全部そこに入れるようにしたらどうや？オカンは１つ１つ洋服拾い上げてお前に聞かないでも、なんも考えず箱ごと運べば済むやろ。
他にも模様替えしたいと思ったとき、弟の部屋では洋服やら小物やら本やらを少しずつ運ばなあかんけど、俺の部屋なら「タンス」「本棚」まるごと動かせば、中に入ってるもん全部移動できるな。引越しだって楽やで。
- 弟
-
なるほどな、なんか少しずつわかってきたような気がするわ。
DIV要素を使って構造を補強してあげれば、沢山の小さな要素をグループごとに個別に参照したり、１つの塊として纏めてアクセスできるようになるって事やな。便利や。
- 兄
-
おお、その通り！それにな、WEBでは人間以外にもロボットが絶えず巡回してるんやで、そのうちマンションの各部屋の階層構造を巡回して、片方の靴下を探してくれるようなロボットが出現かもしれん。
- 弟
-
うわ、めっちゃ嫌やわ。ｗ ターミネーターみたいなのやったらどないしよｗ
- 兄
-
いや、例えばの話やって。
WEBの話に戻すと、身近なのはさっき説明したようなCSSでの利用やな。考え方として大事なのは、CSSでうまくやりたいから構造化するっていうよりも、きちんと構造化したHTMLを書いておけば、CSSやら何やらで色々便利になるという点や。でもな、CSSで便利になるっていうのは、構造化されたHTMLで生まれるメリットのうちの１つにしか過ぎん。HTMLを編集・修正したいときなんかもサイト全体で共通した階層構造があれば色々楽になるし、サイトの管理者だけやなくても、特定の値を持ったclassやidの要素を拾い上げて表示するようなブラウザーが出るかもしれん。HTMLの階層構造を元に重み付けをする検索エンジンが現れるかもしれんな。(ちょっと飛躍しすぎてるかもしれへんけど・・)まぁ想像できるメリットだけでもきりないわぁ。
- 弟
-
そんなら決まった！何が何でもDIVで補強やな！
- 兄
-
そうとは言えへん。
- 弟
-
なんやねん、そこまでゆうといて。
- 兄
-
いや、あのな、なんでもかんでもHTMLを細かく構造化していけばええっちゅう事でもないねんな。細かくしよう思ったら必然的にHTMLの量が増えるやろ、そのせいでHTMLが煩雑になってメンテナンス性が下がるってこともあるんやな。だから自分の書いたHTMLをどの程度構造化すればいいかは、その"利用の仕方"、予想できる"利用のされ方"を考えないとあかんねん。なんも考えずただ闇雲にHTMLを増やすのはナンセンスっちゅーもんや。
- 弟
-
そうかー、色々考えないとあかんなー。
- 兄
-
まぁ最初はCSSで色々なデザインをしてみるのがええよ。最初はきっと「ここに枠線が欲しいからDIVを増やすか」ってことがあると思うけど、なんでそこに枠線が欲しいかを考えれば文書に暗示されている構造が見えてくる。それをHTMLで明示していくことを繰り返してれば、自然と自分やその時代にあった理想的なHTMLの構造の形がわかってくると思うで。
よし、そんなら眞鍋かをりの写真集みしてもらおか。
- 弟
-
ちょと待って、構造の補強については何となくわかってきたけど、もっと沢山例を見てみないとわからんわ。あと、classとid属性ってのも説明なしのままや。メリットやらなんやらを説明して、そのやり方をきちんと覚えなぁ構造の補強を理解したって事にならんやろ、ちがうか？
- 兄
-
面倒くさい弟やなー！ 右のスクロールバー見てみぃ、長いこと喋りすぎて疲れたわ。 少し休んだら話してやるわ。
- 弟
-
よし、そんなら今すぐグッスリ寝るとええよ。兄ちゃん仕事やなんやで色々忙しいもんな。でもそんな兄ちゃんを俺めっちゃ尊敬してるんやから、がんばってな！おやすみな！
- 兄
-
なんやのこいつ。ｗ
- 弟
-
怒ってる暇あったら、はよ寝たほうがええよ～。
最後に
構造化というのは単に階層構造を作ることを言うのではなくて、テキストがどのような構造を持っているかを用意された要素タイプを用いて適切にマークアップして明示していくことです。
見出しと複数の段落やリストを纏めて１つの"日記"として構造化したいと考えた場合、HTMLでは「日記」という構造を示す要素は用意されていません。そこで、DIVという特に意味を持たない要素を使い、それらをグループ化して構造を補強することが出来ます。DIVは意味を持たない要素なので構造を明示したとは言えませんが、複数の要素を１つの単位として扱えたり、階層構造を使ってCSSなどで装飾する際に利点が生まれます。
って・・・。ほんとはDIVなんかの話がしたいんじゃなくて、並列に並ぶ要素で繋がりのあるものは適切な要素でマークアップして構造化を強めよう!ってのが書きたかったんだけど、HTMLだとどうしても主役がDIV要素になっちゃうな。
この記事は文書の構造を表すHTMLの基本要素の使い方を覚えた後に見ないと意味が無いかもしれないね。
- Newer: ActionScript OOP
- Older: Flash8 新機能
