• 締切済み

フレームを使わず、スタイルシートを使用して、視覚的にフレームを使用した

フレームを使わず、スタイルシートを使用して、視覚的にフレームを使用したメニューを作ろうということで、ホームページを作成しました。 divにてコンテンツブロックを分け、スタイルシートで、そのブロックの並びを制御してやろう、とまあ、こういういきさつです。 制作したのが、こちらのページ。制作したHPのリンクを張るのはOKWaveのルール違反のようですが、あえて… http://www.poetican.com/poetica/ このHPに使用しているすべてのページが、同じデザインで制作されています。 IEでは、理想通りにページが展開されるのですが、FireFoxやGoogleClomeでは、そのようには表示されません。 CSSファイルは、次のアドレスです。 http://www.poetican.com/poetica/poetica_main.css おそらく、『float: left;』というのがまずいようですが… W3Cに準拠し、なおかつ、どのブラウザでもIEと同じように表示させるためには、どのようにすればいいのでしょうか。 可能であれば、CSSだけを修正すればいいような感じでできればありがたいのですが…。 アドバイスを、よろしくお願いします。

  • HTML
  • 回答数1
  • ありがとう数2

みんなの回答

noname#119957
noname#119957
回答No.1

右側のcontentsは幅が、100%に表示されていますので、CSSに幅指定で70%とか、600pxなどの幅指定をすればいいと思います。 普通は、ピクセル指定がおおいです。%指定にするとブラウザのwindowのサイズにより幅が変動しますので考慮する必要があります。 なお、HTMLに<p>が一つ余計に入っています。

alexseed
質問者

お礼

幅が100%になっている、ということで…なるほど、数値の指定をしなければ100%と判断されてしまうようですね。 と、いうわけで、幅の数値指定をしたら、無事に表示されるようになりました。ありがとうございました。 この件とは別に、また違う疑問も出てきましたので、それはまた別件として質問を出させていただきます。

関連するQ&A

  • スタイルシートを使用したホームページの作成について

    教えて下さい。ホームページビルダー7を使用して、現在HPを作成しているのですが、スタイルシートを使って、同じレイアウトのページを作成したいと思っています。イメージとしては、ページ上部にタイトル、左側にメニューバーと考えているのですが、これをテンプレートとして保存して、各ページを作成しているのですが、この方法だと、メニューに1つコンテンツを増やしたりすると、すべてのページに1つずつコンテンツをつけてしていかなければいけません。今後の事を考えれば、コンテンツが増えていくと考えられますので、外部スタイルシート(css?)を使用して、そこを変更すれば全ページのメニューに反映されるような方法をとりたいと思います。 フレームを使用すればそれは簡単ですが、HPにフレームはいろいろな弊害があるので、やめたいと思います。フレーム以外でそれと同じような方法があればよろしくお願いします。 私のホームページの知識は、ビルダーで作成して、HTMLをちょこちょこと変更するぐらいなので、専門的に勉強していません。大体の意味がわかるのですが…。 どうぞよろしくお願いします。

  • スタイルシートやフレームなど使いますか?

    現在、ホームページビルダーにて作成しています。 スタイルシートやフレームページなどは、ブラウザによっては対応していないことがあるとのことで、 現在、どちらも使用はしていません。 自分はそれで良いと思うのですが、 一般的なブラウザでは、まず見られるし、 あまり制限すると、せっかくの新しい機能が使えないと言うことにもなります。 フレームに関しては、使わないと言う人が多いようですが、 スタイルシートに関しては、そうでもなさそうなんですが、 このあたりの理由は何でしょうか? スタイルシート未対応でも見られると思いますが、 見栄えが崩れる場合がありますよね。 今後の参考にお願いします。

  • CSSスタイルシート・疑似フレームでのターゲット指定リンク

     CSSのスタイルシートを使ったフレームページ風のデザインがありますね。(疑似フレーム)  フレームページであれば、ターゲットによってそのターゲットとなったページのみリンク先に飛べますが、CSSのスタイルシートでも再現できますか?  CSSのスタイルシートではidで別れていますが、どうすればできますかね?JavaScriptを利用すればできるという話を聞いたことはありますが、実際どうすればいいのかわかりません。方法とそのことが詳しく記載されたサイトなどを紹介して頂ければ幸いです。

  • 外部スタイルシートへのリンク方法、パスのhtml

    外部スタイルシートへのリンク方法 ※ 具体的なパスの書き方、htmlを教えてください。 当方HPを作成しています。 XXXXX.comというサイトに“CSS”で書式スタイルを定義しています。 XXXXX.com内の“CSS”ですので、 XXXXX.comの中であれば、定義した文字がしっかり反映されています。 これは普通のことです。 さて、このページに、とある外部フォームページ(他社CGIによるもの)を組み込みました。 そのフォームページは外部のプログラムなので、XXXXX.comの画像を使用するにしても、 スタイルシートを使用するにしても、XXXXX.comに対して“パス”を指定する必要があります。 で、画像の場合は、 http://www.XXXXX.com/画像の名前.gifでなんなくリンクさせることには成功。 しかし、スタイルシート(CSS)へのリンクが、成功しません。 書式が全然変わらないのです。 一応<head>内に、このようにしたのですが、やはり間違っているのでしょうか?     ↓ <link href="http://www.XXXXX.com/CSSの名前.css" rel="stylesheet" type="text/css"> <style type="text/css"> htmlにお詳しい方、またはサイト制作にお詳しい方、お待ちしています。 宜しくお願いいたします。

  • IEでスタイルシートがうまく表示されない

    Dreamweaver8で、スタイルシート(css)を外部にして、 HPを作成しました。 スタイルシートでh1,h2,pなどの文字を再定義しているのですが、 IE6でHP表示させると反映されません。 一方、opera8では、きちんと反映されて表示されます。 IE6の設定に問題があるのでしょうか? なお、IEにおいても、文字以外のスタイルシートの設定はきちんと反映されています。 よろしくお願いします。

  • スタイルシートによる疑似フレーム内のキャプチャ

    スタイルシートによる疑似フレーム内のキャプチャを撮りたいのですが、どうしても上手くいきません。フレーム内は、スクロールしないと下まで表示されないようになってます。 色々キャプチャソフトを探してみたのですが、スタイルシートによる疑似フレームに対応したものが見つかりません。 何か良い方法はないでしょうか? ご助言よろしくお願い致します。 環境: OS: Windows7 ブラウザ: IE9/Google Chrome/Firefoxのいずれか

  • 外部スタイルシートをブロックによって使い分ける方法?

    htmlとstylesheetの初心者です。スタイルシートの書き方について教えてください。 例えば <div class="style1"> <!-- または <div id="style1"> --> ここでは外部スタイルシート style1.cssを使用 </div> ここではデフォルトのスタイルシートを使用 <div class="style2"> <!-- または <div id="style2"> --> ここでは外部スタイルシート style2.cssを使用 </div> のようなことをしてブロックごとに外部スタイルシートを使い分けるようなことができるのでしょうか?もしできるようならその方法をご教示ください。 style1.cssとstyle2.cssでブロックごとの見栄えを変えたいのですが・・よろしくお願いします。

    • ベストアンサー
    • HTML
  • SEO対策とフレームの問題をスタイルシートで。

    SEO対策として、検索エンジン用のサイトマップを 作成しました。 次に、関連のサイトに相互リンクを申し込み、いくつかは、 相互リンクできました。 直、トップページにリンクを張るのは、デザイン上悪く、 SEO対策としては、現在では、効果があまり無いと、よく聞く。 フレームのページだが、どうしても、見やすさでは、必要なので、 トップページのみ、フレームを無くした。 ※そのほかにサイト登録などは、しました。 上記の流れをやってきました。googleのPageRankは、2となっており、 なかなか、あがりません。もちろんPageRankをあげるのが、主で無く、 アクセスアップが、目的です。 そして、目指している競合(ライバル)サイトは、いくつもありますが、 愚者の館が、もっとも、アクセスが高いようです。 そこで、アクセスアップのためには、フレームを使用するのは、 よくないと言うことで、CSSを利用した擬似的フレームを作成 したいのです。項目を何度も、作らなくていい、フレームは、 便利ですので、それも生かした、外部スタイルシートを作成できればと、思います。 CSSのスキルもHTMLのスキルもありません。 FrontPageを使用しているので。 そんなレベルで、アクセスアップの様々な手法を教えてください。 スタイルシートも重要ですが、アクセスアップを重視します。

  • スタイルシートの共有

    DREAMWEAVER MX使用です。 スタイルシートの共有をしたいと思うのですが、マニュアルを読んでもいまいちやり方が分かりません。スタイルシート用のフォルダを作り、そこにCSSファイルをまとめて保存して、ほかのページを作る際にもリンクさせて使いたいのですが、CSSのウィンドウには常に1つのCSSファイルしか表示されません。(1つリンクさせると1つ消えてしまうのです)。 やり方が間違っていると思うのですがご助言下さい。 定義場所、というのもよく理解できません。

  • 擬似フレーム

    フレームだらけのHPを,擬似フレームを使用したHPに改造しようと色々と試行錯誤していますが,JavaScript等が良く判らず,難儀しております. 理想としているのは,「擬似フレーム(疑似フレーム)」の作り方(IE6 にも対応、スタイルシート(CSS)、JavaScript使用)」http://www.kuhp.kyoto-u.ac.jp/~diag_rad/web/p_frame.html のサイトです. このサイトを参考にした,「高密度商業地域 - 擬似フレーム」http://komitsudo.blog70.fc2.com/blog-entry-32.html にある 「実際に動作しているサンプルページ」http://blog-imgs-27-origin.fc2.com/k/o/m/komitsudo/index.html と同様の本文がスクロールするHPは作れたのですが,ヘッダー・サイトマップ・フッターの共用の仕方がわかりません. よろしくお願い致します.

    • ベストアンサー
    • HTML

専門家に質問してみよう