プロが教える店舗＆オフィスのセキュリティ対策術

HTML標準モードでのブロック要素について。

解決済

  • 質問者：ponta1971
  • 質問日時：
  • 回答数：2件

HTML5の仕様でページを作成しようとしています。

そこで、HTML5のDOCTYPE宣言は
<!DOCTYPE html>
のみでよく、これで標準モードに切り替わるということは分かりました。

ですが、今までの（4.1やXHTML）の宣言で互換モードになっていた場合と、imgタグやdivタグなどのブロック要素の下にスペースができたりできなかったりでデザインが崩れてしまい困っています。

互換モードの場合はimgタグを連続で書くと隙間無く並びますが標準モードだと隙間があいてしまいます。
しかも、どうも微妙に各間隔が違うようで、4pxだったり5pxだったりしています。
この隙間をなくすためには、それぞれの間隔を計ってスタイルシートのpsistionで指定しないと無理でしょうか？
それとも、「margin:0px;」のように簡単になくす方法があるのでしょうか？

それとも、HTML5だから、長々とDOCTYPE宣言を書いてはいけないことはなく、互換モードになるようにXHTMLの宣言などを書いてしまってもかまわない（動くかどうかではなく、仕様的にです）のでしょうか？

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

<img>


<form>～</form>
<img>

　これは、そもそもHTML的におかしいのでは？？？

<img>はインライン要素ですから、<from>というより、なにか間にブロック要素があれば、この<img>は、仮想ブロック要素に入っているとみなします。
　このあたりは、HTML5で、ブラウザがDOMをどのように解釈するかも定められたために、そのようなことが起きるのではないでしょうか？。今回のウェブ標準HTML5には、HTMLだけでなくCSS,DOMなども含まれます。

　HTML5とHTML4.01strictに大きな差があるわけではありません。圧倒的に資料が豊富なHTML4.01で作成して、Anothe HTML lintやHTML Validator、CSS Validatorを使ったほうが効率的です。
<body>
　<div class="header">
　　<h1>見出し</h1>
　　<div class="section abstract">
　　　<h2>要約</h3>
　　</div>
　</div>
　<div class="article">
　　<div class="section">
　　　<h2>見出し</h2>
　　　<div class="section">
　　　　<h3>見出し</h3>
　　　　<p></p>
　　　　<div class="aside">

とか・・・。そのままHTML5だと
<body>
　<header>
　　<h1>見出し</h1>
　　<section class="abstract">
　　　<h2>要約</h3>
　　</section>
　</div>
　<article>
　　<section>
　　　<h2>見出し</h2>
　　　<section>
　　　　<h3>見出し</h3>
　　　　<p></p>
　　　　<aside>
と変更すればよい。

<img>に隙間があいて・・・ということは、ひょっとして文字を画像に置き換えて（文字の代わりに画像で）表示しているとかで「ウェブ標準」とは異なるのではないかと・・
　たとえばナビゲーションでしたらHTML5だと
<nav>
　<ol>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
としておく。HTML4だと
<div class="nav">
　<ol>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>

　これをスタイルシートで、
nav ol,nav ol li{display:block;list-style:none;margin:0;padding:0;}
nav ol{width:400px;height:100px;position:relative;}
nav ol li{float:left;width:100px;line-height:100px;}
nav ol li a{display:block;width:100%;height:100%;}

div.nav ol,div.nav ol li{display:block;list-style:none;margin:0;padding:0;}
div.nav ol{width:400px;height:100px;position:relative;}
div.nav ol li{float:left;width:100px;line-height:100px;}
div.nav ol li a{display:block;width:100%;height:100%;}
で、隙間無く並べられるはず・・。

HTML5で目指しているのは、上っ面だけじゃない。このようなHTMLとCSSのすみわけも大事なのです。HTML4.01も実はそうだったけど、守られなかった。DIVのIDやclass名も
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　と書かれているのに、構造を示す(header,section,footer,asideなどの)名称をつける人は少なかった!!!!

＞地道に隙間の巾を計ってスタイルシートで調整するしかなさそうですね。
　こんなことしなくてもよいはずです。根本的な部分を誤解されているから、大変な作業になってしまう。
　HTMLでは文書構造をマークアップすることに専念し、配置は考えない。HTMLが文書構造にしたがってきちんとマークアップされていれば、小細工しなくても期待通りにレイアウトできるはずです。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　
　
    • good
    • 0
    • 件
通報する
この回答へのお礼

再度の回答、ありがとうございます。

ご想像されておられるとおり、画像を使ってナビゲーションを作ろうとしておりました。
教えていただいた方法できれいにスマートに横並びにできました。

また、HTML5の仕様でといっても、付け焼刃ではだめだと思い知りました。

ありがとうございました。

通報する
お礼日時：2011/09/16 11:56

No.1

  • 回答者： ORUKA1951
  • 回答日時：

＞HTML5の仕様でページを作成しようとしています。


本当なら、発想が逆です。

　ウェブクリエーターの頭を悩ましてきたのは、古いＩＥの互換モードです。他のほとんどのブラウザfirefox,opera,safari,googleChrome,・・・ではちゃんと見えるのに、どんどん減っていく古いIEに足を引っ張られないようにしましょう。

　ただ、互換モードと標準モードで連続したIMGに隙間が開いたり無かったりというのはおかしいです。もし、間に連続した空白文字があるときは、それらは一文字の空白に置き換えることになっています。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。 これは、lang属性やHTTP "Content-Language"ヘッダフィールド([RFC2616]の14.12参照)、ユーザの設定、等による言語情報が存在しない場合であっても、可能かつ必要な動作である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［9.1 空白類( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　たとえば、
<p>
　　<img>
　　<img>
</p>
　の場合、互換モード、標準モードに関わらず、必ず半角スペースの隙間があくはずです。
　逆に
<p>
　　<img><img>
</p>
　なら間は、互換モード、標準モードに関わらず、開きません。


＞<!DOCTYPE html>
＞のみでよく、これで標準モードに切り替わるということは分かりました。
　ですから書かなきゃ良い・・

　私は長く互換モードのHTMLは書いたことはありませんし、今後も互換モードに配慮することは無いでしょう。

＞互換モードになるようにXHTMLの宣言などを書いてしまってもかまわない
　XHTMLは標準モードですよ。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Documents with an XML media type are always handled in standards mode.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML5 differences from HTML4( http://www.w3.org/TR/html5-diff/#doctype )］より
「XMLメディアタイプは、すべて標準モードで表示されるから・・」
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答ありがとうございます。

imgタグに関してはおっしゃられている通りで、私の思い違いでした。

私も互換モードを気にしてコーディングをしようとしているわけではなく、HTML5のしようでページを作成しようとしているとかいたものの、実際は適当に作ってしまったページをちゃんと作り直そうとしています。

その中でDOCTYPE宣言を

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …

としていたのですが、HTML5では

<!DOCTYPE html >

のみでいいという記述を見てこの部分を変更したところ、一部のレイアウトが崩れてしまったので質問させていただきました。

回答をいただいて、さらに調べてみたところ、formタグの部分の下に隙間ができたりできなかったりしていました。

<img>
<form>～</form>
<img>

とした場合に
<!DOCTYPE html >
の宣言の場合だとイメージとフォームエリアの間に隙間があき、もう一つのDOCTYPE宣言だと隙間があきません。
formタグがいくつかあるので、この隙間をなくす処理をスマートにしたいと思ったのですが、地道に隙間の巾を計ってスタイルシートで調整するしかなさそうですね。

通報する
お礼日時：2011/09/15 22:59

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報