電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：hitotsu
  • 質問日時：
  • 回答数：4件

なんとかページを作り込んだ訳ですが、このサイトで色々見ているとどうにも今はドキュメント宣言をし、それに準拠したページを作った方がよいということが分かりました。
ただこの宣言をすると見事にページが崩れます。
それと試しにブラウザチェックができるサイトで見たところ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>

通報する

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

質問の本文を隠す

A 回答 (4件)

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/09/07 15:48

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

おお！ドキュメント宣言でちゃんとなってる！いや、ありがとうございます。
一部機能していなかったり、勝手に変えた所があるのでチェックを出来たらお願いしたいです。

＊<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>

通報する
お礼日時：2009/09/07 07:41

No.2

  • 回答者： LOHA
  • 回答日時：

まず、HTMLを作成するための基本方針ですが、最近では



構造はHTMLに、デザインはスタイルシートに

記述するのが一般的です。
なので、centerタグやalign="center"などはほぼ使うことはないでしょう。

この記述を見る限り、HTMLとスタイルシートどちらも中途半端に理解しているというように見受けられるので、本を買うなりして、一度作り方を一から整理し直すと良いかもしれません。
慣れが重要です。慣れてしまえば比較的すぐに色々できるようになります。

さて、質問についてかいつまんで回答します。

DOCUTYPEについてですが、まぁおそらくこの場合は
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
というのを最初に記述しておくのが無難でしょう。
位置は<html>の前に記述します(ちなみに上のソースは<html>が抜けてますね)。

＞最後の大量の<br>はつけないとウィンドウを小さくしたときに
＞コピーライトが見えなくなる（スクロールが下まで行かない）
＞為にしています。
これは位置を%指定しているために起こります。
高さの指定などにはpxを使うのが無難でしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ふむ、そうですね、本でも買った方がいいかもしれません。そういいつつ本を見ながら作ったのでがこれだった訳ですが（汗
センターに合わせるのもスタイルシートに変更しようとしたのですがうまくいかず、ＨＴＭＬにしてしまっている次第です。

＞これは位置を%指定しているために起こります。
＞高さの指定などにはpxを使うのが無難でしょう。
pxを使っても同じ現象が起こってしまいます。

通報する
お礼日時：2009/09/07 04:20

No.1

  • 回答者： osamuy
  • 回答日時：

(1)タグ<html>が不正なところに書かれている。


(2)タグ</font>があるのに、開始タグがない。
――とか。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2009/09/07 04:14

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報