スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

HTMLの構造を直感的に理解する

手動定期巡回先hxxk.jpさん 経由で DIV要素で構造を補強 を読みました。とてもわかり易いと感じました。HTMLをこれから勉強する人というよりも、CSSを勉強しようとする人に対して更に有益だろうと思いました。ただ、一つだけ気になる点がありました。ツリー構造の部分で、

この図でのルート要素は「body」で (通常、HTML文書のルート要素はhtmlになります) 、その下にずらっと各要素が並列に並んでるな。要素で見たら、これは弟の部屋と同じ構造や。これでもどこも間違ってないで、見出しはH1,H2要素、段落はP要素と構造化された綺麗なHTMLや。 DIV要素で構造を補強

となっている箇所についてですが、確かにbody直下に並列に並んでいるのですが、各要素のレベルが違うので弟の部屋のようにそこまで煩雑ではない筈なのです。説明したい部分はそこではないので説明の便宜上、敢えて触れないようにしているのだと思いますが、アウトライン(補強する前にも既に存在している構造)についても少し触れた方が親切かなと思いました。そうしないと全ての要素が同じレベルだ(意味的にも並列である)と思い込んでしまう人や、要素の順番を軽視(意味が無いと勘違い)する人が出てきそうだからです。つまり下記のような記述では意味が異なってきてしまうという意味です。

<h2>9/25日の日記</h2>
<p>今日は無印良品で生活雑貨を沢山買いました。</p>
<h2>9/24の日記</h2>
<p>こんにちわ。今日は朝から雨が降っていて洗濯物が干せなくて困ってます。</p>
<h2>9/25日の日記</h2>
<p>今日は無印良品で生活雑貨を沢山買いました。</p>
<p>こんにちわ。今日は朝から雨が降っていて洗濯物が干せなくて困ってます。</p>
<h2>9/24の日記</h2>

また、これはdivで括ったとしても意味合いが異なります。

<div class="diary050925">
<h2>9/25日の日記</h2>
<p>今日は無印良品で生活雑貨を沢山買いました。</p>
</div>
<div class="diary050924">
<p>こんにちわ。今日は朝から雨が降っていて洗濯物が干せなくて困ってます。</p>
<h2>9/24の日記</h2>
</div>

流石にここまで極端な事は無いと思いますが、日記などのわかり易い物でない場合はこのような事が起こるのも容易に想像できます。これは各要素が属する見出しが、その要素を書く場所によって潜在的に決定付けられるている為に起こる錯誤です。そういった意味では、body直下に並列に並んでいる要素でも、それぞれ属するグループが場所によって既に決まっている事になります。つまり部屋の例で言うのならば、あちこちに物があって重なったりしている状態と言うよりも、床などに綺麗(順番)に並べられている状態の方が近い気がします。まあそもそも部屋にあるものに見出しと段落の差のようなレベルの違いはないので難しいとは思いますけれども、補強する前にも既に存在しているHTMLの基本構造(各要素)の相関についての何らかの説明も含んでいると、より良かったのではないかと思う次第です。

と言うよりもちゃんと最後に

って・・・。ほんとはDIVなんかの話がしたいんじゃなくて、並列に並ぶ要素で繋がりのあるものは適切な要素でマークアップして構造化を強めよう!ってのが書きたかったんだけど、HTMLだとどうしても主役がDIV要素になっちゃうな。

この記事は文書の構造を表すHTMLの基本要素の使い方を覚えた後に見ないと意味が無いかもしれないね。 DIV要素で構造を補強

と書かれていましたね。失礼しました。ちゃんと読まないと駄目ですね。申し訳ないです。やはり真琴さんが

もちろん、ある程度理解が進んでいる方向けに、もっとつっこんだ説明をすることもできる点はありますが、 HTML の構造化というものの理解への導入を促すには充分だと思います。 hxxk.jp - HTML の構造化を分かりやすく解説

と仰っているように、(意味合いは異なりますが)少々邪道だったかもしれません。反省しています。ちなみにあまり関係ありませんが 前にも書きました ように私は div恐怖症患者 だったりします。

自分の為にフォローしておくと今回のタイトルはDIV要素を使った構造の補強ですので、何も間違ってはいませんし、説明するに当たって私がここに書いたような事は邪魔ですので排除したのかもしれませんが、少しだけ気になったので書かせて頂きました。

ところでclassとidの説明はどうなるでしょう。漫画本と参考書の例でもclassとidの説明が出来そうですね。でも違う事象に同じ例を使うのはわかり難くなりそうですし、次は全く同じデザインのクリアボックスをdivに見立てて、中身が一目でわかるように張って置く紙をclassなどとするのでしょうか。それとも設定をまったく変えるのでしょうか。楽しみです。

スポンサーサイト

コメント一覧

無題

とても字が小さくて読みにくいです。

  • 2005年 09月 29日(木) 15:35:07 |
  • URL |
  • 通りすがり#- |
  • 編集 |
環境

前にも同じような意見を頂戴した事がありましたので一応 font-size:0.9em; となっていた箇所を本文に関する部分を中心に外してみましたがいかがでしょうか。
いったいどのような環境で文字が小さくなるのかも併せて教えて頂くと幸いです。
また次からはお名前も宜しくお願いします。

ちなみにIEの文字サイズ(小)では確かに意図しないほど小さくなっていました。


# IEにてコメント表示部に謎のズレが発生。

  • 2005年 09月 29日(木) 17:35:10 |
  • URL |
  • rara#d3xRQPUk |
  • 編集 |

コメントの投稿欄

Copyright © 2005 rara All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。