- ベストアンサー
スタイルシートレイアウトで
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
おお！かなりスッキリしましたね！ ちょっと時間がないのでぱーっと見ましたがMacのSafari、Firefox、 Operaでは全く問題ないようでしたよ。 MacIEでは相変わらずmain部分の高さ分だけside部分が下がっていますが、ブラウザ自体がCSS適用に少々難がある＋今後新たなバージョンの発表がないブラウザ、なので、特にマックユーザーを意識しないのであれば目をつぶっても良い所かもしれません。正直まかーの人はスタイルシートレイアウトでズレているというのは数年前から慣れっこなんで(^_^;)内容が読めないわけではないですしね。 とりあえずとってもスッキリしていますし、表示もIE以外は問題ありません。この状態だったら、必要なものを付け加えたり外したり、細かいカスタマイズするのも簡単ですね！ もしMacIEでの表示にこだわるということであれば、その旨書いて下さればちょっと考えてみます。
その他の回答 (3)
- neworderk
- ベストアンサー率66% (2/3)
どうやらcss,html共に手直しをされたんですかね？リンク先のcssと、実際適用されているindex.cssが違っているようですので実際のcssを基準にしますね。 リンク先のものは、よく見ると実際のCSSにある、mainやframeといったclassがないので実は原因が違ってるのかもしれませんが、これも手直しされた後に加えられたもののような感じですので、先ほどの回答は私が見た時点でのリンク先のCSSとHTMLのみを見て回答しました...。どれをどう直されたかまで把握してませんので一応リセットした感じで現状でお話しますね。 当方MacSafariで見ていますが、問題になっている下の空白は、先ほど指摘の指定などを外して消えてますよ～。しかしちょっと崩れがありますねえ。MacIEだと結構崩れてますねえ(汗) >と移動させているから、元の４５があった部分に空白ができてしまった、ということですね。 とりあえずこれだけで言えば、position:relativeでbottom:830pxということは、何も指定がない場合又はpositionがstaticの場合の、要素自身の通常位置から830pxだけ要素が上に寄った形になる(=top:-830px)、という指定だと思いますので、示して下さったように何かがあった部分に空白ができたということではない、と言えますかねえ。 すごく簡単に言えば、この指定がない場合の本来の要素の位置が空のまま残ってしまってるような感じといえばいいんでしょうか。 position:relativeでbottom指定は解りづらいですね、基本的に物は重力でぶら下がる、と言えばいいんでしょうか、top指定にしていれば解り易かったかもしれませんね。もう取ってしまったみたいですし忘れましょう(^_^;) IEとFireFoxと言ってまさかMacの、ということはないのが世の常ですので(笑)Winの、となると当方すぐに検証はできません、まかーですいません。ちなみにMacでは現状でSafariがmain部分に重なり有り、IEにfloat異常でside部分がmainの高さ分だけ下に下がっていて、Firefoxはほぼ正常ですが、my hobby isの部分があふれてます。 HTML、CSS共に少々整理されたほうがいいかと思います。margin用のボックスとか必要性がないような気がしますし、main内の各class1とかはボックスにしなくてもpaddingなどでコンテンツ部分と空きの部分を調整してやるとかできます。するともっとすっきりして各要素の関係がもっと解り易くなるので問題を発見しやすいですし、メンテナンスも楽ですよ... が、また別の意図があったらごめんなさいm(_ _)m パッと見ですが現状では、ずれたとかおかしいとかいう原因を掴みづらい状態になってると思います。せっかくCSSにしたのに、一昔前の、テーブルにテーブルを入れまくる、というのと同じような感じなのはもったいないなと思ったり。 左右の高さがズレるということですが、すべて検証してみない事にはちょっとわかりません。ただ、FirefoxとIEだったら、FirefoxのほうがCSSの適用が定義に忠実な感じがします、IEはミスしてても通っちゃうパターンとか多いです。ので、一回なるべく忠実に書いてからIEでどうしてもうまくいかない所をやや不正な感じで書いてしまうとかがいいのでは(^_^:) あと、各要素の高さや幅がpx指定な上に、overflow:hidden;ですと、ブラウザによってはあふれた部分が全く読めない状態になりますので、避けたほうがいいですね。高さや幅のpx指定は重なりまくる原因にもなりますので、%指定とかem指定にしてみたらどうですかね。#frameのwidth指定がpxにしてあるので、ある程度は意図した形で表現できるとして、sideとmainのwidthを70%30%にしてみるとか。そういう感じにするとブラウザによる違いを吸収しやすいですよ。 ...でもこれやってると、ちょっと大掛かりな作業になるかもですよね...winで現状うまく見えているなら、次にやる気が出るまでそっとしておくというのも一つの手では(^_^:)
- neworderk
- ベストアンサー率66% (2/3)
ぱーっと見た感じですので間違ってるかもしれませんが、 div.class1,4,5のposition:relative;以下の 「bottom:830px;」 がアヤシいとしか...。 marginやpaddingの値がやたら大きいという事もないみたいですし...。 CSSがやや複雑な感じですね、各要素をfloatさせてmarginなどでうまく取ればもうちょっと簡単なCSSにできると思いますが、何か別の意図があるなら余計でしたm(_ _)m
お礼
ふむ、少し考えてみました。 つまり今は １ １ ３ ２ ３→ ２ ４ ４ ５ ５ と移動させているから、元の４５があった部分に空白ができてしまった、ということですね。 floatを用いて、 １ ４ ２ ５ ６ と設定してみれば大丈夫そうですね。 ただ、少し引っかかっているのは左右の高さがブラウザによってズレてしまうということです。現在はやみくもに合わせたところなんとかなりましたが、floatで一旦バラバラにするとIEとFirefoxでズレが生じそうです。 これを避ける方法がありましたら、よろしくお願いします。
関連するQ&A
- スタイルシートレイアウトで・・
初めまして。よろしくお願い致します。 先日、知人のＨＰをテーブルレイアウトからスタイルシートレイアウトで作り直しました。すると、ブラウザでは問題なく見れるのですが、 ホームページ作成ソフトの画面で見ると、大きくレイアウトが崩れています。文字の大きさなどはスタイルシートで設定したとおりです。 ちなみに、元々のＨＰ（テーブルレイアウト）はドリームウィーバー４日本語版というもので作られており、私が作成したものではありません。それを私が、ホームページビルダー１０を使って、スタイルシートレイアウトに書き直しました。 いろんなソフトで確認してみると『ビルダー１０』のページ編集の画面では、レイアウトの崩れはありません。『ビルダー９』のページ編集の画面でみると右と左に回りこみを指定したのに、文字などが重なってしまいます。 また、『ドリームウィーバー４日本語版』のデザインビュー画面だと文字の大きさ以外のスタイルシートは、全く無視され大幅に崩れてしまって、回り込みなどは全く無視され、下へ下へ書き込んだＨＴＭＬソースどおりに表示されます。 『ドーリームウィーバーＭＸ２００４』だと左に回り込みを指定した部分だけが崩れて、その部分が左の最下部（フッターよりも下）になっています。 ソフトが違うから崩れるのでしょうか？それともスタイルシートの設定がおかしいのでしょうか？何から修正すればいいのかわかりません。 当方、ＨＰ歴はビルダーで1年ほどほぼ独学の初心者です。 うまく説明できなくて、申し訳ありませんがよろしくお願いします。
- ベストアンサー
- その他([技術者向] コンピューター)
- スタイルシートについてです
自分のホームページにスタイルシートで画像やテキストを位置指定してレイアウトを作っていきたいんですが、この方法で作ったページを見るためにはブラウザなどの環境が整った人でないと見れないんでしょうか？教えてください。
- 締切済み
- HTML
- スタイルシートでInternet Explorer6のレイアウトが崩れる件
Movable Typeで個人的にホームページを作成しております。 ページレイアウトの確認はInternet Explorer7.0とFirefoxで行っており、 レイアウトは特に問題なく表示はしています。 （※細かいずれ等は気にしていません） がしかし、先日、 Internet Explorer6で確認してみるとサイドメニューがページ（本文などのメイン領域）の下に回り込んでいてレイアウトが大きく崩れているのに気づきました。 修正をしようと検索などで調べ、Internet Explorer6ではスタイルシートでの表示が一部異なるようなので、何度も試してみたのですが、どうしてもうまくいかず、ここに辿りつきました。 必要であればスタイルシートをお教えすることも可能です。 どのように記述すればうまくレイアウトできるでしょうか？ アドバイスをお願い致します。
- ベストアンサー
- HTML
- ホームページビルダーを使ってスタイルシートでレイアウトがしたいんですが…。
ホームページビルダーを使って スタイルシートでレイアウト（表、テーブルを使わないで） したいんですが…。 その様な方法をアドバイスしてくれているサイトや書籍 その他参考になるものありませんか？ テーブルレイアウトはSEO的にお勧めでは無いと聞いて できればと考えています。
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートでのページレイアウトについて
ホームページを新しく作りたいのですが例えばこのようなページはどのように作っているのでしょうか？ http://www.wsb.jp/hpb/ スタイルシートを使っているのはわかるのですがどのように位置の指定をしているのか調べてもわかりませんでした。ご教授お願いいたします。
- 締切済み
- その他([技術者向] コンピューター)
- ホームページ レイアウトについて
ホームページ作成について質問です。 複数ページのホームページの内、全ページ共通の罫線や画像（ヘッダー部、フッター部など）のレイアウト微調整を スタイルシートで設定したい、というのが目標ですが、そのレイアウト微調整を position:absolute; で行っていますが間違っているのでしょうか？ 上記を設定したオブジェクトは確かに完全に任意の位置に配置できるのですが、 位置を指定していないHTMLだけに記述されたオブジェクトとレイアウトが重なったりしてしまいます。 全てのオブジェクトの位置をスタイルシートで指定すればそれも回避できると思うのですが、 そうするとひとつのHTMLファイルだけのスタイルシートになってしまうし、スタイルシートはそういう使い方するものではないんじゃないか、と思ってます。。 （そもそも共通設定ファイルにポジションの固定値を記述する事自体、 間違ってる気がしてます） スタイルシートの位置指定を使用しないで左寄せ、中央、右寄せ、以外の レイアウト調整って可能なのでしょうか？ また、ホームページの完全な任意レイアウトの際のセオリー等が ありましたら教えていただきたいです。 以上、宜しくお願い致します。
- 締切済み
- HTML
- スタイルシートを利用したページレイアウト
数年前からWEBページのレイアウトにはCSS(スタイルシート)を使用した ものが一般的になっているようですが、 自分はHTMLの知識はある程度持っているのですが、TABLEレイアウト しか経験がない為、いちからCSSを利用したページレイアウトを勉強したい と思っています。 そこで、そんな私に最適な書籍やWEBサイトがありましたら教えて いただきたいと思っています。 よろしくおねがいします。
- 締切済み
- その他（インターネット・Webサービス）
- スタイルシートが、突然使えなくなった。
ホームページ作りの初心者です。 Win98、IE6を使っています。 HTML、スタイルシートを使ってホームページを作っています。 過去に1個完成させました。 2個目に挑戦し始めたのですが、どうしたわけかスタイルシートの記述が、全くIEに反映しません。 スタイルシートの機能が、壊れてしまったのでしょうか？ 1個目のホームページのスタイルシートの部分は、正常に機能しています。 どなたかお分かりの方、教えて下さい。
- ベストアンサー
- その他（プログラミング・開発）
- スタイルシートについて。
ホームページ作成中です。 スタイルシートで管理された買い物籠を利用しようとしているのですが、うまく設定できません。 左下に白い空白が出ています。 しかし、どこがこの設定をしているのかがさっぱりです。 どこにバッググランドカラー設定をしたらよくなりますか? CSSファイルが必要だったら言ってください。補足に貼り付けます。
- ベストアンサー
- CSS
- スタイルシートについて
ホームページの作成をしています。日記やＢＢＳをレンタルしています。そこで、ホームページと統一感を出すために背景を自分のホームページの背景（私が自分で作ったモノです。）をはりつけたいんですが、スタイルシートについての知識がなく、どうしていいかわかりません。わかる方、またはスタイルシートのわかりやすい説明がのっているホームページを知っている方、どおぞお願いします。
- ベストアンサー
- HTML
お礼
昨晩、手直しした後、CSSを更新するのを忘れていました。 また、この回答を読んだあとにもう一度自分なりに更新しましたので、確認お願いします。