- ベストアンサー
divについて
yahooでもgooでもいいんですけど、 だいたいbodyタグの直後はdivから始まっています。 最近ご指導頂いた方もdivから初めていました。 素人的な発想だと必要なところに 必要なタグを置けばいいと思うので、 <div><div><div>と続くとこのに違和感を覚えてしまいます。 divで枠組みをガッチリと抑える発想だと思うんですけど こういうのってデザインの世界では常識なんでしょうか。 トンチンカンなことを言っているようでしたらご指摘下さい。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
まあ、必要も無いのに複雑にする必要もありませんし・・・。 HTML5の設計において、指針が公表されています。 HTML Design Principles ( http://www.w3.org/TR/html-design-principles/#avoid-needless-complexity ) HTML5の設計指針です。 まあ、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 4.2. Avoid Needless Complexity Simple solutions are preferred to complex ones, when possible. Simpler features are easier for user agents to implement, more likely to be interoperable, and easier for authors to understand. But this should not be used as an excuse to avoid satisfying the other principles. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML Design Principles( http://www.w3.org/TR/html-design-principles/#avoid-needless-complexity )］より [訳すと] 4.2. 不必要な複雑さを避ける。 出来るだけ簡潔なほうが、複雑なものより好まれます。単純な仕組みは、相互運用性も高く、制作者も理解しやすくなるでしょうし、ユーザエージェントの動作も軽快になるでしょう。ただし、これは他の原則を逃れるための言い訳として使われてはならない。 HTMLをつかってウェブサイトを作成するときも、同様の考え方で良いと思います。オーサリングツールを使わず、テキストエディタで作成すればこそのことですね。ツールを使えば、どうしても煩雑で解りづらいソースになる。 このHTML Design Principles ( http://www.w3.org/TR/html-design-principles/#avoid-needless-complexity )のHTMLなんてシンプルですよ。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞ところがyahooではbodyの後にdivが５つ、gooにおいては7つも8つも続きます。 Tableと同じ発想で、とにかく枠に入れておけば何とかなる---と言う理由と、オーサリングツールを使うと、こんなことになってしまうのです。 オーサリングツールを使うと、この部分をひとつの枠にして、その中に枠を作って、さらにその隣に枠を置いて・・・そしてスタイルシートのために、名前をつけることになります。 本来でしたら <div class="article"> <div class="header"> <h1>見出し</h1> <div class="abstract"> <h2>見出し</h2> <p>このページでは、<strong>ウェブ標準</strong>のマークアップの基本的な考え方を説明します。</p> </div> </div> ・・ときちんとマークアップしてあれば、「ヘッダー内の要約内の強調は赤字で表現したい」という場合、スタイルシートでは、div.article div.header div.abstract strong{color:red;}と書けるのですが、そのような判断はプログラムには無理です。そのため、<strong id="red">とかにしてしまう。使用者に責任があると言えばそうなのですが、そもそもCSSやHTMLを知らなくても書けると思っている利用者が使うのですから、そうならざるを得ません。 どうしても適当な名前が無い場合でも <div> <div> <h1>見出し</h1> <div> <h2>見出し</h2> <p>このページでは、<strong>ウェブ標準</strong>のマークアップの基本的な考え方を説明します。</p> </div> </div> <div> でも、 body div div h1+div p strong{color:red;} その部分の文字を赤く出来ます。こんなこと、オーサリングツールを使ってなければ、簡単に出来ることなのですがね。 gooやyahooのサイトがそうなってしまうのは、あらかじめデザインを決めて、とにかくデータを並べるだけで、デザインは素人に毛が生えた程度のスタッフがツールを使ってつくっていくのですから、そうなります。ちなみにスタイルシートを無効にしてページを閲覧するとグリグリとスクロールしないと、記事にたどり着けません。 まあ、World Wide Web Consortium (W3C) ( http://www.w3.org/ )だって似たようなものですがね。 しかし、私が出来るだけ文書構造を元にマークアップする一番の理由は、スタイルシートを書くときに、とっても楽だからです。 div.section div.appendix{font-size:0.9em;position:absolute;top:0;width:20%;} div.section div.appendix div.foot{rigtht:0;} とか、HTMLを見なくても書けること、後日修正するときも楽・・・という実利面が大きいのです。
お礼
gooやyahooのデザインがそのようになっているとは思いませんでした。 日本を代表するサイトですから、プロ中のプロが 作っているものだとばかり思っていました。 最初はそのようにデザインするのが正統だと思ってたくらいです。 それでテーブルは良くないと指導を受け、 色々考えていて、今やっと謎が解けました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
解らないときは、まず仕様書を確認するようにしましょう。ネットや参考書の記述が正しいとは限りません。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 各々、内容が行内であるか(SPAN)ブロックレベルであるか(DIV)は定めるが、他のプレゼンテーション的語彙を示すことはない。 従って著者は、この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より それと、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML5 における HTML4 からの変更点/3.1. 新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )］より このふたつを読むと明確ですが、文書の構造をマークアップするのがHTMLです。 ＞divで枠組みをガッチリと抑える発想だと思うんですけど ＞こういうのってデザインの世界では常識なんでしょうか。 は間違ってますね。あくまで、文書の構造を明確にするための手段として使うべきものです。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 具体的に書くと <body> <div class="article"><!-- 一まとまりの記事 --> <div class="header"><!-- ヘッダ --> <h1>見出し</h1> 要約や<div class="nav">目次</div> </div> <div class="section"><!-- 本文 --> <h1>見出し</h1> 本文 <div class="aside">補足</div><!-- コラム(本文と関係ない) --> </div> <div class="footer"><!-- フッター --> </div> </div> </body> と言う風に使います。 これを<div class="wrapper"><div class="left"><div class="container">とかではないはずです。これだと、配置のためにTABLEを使うのと大差ありませんね。 もし、文書構造を示すようにHTMLが書かれていれば、CSSも div.article{width:80%;margin:0 auto;}/* 記事全体 */ div.header div.nav{position:fixed;top:200px;left:0;} /* ヘッダ内の目次は */ と書けるはずですね。 なぜ、ネットや参考書にへんなマークアップが多いのかと言うと、仕様書をろくに読んでない人が書くからです。もし読んでいればマニュアルを書くより「仕様書を確認してください」の一言で済む。 仕様書を読んで理解していないから、『自分はわからなかった、だから他の人もわからないだろう」とマニュアルを書いていく。 ＞素人的な発想だと必要なところに必要なタグを置けばいいと思う そうです。『文書に構造を付加するため』に必要なら、書かなければなりません。ただし、デザインのために書くのではないです。もしデザインでDIVなりSAPNが必要なら、それは文書構造上も何がしかの意味があるはずです。
お礼
この間はどうもお世話になりました。 この質問は例のプロジェクトとは無関係で、 前回までの質問から派生した個人的な質問です。 アマチュアが書いたページだと<p>や<br>等から始まっていて <div>を使っているのは珍しいくらいです。 素人的発想というのはそういう意味です。 ところがyahooではbodyの後にdivが５つ、 gooにおいては7つも8つも続きます。 両者ともORUKA1951さんが否定しているwrapperから始まっています。 私のレベルではこれが悪いのか判断が出来ません。 色々と考えた結果、取り敢えずdivで入れ物を確保しとけば 後で何ともなるという考えに到達した次第です。 多分、それは間違っているのだろうと思ったのですが、 現実にはそういう考えの基にデザインされているのか知りたかったのです。
お礼
本当に色々とご指導有り難うございました。 簡単にするのが良いことなのは同意できるのですが、 応用するとなると色々と壁ができますよね。 今回はそれをモロに感じました。 またの機会があれば、宜しくお願いします。