ベストアンサー

<!DOCTYPE> 宣言をするとページが大幅に狂います

2009/09/07 01:55

なんとかページを作り込んだ訳ですが、このサイトで色々見ているとどうにも今はドキュメント宣言をし、それに準拠したページを作った方がよいということが分かりました。ただこの宣言をすると見事にページが崩れます。それと試しにブラウザチェックができるサイトで見たところIE以外はほとんど崩れてしまいました。他のページも直さないといけないのでどこが悪いのかを教えていただけるとありがたいです。最後の大量の<br>はつけないとウィンドウを小さくしたときにコピーライトが見えなくなる（スクロールが下まで行かない）為にしています。こちらの解決法も合わせてお願いします。 <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>-------</title> <style type="text/css">  </style> </head> <html> <body bgcolor="#FFFFF0"> <center><span class="moji"> <a href="top.html">トップ</a> <a href="profile.html">プロフィール</a> <a href="gallery.html">ギャラリー</a> <a href="link.html">リンク</a> <a href="mail.html">コンタクト</a> </span> </center> <div class="watop" align="center"> <img src="watop.gif" border="0" usemap="#top"> <map name="top"> <area shape="rect" coords="50,100,140,160" href="top.html" alt="トップ"> <area shape="rect" coords="168,100,255,160" href="profile.html" alt="プロフィール"> <area shape="rect" coords="345,105,407,140" href="gallery.html" alt="ギャラリー"> <area shape="rect" coords="495,110,580,150" href="link.html" alt="リンク"> <area shape="rect" coords="600,105,650,145" href="mail.html" alt="メール"> </map> </div> <div class="warau"> <A HREF="top.html"><img border="0" src="hyousi.mini.gif"></A> </div> <div class="mark" align="center"> <span class="mark">copyright(c) 2009 ----- All Rights Reserved.</font> </span> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html>

hitotsu
お礼率100% (30/30)

HTML
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#119957

2009/09/07 09:08 回答No.4

おお！ドキュメント宣言でちゃんとなってる！いや、ありがとうございます。一部機能していなかったり、勝手に変えた所があるのでチェックを出来たらお願いしたいです。 >>ｈｔｍｌの間違いを訂正したのに、再び同じ間違いが有りやりにくいですね。 ■間違い１ <span class="moji"> <div class="moji"> ～（略 </div> </span> ■間違い２ <span class="mark"> <div class="mark"> copyright(c) 2009 ----- All Rights Reserved. </div> div をspanの中では使えません。 ********************************** その他デザインがどのようになるのが解りませんので、どう訂正していいのかがわかりません。流し込むのか、幅を指定するのかも不明ですので、ＣＳＳを作成できません。悪しからず。。 </span>

質問者

お礼 2009/09/07 15:48

分かりました。これ以上はちゃんと理解しないとダメですね。ドキュメント宣言をして、デザインが崩れていないければOKという訳ではないんですね。ちょっと急いで作らなければいけない、ということもあったので助かりました。ありがとうございました。

その他の回答 (3)

noname#119957

2009/09/07 05:01 回答No.3

■以下の部分は意味がわからない。こんな書き方はしたことがないので、手はつけていません。 <div class="watop" align="center"> <img src="watop.gif" border="0" usemap="#top"> <map name="top"> <area shape="rect" coords="50,100,140,160" href="top.html" alt="トップ"> <area shape="rect" coords="168,100,255,160" href="profile.html" alt="プロフィール"> <area shape="rect" coords="345,105,407,140" href="gallery.html" alt="ギャラリー"> <area shape="rect" coords="495,110,580,150" href="link.html" alt="リンク"> <area shape="rect" coords="600,105,650,145" href="mail.html" alt="メール"> </map> </div> ■もっと普通に書けばシンプルになるのでは？＜参考＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>-------</title> <style type="text/css">  </style> </head> <body bgcolor="#FFFFF0"> <center><span class="moji"> <a href="top.html">トップ</a> <a href="profile.html">プロフィール</a> <a href="gallery.html">ギャラリー</a> <a href="link.html">リンク</a> <a href="mail.html">コンタクト</a> </span> </center> <div class="watop"> <div align="center"><img src="watop.gif" border="0" usemap="#top"> <map name="top"> <area shape="rect" coords="50,100,140,160" href="top.html" alt="トップ"> <area shape="rect" coords="168,100,255,160" href="profile.html" alt="プロフィール"> <area shape="rect" coords="345,105,407,140" href="gallery.html" alt="ギャラリー"> <area shape="rect" coords="495,110,580,150" href="link.html" alt="リンク"> <area shape="rect" coords="600,105,650,145" href="mail.html" alt="メール"> </map> </div> </div> <div class="warau"> <A HREF="top.html"><img border="0" src="hyousi.mini.gif"></A> </div> <div class="mark">copyright(c) 2009 ----- All Rights Reserved.</font> </div> </body> </html>

質問者

お礼 2009/09/07 07:41

おお！ドキュメント宣言でちゃんとなってる！いや、ありがとうございます。一部機能していなかったり、勝手に変えた所があるのでチェックを出来たらお願いしたいです。＊<map～></map>は画像の中の場所を複数指定してリンクをするものです。おもな変更ドキュメントタイプはどうせならと、Strict DTDに margin-right: auto; margin-left: auto; width: 600px;　→　text-align: center;でセンタリングこれはでもテキストと入っているし、間違った指定なような気がしますが、逆にこうした場合何か不具合があるなら知っておきたいです。 div.mark が機能していなかったので他のをマネちゃん。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>-------</title> <style type="text/css">  </style> </head> <body bgcolor="#FFFFF0"> <span class="moji"> <div class="moji"> ～（略 </div> </span> <div class="watop"> <img src="watop.gif" border="0" usemap="#top"> ～（略 </map> </div> <div class="warau"> <A HREF="top.html"><img border="0" src="hyousi.mini.gif"></A> </div> <span class="mark"> <div class="mark"> copyright(c) 2009 ----- All Rights Reserved. </div> </span> </body> </html>

LOHA
ベストアンサー率52% (203/388)

2009/09/07 02:39 回答No.2

まず、HTMLを作成するための基本方針ですが、最近では構造はHTMLに、デザインはスタイルシートに記述するのが一般的です。なので、centerタグやalign="center"などはほぼ使うことはないでしょう。この記述を見る限り、HTMLとスタイルシートどちらも中途半端に理解しているというように見受けられるので、本を買うなりして、一度作り方を一から整理し直すと良いかもしれません。慣れが重要です。慣れてしまえば比較的すぐに色々できるようになります。さて、質問についてかいつまんで回答します。 DOCUTYPEについてですが、まぁおそらくこの場合は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> というのを最初に記述しておくのが無難でしょう。位置は<html>の前に記述します(ちなみに上のソースは<html>が抜けてますね)。＞最後の大量の<br>はつけないとウィンドウを小さくしたときに＞コピーライトが見えなくなる（スクロールが下まで行かない）＞為にしています。これは位置を%指定しているために起こります。高さの指定などにはpxを使うのが無難でしょう。

質問者

お礼 2009/09/07 04:20

ふむ、そうですね、本でも買った方がいいかもしれません。そういいつつ本を見ながら作ったのでがこれだった訳ですが（汗センターに合わせるのもスタイルシートに変更しようとしたのですがうまくいかず、ＨＴＭＬにしてしまっている次第です。＞これは位置を%指定しているために起こります。＞高さの指定などにはpxを使うのが無難でしょう。 pxを使っても同じ現象が起こってしまいます。