• ベストアンサー

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

なんとかページを作り込んだ訳ですが、このサイトで色々見ているとどうにも今はドキュメント宣言をし、それに準拠したページを作った方がよいということが分かりました。 ただこの宣言をすると見事にページが崩れます。 それと試しにブラウザチェックができるサイトで見たところ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"> <!-- div.watop {position:relative; top:27%;} div.warau {position:relative; top:41%; left:77%;} div.mark {position:relative; top:43%;} span.moji {font-size: 80%; position:relative:} span.mark {font-size: 60%; position:relative:} a:visited {color: #000000; } a:hover {color: #000000; } a:active {color: #00000; } a {text-decoration: none; } --> </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>

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

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

  • ベストアンサー
noname#119957
noname#119957
回答No.4

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

hitotsu
質問者

お礼

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

その他の回答 (3)

noname#119957
noname#119957
回答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"> <!-- *{ padding:0; margin:0; } div.watop { margin-right: auto; margin-left: auto; width: 600px; margin-top: 50px; } div.warau { margin-right: auto; margin-left: auto; clear: both; text-align: center; width: 600px; margin-top: 50px; } div.mark { position:relative; top:43%; clear: both; text-align: center; margin: 0px auto; } span.moji {font-size: 80%; position:relative:} span.mark {font-size: 60%; position:relative:} a:visited {color: #000000; } a:hover {color: #000000; } a:active {color: #00000; } a {text-decoration: none; } --> </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>

hitotsu
質問者

お礼

おお!ドキュメント宣言でちゃんとなってる!いや、ありがとうございます。 一部機能していなかったり、勝手に変えた所があるのでチェックを出来たらお願いしたいです。 *<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"> <!-- *{ padding:0; margin:0; } div.watop { clear: both; text-align: center; margin-top: 13%; } div.warau { margin-left:75%; margin-top: 105px; clear: both; } div.moji { clear: both; text-align: center; margin-top:12px; } div.mark { clear: both; text-align: center; margin-top:30px; } span.moji {font-size: 80%; position:relative:} span.mark {font-size: 60%; position:relative:} a:visited {color: #000000; } a:hover {color: #000000; } a:active {color: #00000; } a {text-decoration: none; } --> </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)
回答No.2

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

hitotsu
質問者

お礼

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

  • osamuy
  • ベストアンサー率42% (1231/2878)
回答No.1

(1)タグ<html>が不正なところに書かれている。 (2)タグ</font>があるのに、開始タグがない。 ――とか。

hitotsu
質問者

お礼

すいません、作り途中であまり影響のない部分は適当なところにあります。直さねば。 フォントはどこに・・お、ありました。これは明らかに消し忘れですね。ありがとうございます。消しておきます。

関連するQ&A

  • クリッカブル・マップのリンクが効かない

    下記のコードでpngの画像上でリンクをつけましたが、カーソルをかざしても反応が有りません。どこが間違っているのでしょうか? 皆様、ご教授お願いします <table width="750" align="center"> <tbody> <tr><td> <img src="top2.png" usemap="#top2"> <map name="top2"> <area shape="rect" coords="20,197,63,206" href="http://------.html" alt="A"> <area shape="rect" coords="78,198,121,206" href="http://------.html" alt="b"> <area shape="rect" coords="137,198,181,206" href="http://------.html" alt="c"> <area shape="rect" coords="196,198,239,206" href="http://------.html" alt="d"> <area shape="rect" coords="19,163,63,272" href="http://------.html" alt="e"> <area shape="rect" coords="77,264,121,272" href="http://------.html" alt="f"> </map> </td> </tr> </tbody> </table>

    • 締切済み
    • XML
  • mapが機能しない

    以下のようにmapを設置しましたが、全く機能しません。何が考えられるでしょうか? <div><img src="images/head.jpg" alt="" usemap="#map" border="0"/></div> <map name="map"> <area href="kan.html#3" alt="" shape="rect" coords="0,3,105,154" /> <area href="kan.html#2" alt="" shape="rect" coords="314,3,393,154" /> <area href="kan.html#1" alt="" shape="rect" coords="106,3,211,146" /> </map>

    • ベストアンサー
    • HTML
  • 吹き出しに画像とコメントを入れるプログラム

    下記のプログラムで吹き出しを作成して 画像とコメントを表示したいのですが なかなか出来ず困っております。 方法がありましたらよろしくお願いいたします。 <img src="画像名" usemap="#map" border="0"> <map name="map"> <area shape="rect" coords="305,60,390,126" href="アドレス" alt="北海道"> <area shape="rect" coords="288,151,331,181" href="アドレス" alt="青森"> <area shape="rect" coords="280,181,311,221" href="アドレス" alt="秋田"> <area shape="rect" coords="310,181,341,221" href="アドレス" alt="岩手"> <area shape="rect" coords="275,221,305,245" href="アドレス" </map>

  • map初心者です

    名前の付け方がわかりません。 なんでもいいのでしょうか?とりあえずわからないので画像名と同じ名前に設定しました。 また、下の記述が全部なのですが画像しかアップされません。 リンクすらなりません。 どこがおかしいのでしょうか。よろしくお願いします。 <img src="img/1.jpg" usemap="#1map" border="0"> <map name="1map">  <area shape="rect"   coords="220,148,179,200"   href="http://12345" alt="**" target="_blank">  <area shape="rect"   coords="358,125,181,126"   href="http://12345" alt="**" target="_blank">  <area shape="rect"   coords="167,336,178,141"   href="="http://12345" alt="**" target="_blank">  <area shape="rect"   coords="178,338,180,214"   href="="http://12345" alt="**" target="_blank"> </map> 関係あるかわかりませんが、使っているのはロリポップです。

    • ベストアンサー
    • HTML
  • クリッカブルマップについて

    私は、Macintoshを使って、HP製作をしているのですが、 クリッカブルマップが、MacのSafariではちゃんと出来ているのに、 internet explorerだと見れません。 どこが違うのでしょうか?ご回答お願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- BODY{cursor:crosshair;} --> </style> <title>サンプル</title> </head> <body background="002.jpg"> <div style="top : 40px;left : 90px; position : absolute; z-index : 1; " id="Layer1"> <img src="window18.jpg" usemap="#map1" alt=""> <map name="map1"> <area shape="rect" coords="586,247,617,261" href="info.html" target="iframe"> <area shape="rect" coords="622,247,660,261" href="info.html" target="iframe"> <area shape="rect" coords="666,247,690,261" href="contact.html" target="iframe"> <area shape="rect" coords="582,276,626,291" href="cosme.html" target="iframe"> <area shape="rect" coords="631,276,663,290" href="kaimono2.html" target="iframe"> <area shape="rect" coords="667,276,698,290" href="link.html" target="iframe"> <area shape="default" nohref> </map> </div> <div style="top : 145px;left : 190px; position : absolute; z-index : 1; " id="Layer2"> <iframe src="migi.html" border="0px" width="450" height="280" scrolling="AUTO" name="iframe"> </iframe></div> </body> </html>

    • ベストアンサー
    • HTML
  • 画像マップしたリンク先をクリックするとフェードでリンク先のページに切り

    画像マップしたリンク先をクリックするとフェードでリンク先のページに切り替わることなどできないでしょうか?? 問題のコードです <div id="main_ex"> <img id="mg" src="site02/ex_top03.jpg" usemap="#hisigata" border="0" /> <map name ="hisigata"> <area shape="rect" coords="10,498,149,532" href="site02/ex_01.htm"> <area shape="rect" coords="582,468,790,496" href="site02/ex_02.htm"> <area shape="rect" coords="800,465,932,493" href="site02/ex_03.htm"></div> href="site02/ex_01.htmに切り替わるときにフェードで切り替わりたいです。 (site02/ex_02.htm site02/ex_03.htmも同様) jQuery でも javascriptでもかまいません。 なにかよい考えございましたらぜひお教え願えたらと思います。 甘えた質問で申し訳ありませんが、よろしくお願いいたします。

  • HTML文を見やすく表記するには。

    HTML文を見やすく表記するには。 こんにちは。 Javascript等を挿入しHTML文を修正していますが、HTML文が見にくくなって困っています。 -------------------------------- 【現在】 <div style="Z-INDEX: 5; POSITION: absolute; WIDTH: 250px; HEIGHT: 80px; VISIBILITY: hidden; TOP: 360px; LEFT: 90px" id="MapExplrtn"><font color="#000088" size="4"><b>Australia NorthEast Area</b></font></div><map id="Prtmap" name="Prtmap"><area shape="rect" alt="Australia" coords="20,50,150,100"><area shape="rect" alt="ここだよ。Byともよ" coords="250,80,350,130"></map> 【下記のように変えたい】 <div style="Z-INDEX: 5; POSITION: absolute; WIDTH: 250px; HEIGHT: 80px; VISIBILITY: hidden; TOP: 360px; LEFT: 90px" id="MapExplrtn"><font color="#000088" size="4"><b>Australia NorthEast Area</b></font></div> <map id="Prtmap" name="Prtmap"> <area shape="rect" alt="Australia" coords="20,50,150,100"> <area shape="rect" alt="ここだよ。Byともよ" coords="250,80,350,130"></map> -------------------------------- このように表記できないと、修正作業が大変なんです。 実際のsourceは、 http://ktskn.web.fc2.com/JavaSample_Englsh_04.htm ここの88行目となっております。

  • クリッカブルマップのリンクが‥

    クリッカブルマップでリンクさせたくて、記述いたしましたが、リンクが有効になっていません。 ブラウザ上では画像表示のままでハイパーリンクになっておらず、目的のページへ行けない状態です。 これは何が原因でしょうか。 以下、htmlの記述です。みなさま、どうかご教授のほどお願いします。 <img src="./images/menu1.jpg" usemap="#linkmap" border="0" height="81" width="500"> <map name="linkmap"> <area shape="rect" coords="x15,y22,x88,y53" href="$home" alt="ホーム"> <area shape=rect coords="x88,y22,x203,y53" HREF="http://"> <area shape=rect coords="x201,y22,x310,y53" HREF="./index.cgi?mode=top"> <area shape=rect coords="x309,y22,x418,y53" HREF="http://"> </map>

  • Another HTML 5でのエラー結果

    Another HTML 5でチェックしてもらったところどうしてもエラーが出てしまう箇所があります。 No Severity Line Error Description 1 9 line 122: baaは <AREA>要素上のACCESSKEY属性には不適格です 解説 258 2 9 line 122: baaは <AREA>要素上のCOORDS属性には不適格です 解説 255 2番目のaccesskey="b"以下にもいくつかareaタグはありますが、1番上の"baa"の部分だけなぜか引っ掛かります。 “a”とか”x”と変えても同じです。ちなみに”x”の場合、ACCESSKEY属性には不適格です のエラーは消えます。 どういう基準でしょうか? <map name="KinmuchiMap" class="maphover"> <area href="" shape="rect" coords="380,20,290,70" class="imgover_01" alt="Hokkaido" accesskey="baa"> <area href="" shape="rect" coords="292,70,370,153" class="imgover_02" alt="Touhoku" accesskey="b">

    • ベストアンサー
    • HTML
  • クリックしてリンク先に移動する地図をwebに掲載しましたが

    ホームページに地図の画像を掲載して、 その地図にいくつかのクリックできるポイントを設定し、 それぞれリンク先に移動するようにしました。 IEではキレイに地図の画像が表示できているのですが、 FireFoxとか、Netscapeでは地図に青い外枠が表示されます。 赤を基調にしたサイトなので不自然な感じがして困っています。 どのようにこれを回避したらよいのでしょうか。 具体的に下記付け加えるもの等ございましたら教えてください。 よろしくお願いします。 <MAP NAME=map1> <AREA SHAPE=rect COORDS="112,2,196,28" HREF="room1.htm"> <AREA SHAPE=rect COORDS="213,3,298,28" HREF="room2.htm"> <AREA SHAPE=rect COORDS="310,2,399,28" HREF="room3.htm"> <AREA SHAPE=rect COORDS="413,2,495,28" HREF="room4.htm"> <AREA SHAPE=rect COORDS="513,1,594,27" HREF="room5.htm"> <AREA SHAPE=rect COORDS="614,2,701,28" HREF="room6.htm"> </MAP><IMG USEMAP="#map1" SRC="worldmap.gif" WIDTH=702 HEIGHT=29 ALIGN=bottom>

    • ベストアンサー
    • CSS