- ベストアンサー
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で入れ物を確保しとけば 後で何ともなるという考えに到達した次第です。 多分、それは間違っているのだろうと思ったのですが、 現実にはそういう考えの基にデザインされているのか知りたかったのです。
関連するQ&A
- divでレイアウト構成
以前にこちらでテーブルでのデザインは良くないと 指摘を受けたものです。そのコードは下記になります。 http://okwave.jp/qa/q6993356.html <body> ・・・ <table><tr> <td><img src="img1"></td> <td><p>説明文</p></td> </tr></table> ・・・ </body> 上記table部分をdivに置き換えるよう指示を受け、 実際にokwaveやyahooなどでも枠組みのデザインは ほとんどがdivで行われていると分かりました。 今回の質問はその確認の手続きですが 上記テーブルをdivに変えてCSSにすればOKかです。
- ベストアンサー
- CSS
- センタリング表示
イラストレータでデザインし、スライスしてCSSでWeb用に保存。 ホームページビルダー11で編集していますが、センタリング表示が出来ません。 下記のようなタグを入れましたがNGでした。 <body> <div align=”center”> ・・・ ・・・ ・・・ </div> </body> 次のタグでも同様でした。 <body> <center> ・・・ ・・・ </center> </body> なるべくテーブルにはしたくないので、解決策をご指導下さい。
- ベストアンサー
- ホームページ作成ソフト
- cssに関する質問です。
cssに関する質問です。 フッターをbodyタグの直後に置きたいのです。 そうするとフッターはbodyタグの直後に表示されてしまいます。 cssでフッターだけをホームページの最後に表示する方法はありますか。 <body> <div id="footer">フッター ホームページの一番下に表示したい。</div> <div id="content>ホームページの内容 フッターよりも上に表示したい。</div> </body> ＣＳＳハックのような方法でも構いませんが、実現方法があれば教えてください。 よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- floatを適用したdiv内部にあるpタグのmarginについて
floatを適用したdiv内部にあるpタグのmarginについて 現在HTMLとCSSを勉強している者です。 cssのmarginの挙動がいまいち理解できずに困っていたもので、 ご回答いただきたく質問させていただきました。 以下私が作ったサンプルHTMLとCSSです。 ==========HTML========== <div id="test01"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test02"> <p>Pタグで囲まれた文章です。</p> </div> <div id="test03"> <p>Pタグで囲まれた文章です。</p> </div> <div id="clear"> <p>clear: bothです。</p> </div> （<body>前、</body>後省略） ==========CSS========== html, body, div { margin: 0; padding: 0;} p {margin: 10px; padding: 0;} div#test01 {background-color:#EEE; width: 900px;} div#test02 {background-color:#CCC; float: left; width: 650px;} div#test03 {background-color:#AAA; float: left; width: 250px;} div#clear {background-color:#888; clear:both; width: 900px;} 先頭に900pxのdiv（test01）、その下に二つのdiv（test02、03）をfloat:leftで並べました。 最後にclear:bothを行っております。 そして各div内に10pxのmarginを付与したpタグ文字を入力しているのですが、先頭のdivとfloat:leftを行ったdivで、marginの結果が異なってしまいました。 先頭のdivは上下に白い10pxの余白、左はtest01で指定した背景色を残したまま10pxの余白が作られ、float:leftのdivではtest02、03で指定した背景色を残したまま上下左右に10pxの余白が作られています。 このように同じ効果のpタグでも表示が異なってしまう理由は何でしょうか。 また先頭のdivの場合、上下左右に10pxの白または背景色の余白ができるのなら理解できるのですが、何故上下と左右でmargin結果が異なるのか、理由も知りたいです。 おそらくpaddingを併用すれば思った表示にはできると思うのですが、今回はこうなってしまう理由が知りたく質問させていただきました。 また私の記述方法に誤りがあればご指導いただけると助かります。 宜しくお願い申し上げます。
- 締切済み
- HTML
- IE８ではtext-align: center;でdivタグが中央にならない。改善策は？
IE８ではtext-align: center;でdivタグ又はbodyが中央にならなくなってしまったので、修正方法を探していたところ、以下の質問・回答履歴を見つけました。 http://oshiete1.watch.impress.co.jp/qa4989799.html 上記の回答履歴では最終的にNo.6さんの以下の回答で問題が解決されています。 CSSでは以下のように記述： div.center { width: 80%; margin-right: auto; margin-left: auto; } HTMLではセンタリングさせたいdiv要素を以下のように記述： <div class="center">文章等<div> ＜質問1＞ ここで私の質問ですが、なぜ上記の回答では<div class="center">文章等<div> を中央に表示するためにCSSにwidth: 80%;が必要なのでしょうか（width: 80%はdivタグのセンタリングには特に必要ないのですか？なぜ、width: 80%が記述されているのか分かりません。）？この80%という値はどこから導き出されたのでしょうか（なぜ、例えば60%、70%等ではだめなのですか？）？ また、bodyタグをセンタリングしたい場合は、どうですか？CSSにwidth: 80%;が必要なのでしょうか？ ＜質問２＞ 「margin-right: auto;とmargin-left: auto;」以外にもmargin:0 autoという方法が他のサイトで紹介されていましたが、「margin-right: auto;とmargin-left: auto;」を使用した場合とmargin:0 autoを使用した場合の表示結果は全く同じなのでしょうか？margin:0 autoの場合、上下のマージンも0（無し）となるので、その点で上下のマージンを指定していない「margin-right: auto;とmargin-left: auto;」と異なるように思いますが？「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoを使用する場合、他方を使用することに比べてメリット及びデメリットはあるのでしょうか？ また、もしも、「margin-right: auto;とmargin-left: auto;」の代わりにmargin:0 autoを使用する場合、記述は以下で正しいのでしょうか？ ＜divタグをセンタリングしたい場合＞ CSSでは以下のように記述： div.center { width: 80%; margin:0 auto } 上記の記述で div.center { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか？ ＜bodyタグをセンタリングしたい場合＞ CSSでは以下のように記述： body { width: 80%; margin:0 auto } 上記の記述で body { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか？ ＜質問3＞ IE6又はそれ以前のIEは、「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoではDivタグをセンタリングできず、text-align: center;を使用する必要あったような記憶があります。IE7/8に加えてIE6又はそれ以前のIEにおいても<div class="center">文章等<div>をセンタリングしたい場合、どのような記述となりますか？ 以下のように「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoをtext-align: center;と同じ場所に記述する方法はうまくいかないようですが。私の記述方法が悪いだけですか？ { text-align: center; margin-right: auto; margin-left: auto; } 又は { text-align: center; margin:0 auto; } 関連サイト等あれば、そちらも教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- ホームページ全体のセンタリングは不可欠ですか？
おはようございます。 現在あるホームページを運営しているのですが、ホームページ全体のセンタリングというのは不可欠なのでしょうか？ 具体的には、Bodyタグの中に大きな<div>をつくり、そのdivをcssを使ってセンタリングするつもりです。 センタリングしない場合、何か不具合が発生することはありますか？ 例えば、デザインが崩れるなどです。 よろしくお願いします。
- ベストアンサー
- HTML
- 描画完了のタイミング
jQuery使用しています。 var tag = '<div id="aaaa">～～～～～</div>'; $("body").prepend(tag); alert($("#aaaa").height()); でブラウザ上には表示出るのですが、直後に表示したボックスの高さを取得しようとすると、1回めのキャッシュがない状態ではおかしなことになります。キャッシュがある状態では正しく出ます。 tagの中には画像とかを高さ指定せずに入れてるから、描画前には取得できないからだと思いますが、描画が完了した段階で高さを取得するにはどうしたらよいでしょうか？
- ベストアンサー
- JavaScript
- <div>と<div>の間の１０px程の隙間が消えなくて困っています。Firefox＆safari
はじめまして。 現在movabletype3.35で初めてサイトを作成している者です。 宜しくお願いします。 下記にありますＨＴＭＬとＣＳＳでページを作っているのですが、 Firefoxやsafariで確認すると、 <div id="pankuzu">で囲んだボックスと、そのすぐ下に持ってきている <div id="introduction">で囲んだボックスの間に１０px程の隙間が出来てしまいます。 ※ＩＥ７では隙間は出来ませんでした。 <div id="keyvisual"> ← ※<div id="pankuzu">のすぐ上のボックス <div id="pankuzu"> <div id="introduction"> これら３つのボックスには全てＣＳＳでmarginとpaddingを調整しているつもりなのですが、どうしてもＩＥ７と同じように表示されず隙間が出来てしまいます。。 ちなみに、試しに一度<div id="pankuzu">のボックスをまるまる削除して表示した所、<div id="introduction">のmargin-topに0pxと指定しているのにかかわらず、この場合も10px程の隙間が出来ました。。 ということは、<div id="introduction">の中のＨＴＭＬかＣＳＳの書き方か指定に何か問題があるのかと思っているのですが、どうしても解決できません。 是非ご指導、ご鞭撻宜しくお願い致します。 ---------------------------------------------------------------- 【ＣＳＳ】 * { margin: 0; padding: 0; border: 0; background-color:transparent; color: #333; font-size: 100%; font-weight: normal; font-style: normal; text-decoration: none; } div#keyvisual { width: 780px; height: 100px; margin: 10px 10px 0 10px; padding: 0; background: url("※※※.gif") no-repeat 0 0; } div#title { width: 500px; height: 50px; line-height: 350%; margin: 0 0 0 10px; padding: 0; } div#pankuzu { width: 780px; height: 20px; margin: 0 10px 0 10px; padding: 0; background-color: #999; } div#pankuzu p { font-size: 50%; } div#introduction { width: 780px; height: 50px; margin: 0 10px 0 10px; padding: 0; background-color: #999; } dl#site { margin: 0; padding: 0; } dl#site dt { display: block; float: left; clear: left; width: 160px; margin: 15px 5px 10px 5px; padding: 0; font-size: 90%; text-align: left; background-color: #fff; } dl#site dd { width: 600px; margin: 15px 5px 10px 5px; padding: 0; font-size: 80%; text-align: left; } --------------------------------------------------------------- 【ＨＴＭＬ】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> ※ヘッダー部分は省略しています。 <!-- サイトボディー部分ここから --> <body> <div id="container"> <div id="keyvisual"> <div id="title"> <h1><a href="<$MTBlogURL encode_html="1"$>" title"<$MTBlogName$>"><$MTBlogName$></a></h1> </div> </div> <!-- パン屑リスト --> <div id="pankuzu"> <p class="navi-link"><a href="<$MTBlogURL$>">TOPページ</a>><MTParentCategories glue=">" exclude_current="1"><MTIfNonZero tag="MTCategoryCount"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a><MTElse><$MTCategoryDescription$></MTElse></MTIfNonZero></MTParentCategories><MTHasParentCategory>></MTHasParentCategory><$MTCategoryDescription$> </p> </div> <div id="introduction"> <dl id="site"><dt>題名</dt><dd>説明</dd></dl> </div> ----------------------------------------------------------------
- ベストアンサー
- HTML
- seesaaブログにバナーを毎回表示
seesaaブログにランキングのバナーを自動で表示させたいのですが、 検索で調べた事をやっても、 個別ページでは出ても、トップページでは表示されなかったりします。 やっている事は デザイン → コンテンツ → 記事 → コンテンツＨＴＭＬ編集 の中で、 <div class="text"><% if:diet_log %><% include:article_diet_file %> <% /if %><% article.entire_body | bodyfilter(article_info,blog) %> ランキングバナー <% if:list_tag %><div class="tag-word">タグ：<% loop:list_tag %> <a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %> と言う形で記載しています。 根本的にやり方が異なるのでしょうか？ どうかよろしくお願いいたします。
- ベストアンサー
- ブログ
- スタイルシートで<div>を使ったヘッドメニューのデザインについて教えてください
私は自分のサイトでヘッドメニューのリンクの幅をスタイルシートの<div>を使用して等間隔に調整しています。ちなみに下記が私が設定したヘッドメニュー<div>部分のスタイルシートです。 .headmenu div {float:left; width:160px; border-right:solid 1px white; text-align:center;} とこんな感じです。160pxの間隔でリンクを配置しているのですが、これをもうちょっと細かく設定したいのです。具体的にはヘッドメニューの一番左側にくるリンクだけ160ｐｘに設定し、残りのリンクを120ｐｘぐらいで統一するというデザインです。 お恥ずかしい話、私はスタイルシートの参考書を片手に参考書のタグをコピーし、それを自分好みの色やサイズの部分だけ編集するという方法でスタイルシートを作成してきました。ですからちょっと応用が必要になるともうお手上げです（T.T） スタイルシートについて詳しい方、どうか私に上記のスタイルの設定方法を教えていただけないでしょうか。 回答ようろしくお願い致します。
- ベストアンサー
- CSS
お礼
本当に色々とご指導有り難うございました。 簡単にするのが良いことなのは同意できるのですが、 応用するとなると色々と壁ができますよね。 今回はそれをモロに感じました。 またの機会があれば、宜しくお願いします。