- ベストアンサー
作成中のホームページの表示が崩れる原因の探り方
- 作成中のホームページの表示が崩れる原因を探る方法とは？
- CSSとHTMLを使用して作成中のホームページの表示の崩れを修正するにはどうすれば良いのか？
- ホームページの表示が崩れる原因を特定し、修正するためのヒントを教えてください。
- その他（インターネット・Webサービス）
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
ソース貼っていただきありがとうございます。＃１・＃４です。 まず、 <!--■自分の名前に書き換えます--> <DIV ID="banner"></DIV><DIV CLASS="banner-text">***サイトの名前***</DIV> を、 <!--■自分の名前に書き換えます--> <DIV ID="banner"><DIV CLASS="banner-text">***サイトの名前***</DIV></DIV> とします。 さらに、 <DIV CLASS="d-midasi">***写真日付***</DIV> <DIV CLASS="d-photo"><img src="image/turu.jpg" width="325" height="250" ><!--MorePicsへリンク作成--></DIV> <DIV CLASS="d-text">サンプルの写真です サンプルの写真 サンプル サンプル サンプル</DIV> <DIV CLASS="clear-d-photo"></DIV> を、 <DIV CLASS="d-midasi">***写真日付***</DIV> <DIV CLASS="d-text"> <DIV CLASS="d-photo"><img src="image/turu.jpg" width="325" height="250" ><!--MorePicsへリンク作成--></DIV> サンプルの写真です サンプルの写真 サンプル サンプル サンプル</DIV> <DIV CLASS="clear-d-photo"></DIV> とします。 これは、 <DIV CLASS="d-photo">を、 <DIV CLASS="d-text">の中に入れたということです。 是非お試しください。
その他の回答 (4)
- tsmove
- ベストアンサー率49% (61/124)
#１です。 ソースを貼っていただけると、原因を探ることができるかもしれません。 技術評論社のサイトより、おっしゃっているテンプレは確認いたしましたが、テンプレ自体に問題は無いので、制作過程でミスが生じたものと思われます。
補足
お言葉に甘えます、「写真の日付」以下ｄ－×××のクラスは自分で設定しました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS"> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <!--■タイトルを変更します--> <TITLE>Photo Dialy</TITLE> <LINK REL="stylesheet" HREF="main.css" TYPE="text/css"> </HEAD> <BODY> <DIV ID="all"> <!--■自分の名前に書き換えます--> <DIV ID="banner"></DIV><DIV CLASS="banner-text">***サイトの名前***</DIV> <!--ここからメニューです--> <DIV CLASS="menu">｜<A HREF="index.html">TOP</A>｜<A HREF="profile.html">Profile</A>｜<A HREF="diary.html">Photo Dialy</A>｜<A HREF="mailto:???@???">メール</A>｜</DIV> <!--ここでメニュー終わり--> <DIV CLASS="page-title">Photo Dialy</DIV> <!--■このページを紹介する文を変更します--> <DIV CLASS="cmt">***紹介文***<br>***紹介文***</DIV> <!--■２００５年: 任意の年--> <DIV CLASS="d-date"><!--■項目だけ残す、実際は見出しへ入力--></DIV> <DIV CLASS="d-midasi">***写真日付***</DIV> <DIV CLASS="d-photo"><img src="image/turu.jpg" width="325" height="250" ><!--MorePicsへリンク作成--></DIV> <DIV CLASS="d-text">サンプルの写真です サンプルの写真 サンプル サンプル サンプル</DIV> <DIV CLASS="clear-d-photo"></DIV> <DIV CLASS="d-date"><!--■項目だけ残す、実際は見出しへ入力--></DIV> <DIV CLASS="d-midasi">***写真日付***</DIV> <DIV CLASS="d-photo"><img src="image/turu.jpg" width="325" height="250" ><!--MorePicsへリンク作成--></DIV> <DIV CLASS="d-text">サンプルの写真です サンプルの写真 サンプル サンプル サンプル</DIV> <DIV CLASS="clear-d-photo"></DIV> <DIV CLASS="clear-d-photo"> <DIV CLASS="footer-1">Internet Explorer 5.0以降でご覧ください。</DIV> <DIV CLASS="footer-2"><!--設定しない--></DIV> </DIV> </BODY> </HTML>
- 三郷北 M君（@mkun55555）
- ベストアンサー率47% (43/90)
<DIV>タグの閉じ忘れ？ たぶん、そのような単純な事だと思いますが、 単純ミスを発見するのは、以外と難しい場合があります。 こういうのは、プログラムのバグ探しと同じです。 プログラムの場合、デバッグツールはたくさんありますが、 HTML、CSSの場合、デバッグツールはあまりありません。 まず、参考URLのサイトで、トップページ以外のHTMLファイルの文法をチェックしてみましょう。何かヒントが得られるかもしれません。 一般的な方法は、完全に動いていた状態から、１行ずつ書いて、 動作を確認する事です。
お礼
皆さんのご意見から記述のまとめ方が少しずつ解りました。 頂いたサイトでは初め２４点でしたが、直したら６４点になっていました。 一行一行確認して直したので凄く大変でしたが、やって良かったです。 有難うございました。
補足
有難うございます。日記ページで試しました。 重要度が高く出たのは”<IMG> には ALT 属性が必要です。 ”と”<A> の HREF 属性の URI `mailto:???@???` は正しくない書式です。” レイアウトには関連が無いと思われるエラーでした。（でもALTって必要なんですね!無くていいと思ってました） ただ幾つか” <DIV> と </DIV> の間が空です。”があるので、やはり閉じ方が間違っているのかもしれません。 <DIV>があったらその後同じ数だけ</DIV>が必要という事ではないんでしょうか？
- maho-maho
- ベストアンサー率44% (725/1639)
下記あたりはどうでしょうか。 http://color.sub.jp/Tools.html http://www.forest.impress.co.jp/article/2007/05/23/bkhvalid.html
お礼
二つ目のチェッカーも試したら「構文ミス」とかたくさん言われてしまいました！ 自分では「なぜ～？」という部分が重要だったりするのが解り、とても勉強になりました。 今後も活用するつもりです。有難うございました。
補足
有難うございます。先ず１つ目の英語のチェッカーを使いました。やはり閉じ忘れがあるとエラーが出ました。 ＞end tag for "DIV" omitted, but its declaration does not permit this. </BODY> 続くメッセージは意味がちょっとわかりませんでした。ここにあってはいけないよと言うことなんでしょうか。（エラーでは無いみたいなんですが・・・） ＞start tag was here. <DIV ID="all"> このチェッカーで言うところの”６８”エラーのようです
- tsmove
- ベストアンサー率49% (61/124)
トップページ以外が崩れるということは、 トップ以外のページをフォルダに入れて階層を下げたにもかかわらず、スタイルシートの参照先を変えていないことが考えられます。 トップ以外のページの、 <link rel="stylesheet" media="all" href="CSSファイル.css"> を確認してみてください。 トップとスタイルシートが同じ階層で、それ以下のページがフォルダに入っている場合、 <link rel="stylesheet" media="all" href="../CSSファイル.css"> とする必要があります。 「../」というのは階層がひとつ上のファイルを参照するという意味です。
補足
有難うございます。 >トップとスタイルシートが同じ階層で、それ以下のページがフォルダに入っている場合 ですが、このテンプレは「テンプレNo１フォルダ」の中に、イメージフォルダ１つ：html３つ（トップ・日記・プロフ、でフォルダは無い） ：CSSドキュメント（カスケードスタイルシートドキュメント、フォルダは無い） があり、トップページの下に他が入っているようには見えないです。 仰るパスの参照を確認したら、確かに全ページ<LINK REL="stylesheet" HREF="main.css" TYPE="text/css">とあります。 これを.../main.cssにしてみたら背景が色・飾り共々消えました。なので全ページが同じ位置にあるのかと思います。 （その形態がおかしいのでしょうか。開始から今までテンプレのこの部分はいじってないです。） 昨日までは表示はちゃんと出来ていたので、編集途中で何かを消したか入れすぎたか…？ 表示に関する重要なタグが抜けているのか、チェックすべき物はありますでしょうか。
お礼
タグのまとめ方と閉じ方は、作成中にゴチャゴチャになっていましたが、参考にしながらきれいにしてみました。 それとCSSにも実はおかしくなっている部分がありました。 ご意見を伺いながら冷静に見直したら糸口がつかめたようです。 １日半かかりましたがちゃんと直った上に、整理の仕方もだんだん解るようになりました。 何度もチェックして頂いて本当に有難うございました。