• ベストアンサー

HPのバランスがぐちゃぐちゃになりました。添削してください

HPの更新状況の部分をスクロールにしたいと思い、<div>を使ってやってみたら下記のような状態になってしまいました。 正  http://leialoha.hannnari.com/ 誤  http://leialoha.hannnari.com/index.html ・上の青い部分が要りません。 ・左に寄ってしまってます。 ・画像の両脇が水色に変わってしまっています。 具体的にどの部分をどう変えたらいいのか教えていただけると助かります。 よろしくお願いします。

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

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.2

http://leialoha.hannnari.com/index-1.html をチェックしました。 NEWSのスクロール用に付け足した(筈の)<head>内のCSSの定義が間違っている為ですね。 --------------------------------------------------------------------- 【誤】 --------------------------------------------------------------------- div { width: 400px; height: 150px; margin-bottom: 20px; border: 0px; padding: 5px 10px 5px 5px; background-color:#eaf1fa; } #mado { overflow: auto;} } --------------------------------------------------------------------- ・スクロールさせたい部分のマークアップが<div id="mado">だけの筈なのに、div { (略)}というこの定義の仕方だと、classやidセレクタを問わず、ファイル内の<div>タグ全てに対して"overflow: auto;"以外のプロパティが適用されてしまっています。<div>タグはNEWS以外の部分にも複数使用されているので、スタイルの適用を意図していない箇所まで影響を及ぼし、全体のレイアウトが崩れてしまうのです。idセレクタで定義し直さなければなりません。 ・最後に余計な閉じタグがあります。削除を。 ↓ --------------------------------------------------------------------- 【正】 --------------------------------------------------------------------- div#mado { width: 400px; height: 150px; margin-bottom: 20px; border: 0px; padding: 5px 10px 5px 5px; background-color:#eaf1fa; overflow: auto; } --------------------------------------------------------------------- それから、せっかくNEWSのところをスクロールされるのであれば、「NEWS」という見出しは<div id="mado">の外に置いておいた方がいいでしょう。スクロールに伴い、見出しも見えなくなってしまいますから。 セレクタに関するシンタックスを勉強して下さい。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • abril
  • ベストアンサー率69% (388/560)
回答No.3

一部正しく記述がありましたので訂正します。 【誤】閉じタグ ↓ 【正】閉じ括弧"}" 失礼しました。

hawaii99
質問者

お礼

見出しの置き場所のアドバイスまでありがとうございます。 完璧にできました。 感謝です。 本当にありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • abril
  • ベストアンサー率69% (388/560)
回答No.1

> 正 http://leialoha.hannnari.com/ > 誤 http://leialoha.hannnari.com/index.html この2つは同一のコンテンツですが…?(前者は試しにindex.phpとかindex.aspとか付け加えてみましたけど、いずれもNot Foundだったので、ということはファイル形式はindex.htmlですよね、やはり)

hawaii99
質問者

補足

すみません、間違っていました。 文字化けしてしまうので、言葉で説明します。 上記2つは同一ですよね… 「正」はこれで正しいです。 「誤」のほうは「index-1.html」です。 よろしくお願いします。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • HP作成でわからないこと・

    ホームページビルダのバージョン6を使っています。 このソフトじゃなくてもいいのですが、 あるレイアウトの作成の仕方を教えていただきたいのです。 (1)トップページを2分割にして、左側をメニューに、右側をパラパラかえていくようにしたいのですが、 フレームでわけますよね。そのときにindex.htmlはどうなるのでしょうか?僕がやっているのはindex.htmlを表示させて、フレームでわけると左(F1と呼びます)と右(F2)に新しいページ作成がでて、それで作っています。が、index.htmlは真っ白でいいのでしょうか? なぜか画像とかがばぐったりして、いまいちそこがうまくいきません・・ またこのような場合は、index.html と F1とF2をFTP転送するのでしょうか? うまく説明できなくてすみません。 (2) とあるHPで、F2のところが画像が後ろにあって動かず、その上に文章があるのですが、それはスクロールすると動きます。 このような画像と文章の関係はどのように作成すればいいのでしょうか? 最終的に作りたいHPを載せておきます。このようなページを作りたいからです。 お願いします。 作りたい型のHP http://saseed.fc2web.com/

  • たいやきの藤家さんのHPに関して

    下記サイトに使用されているタグを教えてください。 全部で3つあります。 <たいやき本舗 藤家> http://shiroitaiyaki.com/ 1. http://shiroitaiyaki.com/ 上記ページの右上に表示されている、右から左に文字がスクロールする方法。 電光掲示板の部分は画像なのでしょうか? 2. 真ん中部分 キャプチャーにマウスオーバすると大き画像が切り替わる。 フラッシュじゃなくてJSでできないでしょうか? 3. http://www.shiroitaiyaki.com/shop/ 上記ページの様に店舗紹介をする場合はどうしたらよいのでしょうか? 以上、宜しくお願い致します。。。

  • HP作成について

    こんにちは。質問です。 http://www.biwako-valley.com/index.html このサイトにあるwhat news&topics のような スクロールできるタイプの物を自分のHPにも 作りたいのですが、どのように作ればよいので しょうか?因みにHPビルダーでHPは作成 しています。

  • HP の更新

    荒川静香さんのHPから >オリンピックの期間中は HP の更新が禁止されてメッセージ書けなかったのですが... http://www.shizuka-arakawa.com/message/index.html 選挙で選挙期間中にHPの更新はしてはいけないというのはなんとなくわかるんですが、なぜオリンピックに出ている選手が自分のHPの更新をしてはいけないんでしょうか?

  • Flash/マウスでスクロールするマップにリンクを貼りたい

    画像をマウスの動きにあわせてスクロールさせてリンクのついている ページを作成したいと思います。 http://www.sophia-eternal.com/index_pc.html マップを自動でスクロールさせるということは出来たのですが、リンクを貼るという方法が解りません。 作成したものがあるので見ていただけると助かります。 http://shotgunimp.s328.xrea.com/as.htm 緑の●がリンク部分なのですが、これを★が動く時に一緒に リンクも動いて欲しいのですが、 現在、キャンバスに固定になってしまっています。 ●は現在解りやすくするために色をつけていますが将来的には透明リンクになる予定です。 シンボルをボタンにしているのがいけないのでしょうか? アクションスクリプトはこちらから貰ってきました。 http://hakuhin.hp.infoseek.co.jp/main/as/scroll.html#SCROLL_01 具体的なリンク方法を教えてください。よろしくお願いします。

  • gooの簡単HP

    聞きたい事が2つあるんですが、gooの簡単HPって、左上に「選択ください」ってありますよね?(「ログイン」とか「画像アップローダー」っていうのが書いてある...) たま~に他の人のHPを見ると、それが小さくなってて、とても可愛くなってるのがありますが、あれってどうやるんですか? それと、goo簡単HPはスクロールバーの色を変えられないんですか?

  • HPのレイアウトで縦線を入れるには?

    下記URLのサイトのように、HPの外枠に縦線を入れたいのですが、入れ方がわかりません。 URL:http://www.netyasun.com/ (※上記URL内の「水色の背景」と「HP」の境目の青色の境界線(枠線)のことです) 初歩的な質問過ぎて大変申し訳ございませんが、調べてもわからなかったため質問させていただきました。 どなたかご教授願えれば幸いです。

    • ベストアンサー
    • HTML
  • ホームページビルダー作成HPがiPhoneでズレる

    ホームページビルダーのフルCSSテンプレートを元に作ったHPが、iPad、iPhoneのSafariで見ると、<h1>や<p>が、そのdiv幅の横半分くらいのところでなぜか勝手に折り返してしまい、レイアウトが崩れてしまいます。 PC版のSafariでは大丈夫なのですが、どこをいじれば直りますでしょうか? いろいろやってみましたがわかりません。 下記がHPです。 http://www.ab.auone-net.jp/~pattiko/ 同じテンプレートを使ったと思われるよそのHPもみんな同じように折り返しているので、そもそものビルダーのCSSがおかしいのだと思います。 http://www.wakaclinic.justhpbs.jp/ http://park7.wakwak.com/~tsmc.index/index.html どなたか教えてください。よろしくお願い致します。

    • ベストアンサー
    • CSS
  • 時計をHPに、アップしたいのですが、うまくいきません.

    時計をHPに、アップしたいのですが、うまくいきません。 サンプルのタグを、HPビルダーのindexに貼り付けました、そして、実際、動いている、時計の素材もついていましたので、その画面を、名前をつけて画像を保存で、ファイル化しました(ファイルは水色です)、そして、これらを、同一の、フォルダ(HPにアップする予定の、つまり、FTP転送予定の)に纏めました。 と、ここまでは、出来たのですが、ここからどうやればいいのかわかりません、教えてください、フラッシュの素材も、同じように、ここまでは出来たのですが、ここから、どうもわかりません、すいませんが、教えてください

  • HP作成で背景画像を設定する方法ですが、うまくいきません。

    HP作成で背景画像を設定する方法ですが、うまくいきません。 スタイルシートCSS等でいろいろサイトを見て試しましたが、 画像がどうしてもスクロールしてしまい、思ったように表示できません。 http://ravensky34.web.fc2.com/test.html HTMLタグでいくら設定しても画像が表示されないか、 ↑のように画像が必ずスクロールしてしまいます。 ソースは↓です。 <html> <head> <title>文書のタイトル</title> <style type="text/css"> body { background-color:#f0f0f0; background-image:url(http://ravensky34.web.fc2.com/2008_6_27_059syuku_2.jpg); background-attachment: fixed; color:#000000; }</style> </head> <body> <div>&nbsp;</div> <p>&nbsp;</p> </body> </html> どなたか解決方法を知っている方いましたら、教えて頂けると嬉しいです。

    • ベストアンサー
    • HTML
このQ&Aのポイント
  • LAVIEのタブレット(PC-TE510HAW)でandroid7.1.1のものを使用していますが、アプリのインストールができない状況です。空き容量は十分にあるのですが、原因は何なのでしょうか?
  • LAVIEタブレット(PC-TE510HAW)のandroid7.1.1でアプリがインストールできない問題に遭遇しています。空き容量は十分に確保されているのですが、他の原因があるのでしょうか?
  • LAVIEのタブレット(PC-TE510HAW)を使用していて、android7.1.1のバージョンですが、アプリのインストールができなくなりました。空き容量に問題はないのですが、他に原因があるのでしょうか?
回答を見る