- 2005年9月27日 01:26
- 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 新機能
Comments:20
- cuuu 2005年9月27日 02:20
うーさんの説明だとすごい解り易い！
HTMLを構ったことが無い俺でも理解出来た！むしろHTML勉強しようかなー、なんて思ったり。
- bantou 2005年9月27日 02:43
いやー、わかりやすいっすね。改めて、復習できたかんじっす。
- wu 2005年9月27日 04:15
おお、良かった！引き続き 「idとclassの違い」とかそこらへんを書くからよろしく！
- しゃど 2005年9月27日 06:53
うおお分かりやすい！分かりやすいけど
俺ＨＴＭＬについてあんま知らないから意味ねぇ！
ちゃんと勉強しないとな…- Roots 2005年9月27日 09:48
面白いし分かりやすい。
真面目にHTML勉強しようかなと思った。- zeq 2005年9月27日 10:44
仲良いなぁ、この兄弟。 わかりやすくていいっす！
- nao 2005年9月27日 13:26
お，(･∀･)ﾉ ｲｲ!
- Kaz 2005年9月27日 19:42
はじめまして。ちょっと前から寄らせていただいてます！
すごくわかりやすいお話で感動しました。
「idとclass」も気になっていて、さっぱり、、だったので、楽しみにしています。- kinopy 2005年9月27日 21:50
関西弁が 親しみ度をアップしてて
めっちゃ ようわかったわ。ありがとううううう- KEMU 2005年9月28日 01:19
前々から読んでるけどカキコミ初です。
すごい分かりやすかったです。
HTMLの参考書もこういうのだったらいいのになぁと思っちゃいました。
wuさんって関西人？- wu 2005年9月28日 01:52
「関西弁で学ぶHTML」 いいかもしれない？悪いかもしれない。
僕は東京なんです。兄弟の話は最初普通に書こうと思ったんですけど、関西弁で書いたら少し面白いかなって。ちなみに一人っ子です。(笑
- 通りすが(ry 2005年9月28日 10:58
構造化について理解するとともに面白く読まさせて貰いました。2度読んでみて気づいたんですが、いやー凄い文章。w
冒頭のほうで「兄貴の部屋ですぐに見つかるHTMLの参考書」と、「弟の部屋でなかなか見つからない写真集」この布石があるからその後の展開が頭のなかでイメージできてわかりやすいんだなって。お互いの部屋も想像できるし。 WEBについて勉強してる知人にも紹介したいとおもいました。- てすと 2005年10月23日 15:00
会話調で書くのもそうだけど、
所々に入る簡単な図も解り易さを増してるような気がする。HTMLをきちんと整理整頓しとけば
CSSでもデザインしやすくなる
ってことがよくわかりますね。- wu 2005年10月23日 17:16
ざっつ、らいと でございます！
- shimatch 2006年4月 1日 15:50
「家系図」が「家計図」になってますよー。
- 弟&兄 2006年4月 2日 22:56
「ほんまや！ｗ」
- subuta 2007年6月15日 16:05
すごいわかりやすいｗｗｗｗｗ
- xenobia 2007年7月19日 13:55
最初 読んだ時は、臭い関西弁にマタカ！！と思ったんだけれど、読み進んでいくうちに wu さんは、"本物"ダト判りました。なにも本物の関西人という事ではなく、"本物"の知識人だという事デス。それに最近の日本では絶滅危惧種に指定されている"本当の日本語使い"ですネ！！！日本語の基本のキが分かってナイNHKのアナウンサーの講師につけたいぐらいデス。
html の構造化について説明した文章としてはコレマデで最高のモノじゃないですか。私は最近 xml に取っ掛かった所ナンですが、今回の説明は xml の文章構造を理解する上でも、大変 有効じゃないですか！？ wu さん、モシ時間が有るようなら、｢兄と弟のスタイル・シート入門 関西弁で行こう！！！｣をモノしてくれないかな。他の参考書を買うグライなら、絶対アナタのを買うと思いますヨ！皆。 html css を入門・初級編として、 xml xslt と Java Script それに出来れば、css を使って xml と html を結び付ける方法などを説明した中級編を全編 関西弁で書き上げて欲しいナア！私 予約しますケド。ドッカの出版社 手を挙げーイ！！！ベスト・セラー間違いナシやぞ！
さて、class と id については何処かに書いたんデスカ？早く読みタイデス！それと細かい質問ですがネ、本文中 色を指定する処で green の後にはセミコロン; が付いてますが、grey の後には付いてません。これはドチラデモ良かったデスカネ？- wu 2007年8月24日 20:20
xenobiaさん、書き込みありがとうございます！
｢兄と弟のスタイル・シート入門 関西弁で行こう！！！｣
もし本屋でみかけたら、タイトルで噴出してしまいますねこれ。ｗclassとidについては、しばらくして以下のような議論があって僕と同じ意見も出てているので、結局書いていません。 関西弁で書いたら目新しいですかね。
class属性とid属性に関する議論リンク集- yo-ill 2007年11月16日 15:04
め、めっちゃわかりやすいですね、コレ。
ありがとうございます。ほんまに本にしてください！
買います！
Trackbacks:1
- TrackBack URL for this entry
- http://3ping.org/mt2/mt-tb.cgi/56
- Listed below are links to weblogs that reference
- DIV要素で構造を補強 from 3.5ping.org
- HTMLの構造を直感的に理解する from あの頃のように… 2005-09-28 (水) 15:03
- 手動定期巡回先の hxxk.jpさん 経由で DIV要素で構造を補強 を読みました。とてもわかり易いと感じました。HTMLをこれから勉強する人というよりも、CSSを勉強しようとする人に対して更に有c
