作成中のホームページの表示が崩れる原因の探り方
- 作成中のホームページの表示が崩れる原因を探る方法とは？
- CSSとHTMLを使用して作成中のホームページの表示の崩れを修正するにはどうすれば良いのか？
- ホームページの表示が崩れる原因を特定し、修正するためのヒントを教えてください。
- ベストアンサー
作成中のホームページの表示が崩れる原因の探り方
こんにちは。質問の仕方がわからないのですがヒントだけでもつかめればと思いまして、お願いします。 テンプレートを変更しながら作成する方法で作っています。 スタイル形式はCSSで、それをHTMLで読み出すやり方で、テンプレの”ソース”とテンプレにセットでついてきた（？）CSSを使っています。 本は「ホームページをお手軽に作って10倍楽しむ本（技術評論社）」で、出版社のサイトからテンプレをもらいました。 で、トップページ・プロフィールページ・日記ページとあります。写真を入れたりバナーの画像を変えたり何日かやりました。 今日ファイルを開いたらトップ以外のページが物の見事に崩れています。 まずトップ以外のページに共通設定したサイトバナーが無く、基本形の文字だけ。 各ページのタイトルはボーダーで囲ったのに、ボーダーが無く基本形の文字だけ。 日記の一日ごと日付を入れるための見出し（塗りつぶしのバー状態）が無く、基本形の文字だけ。 写真はFloatで左寄せ・文字右にしたのに無視。 そしてこれらの要素が全部、ページの左に隙間無く寄ってしまいました。 元々日記はテーブル無し、プロフはテーブルがある、というものです。 <DIV>タグの閉じ忘れ?全角?と思うのですがどこをいじっても変わらないし、 どこから手をつければ良いのか分からない状態です。 トップページ以外が同じような崩れ方です。トップから共通のバックグラウンドは問題ないみたいなのです。 こういった際の間違いの見つけ方や、何か一般論的な事柄があれば教えてください。 何とか自分で解決したいのですがお手上げ状態です。
- その他（インターネット・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にしてみたら背景が色・飾り共々消えました。なので全ページが同じ位置にあるのかと思います。 （その形態がおかしいのでしょうか。開始から今までテンプレのこの部分はいじってないです。） 昨日までは表示はちゃんと出来ていたので、編集途中で何かを消したか入れすぎたか…？ 表示に関する重要なタグが抜けているのか、チェックすべき物はありますでしょうか。
関連するQ&A
- ホームページ制作 バナーが落ちて戻らない
HPに設置したバナーが一段落ちてしまったのですが、 何か原因が考えられますか？ ≪詳細≫ 私のHPのトップページにはバナーが３つ並べられています。 あるとき、更新したトップページをFFFTPでUPしたところ、 ３つのうちの一番右端のバナーが一段落ちた状態になって しまいました。 他には、フォントのサイズが元に戻ってしまったり、 斜体にしていた文字が元に戻ってしまったりしています。 CSSは特に触っていないのですが、UPしただけでバナーが 落ちたりすることってあるのでしょうか？ 原因がおわかりになる方、ぜひお教えください。 宜しくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- CSSでおかしな表示が
現在市販の本でCSSを学んでいる初心者のものです。 XHTMLとCSSの基本の本です。 こちらはその教科書をやっていて出てきました。 CSSのファイルがあり、そちらにaddressのところにborder-topをいれるとなぜがボーダーが上下に出来てしまいます。 太さが指定したものより細く出ているのでもしかしたら上に出ている線がどういうわけか割れて上下にでているのではないかともみえなくはないのですが。 topをbottomに変えると普通に下のみに線が入ります。 なにがおこっているのかよくわかりません。 ブラウザの設定が原因でしょうか。 教科書とは同じように入力しているとは思うのですが。 教えてください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- ホームページのテンプレートを二種類使いたいときstyle.cssはどうアップしたら？
ホームページビルダー１０とＦＦＦＴＰを使用しています。 初心者なのですが、先日フリーでダウンロードしたテンプレートの 使い方をようやく少しわかり、初めてテンプレートを使って 自分のサイトのＴＯＰページを変えてみました。 それでＴＯＰが変わったので、他のページもテンプレートを使いたいのですが、別のテンプレートをダウンロードして使いたいのです。 その場合、ビルダーで編集はできても、サーバにアップするときに、 style.cssはＴＯＰで使ってるstyle.cssファイルがアップされてしまっているので、新しいテンプレのファイルをアップすることができません（上書きされてしまう） なので、ＴＯＰ以外のほかのページはデザインが崩れてしまい正しくテンプレの表示ができません。 こういった場合どうしたらいいでしょうか？ 複数の種類のstyle.cssをサーバにアップする方法があれば教えてください。 もしくは他の方法でしかできないのであれば教えていただけれると嬉しいです。よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートとページ内の指定矛盾について
tableタグのborderについてなのですが、 基本的にはborderを表示したくないので全ページ共通のスタイルシートで border: none; にしているのですが、あるページの一部分だけtableでborder="1"にしたい箇所があり当該ページ内のそのtableだけborder="1"と付け加えたのですがIE6で見たところ上と左だけ表示されていて右と下は表示されていませんでした また、Firefoxでは全て非表示でした CSSよりもその箇所の指定の方が優先されるのかなと思ったのですが、うまく表示されません どう対処すればいいでしょうか
- ベストアンサー
- HTML
- ホームページ作成・リンクについて
閲覧ありがとうございます。 ホームページを作成しているのですが、ページリンクの装飾についてお聞きしたいことがあります。 cssでリンクの部分に点線で下線が表示されるように設定しているのですが、 border-bottom-style:dotted; これだと、バナーなどの画像部分にも点線が表示されてしまい、少々不恰好です。 指定した部分だけ下線を表示させなくすためにはどういったタグを入力すればいいのでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- Dreamweaver8でタイトルタグの共通部分を一元管理したい
Dreamweaver8使用しており、CSSコーディングです。パソコンはXP home。テンプレ1つからウェブページを作っていき、それぞれにライブラリ使用しています。宜しくお願いします。 タイトルタグやメタタグの共通部分を一元管理したいのです。 例えばテンプレのタイトルタグの全ページ共通部分＋各ページで編集できる部分、といったように。つまりタイトルタグは「全ページ共通文字 各ページで編集できる文字」といった感じです。 テンプレのコードビューで<title></title>の間に文字入れて反映されませんよね。他の方法でやるのでしょうか。
- ベストアンサー
- ホームページ作成ソフト
- ホームページ作成関連
ホームページを作成するにあたって、トップページのグローバルナビなどからリンクを飛ばしたい時は、どのようにしたら良いのでしょうか。 トップページはHTML/CSSで作れるのはわかりますが、例えば飛ばす先がブログだとしたら そのブログもHTMLなどで作れるのでしょうか？ 作れるとしたら、それはindex.htmlなどのファイル名を変えて別ファイルで作成すればいいのでしょうか？ それとも、ワードプレスやアメブロなどの別のブログサイトに飛ばす方が良いのでしょうか？ もし何かいい方法があれば、お勧めの教材や本などがあれば合わせて教えてもらえればありがたいです。 質問がわかりづらかったらすみません。
- 締切済み
- CSS
- ホームページビルダーでcssレイアウトは可能ですか？
Web制作初心者です。 Htmlのtableでトップページ全体をレイアウトすると、読み込みが遅くなるそうですが、ホームページビルダー9を使っているため、レイアウトを作るのは簡単にすみ、いままでtableで作成してきました。 今度、新たにサイトを作るのですが、cssでレイアウトを作りたいと思います。そこで、ホームページビルダー9はcssでtableのようなレイアウトを作ることは可能なのでしょうか？ tableの場合は、「表の挿入」を選んで、「行の追加」や「列の追加」、「選択セルの結合」とかでどんどん表を作っていって、セルに画像追加や文字を書いていました。 こういうのはcssでは（ホームページビルダー上では）どのようにするのでしょうか？ あと、tableを作って、その下にもtableを追加していくと、ページをプレビューした場合、下のほうに行くにつれてそれぞれの表がズレていきます。cssではズレないようにできるのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- ホームページを作っていてトップのバナー画像をクリックするとトップページに戻るように設定したい
いまテンプレートを使ってホームページを作っているのですが、 タイトルの書いたトップのバナー画像をクリックすると トップページに戻るようにしたいのですが、 HTMLとかCSSとかよくわかりません。 どのようなタグなどを入れたらよいでしょうか？ よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- IEでのテーブル表示について
こんにちは。 web作成初心者です。 今回ホームページ作成することになり，一から（テンプレートを使わずに）必死にもがいております。 いろいろ新たに知ることは多く，CSSの初期化は理解し実装しております。 そこで，今回ドロップダウンメニュー（CSS）の下に左に画像，右に文書を入れたいと思い， tableを入れてみたのですが…firefoxではきれいに表示されるのですが， IEでは表示されません（文字のみ表示）。 いろいろ調べてみても原因が不明です。 tdの中の border-width : 1px; を外せば枠線は表示されますが色が反映しません。 いろいろご教授よろしくお願いいたします。 ［HTML］ <table class="top" border="1"> <tbody><tr> <td>aaa</td> <td>bbb</td> </tr></tbody></table> ［CSS］ .top{ position : absolute; top : 122px; width : 792px; height: 200px; z-index : 1; } .top td { border-color : red; border-width : 1px; }
- ベストアンサー
- CSS
お礼
タグのまとめ方と閉じ方は、作成中にゴチャゴチャになっていましたが、参考にしながらきれいにしてみました。 それとCSSにも実はおかしくなっている部分がありました。 ご意見を伺いながら冷静に見直したら糸口がつかめたようです。 １日半かかりましたがちゃんと直った上に、整理の仕方もだんだん解るようになりました。 何度もチェックして頂いて本当に有難うございました。