初心者のためのスタイルシートの使い方

このQ&Aのポイント
  • 初心者の方に向けて、スタイルシートの基本的な使い方を解説します。
  • スタイルシートの中でブロックを分けて配置する方法を詳しく説明します。
  • 画面サイズや解像度に関わらず、スタイルシートを適切に表示する方法について説明します。
回答を見る
  • ベストアンサー

スタイルシート(初心者)

頁全体で一つ、その中の上部にタイトル、その下に左・中・右の3つとにブロック分けしてタグを打ってます。 下の3つはfloatで左に寄せ、縦長に表示しています。その個々の中身が増えても、全体を覆っているはずのブロック(#レイアウト)が下に伸びず、途切れた状態で止まっています。 #レイアウトの部分にoverflow:visibleを入れると、タイトル部分まで縮み、autoを入れると途切れたままになり、scrollにすると唯一伸びますが、スクロールバーが表われるせいで表示がズレます。 ●頁全体のスクロールバーも設定してますが、それより内側にできるスクロールバーを非表示にできますか?どうすれば伸びた分だけ、地の部分も伸びてくれますか?どう直せばいいですか?今の所height:170%とかに変更していってます。 (waidthは%で設定しています。) ●あと、フレームを使わずしてフレームっぽいものは作れますか?例えば上の例でいうと3つのブロックを、枠いっぱいにスクロールボックスにして、それぞれ固有にスクロールできますか?(そこだけスクロールバーを非表示で) ●もう一つ、解像度1024×768で見ていますが、800×600(?)にするとおかしくなります。どのサイズでも見れるようにする設定も教えて下さい。 IE6です。不明な点は補足致します。よろしくお願いします。

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

  • ベストアンサー
  • himacchi
  • ベストアンサー率37% (3/8)
回答No.1

私も初心者なので、それほど詳しくないのですが、 >どうすれば伸びた分だけ、地の部分も伸びてくれますか? 高さを指定するheight属性を削除。 画像以外にheightは使わないほうが良いのでは? テーブルをHTMLタグで設定して、スタイルシートでは枠の太さや色などの「見た目」だけを指定してはいかがでしょうか? 解像度の設定は変えたことがないので分りません。 もっと詳しい方の回答をお待ちください。

Bergamot
質問者

お礼

回答ありがとございます! まずは訂正です。下の3つは、floatではなく、 position:absolute を使っていました。 そしてheightを使用しているのはレイアウト部分のみで、 そのheightを削除すると、地の部分がタイトル部分まで短くなります。 (auto、visibleにした場合も同じになります。) 横並びにしたせいでしょうか。 backgroundのマージンをとり、レイアウトを載せた時の周囲に backgroundの色が縁取るように設定しています。 それをやめたら悩まなくて済むのですが、そういうデザインにしてしまった ので、ちょっと困っています。 またわかればお願いしますね。 *解像度の問題は、自分のパソコンの解像度を変えてチェックする事で とりあえずの対応をしました。

Bergamot
質問者

補足

遅くなりましたが、ありがとうございました。 締め切り忘れていたので、締め切らせて頂きます。すみませんでした。

関連するQ&A

  • スクロールバーを無くしてすくロースさせたい!

    タイトルのままなのですが、現在ページを作っているのですがデザインの関係からスクロールバーを表示させない仕様になりました。 CSSは、 overflow:hidden; の設定を試してみました。 しかし、この状態では当然はみ出したページ部分を読むことが出来ず困っております。 イメージとしては、overflow:hidden;の様にスクロールバーが無くなった状態でそのままスクロールできればと考えております。 フレーム方式にしたら出来るような記憶がありますが、何れにしてもフレームは使用したく無いです…。 どなたか、実現する方法をご存知の方いらっしゃいましたら、アドバイスを頂けますと助かります。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • IE7の<div>のバグ

    IE7でgooglemapの表示がおかしくなります。 <div id=~>で指定した、googlemapを表示させる部分だけ、 スクロールしても左下に必ず表示されるようになってしまいます。 しかもスクロールバーの上にマップが出てくる状態になってしまっています。 親ページのcssに overflow:hidden その下に overflow:auto が設定されています。 フレームが上下に分かれていて、外枠のスクロールは表示せず、フレーム下部のスクロールだけ表示させるためです。 mapはフレーム下部に設定しているのですが、どうやら外枠のスクロールの設定に依存しているようです。 floatは使用していません。 <div id~>にposition:relativeを指定してもだめでした。 一番上位のoverflowではなく、そのひとつ下のoverflowの設定にさせたい場合はどうしたらよいのでしょうか。 他のdivタグはそのようになっています。 また、IE8、IE9でも目的の動きになっています。 IE7だけが上位を見てしまうようです。

  • CSSでoverflowがうまく操作できません。

    BINDを使っているのですが、新着情報の所をoverflow設定し、右側にスクロールバーを作りたいのですが、overflowでscroll設定しても、バーが出てこないか、出てきても新着情報の内容が全て表示され、隠れる部分も全て出てきます。しかも、情報を付け足してもひたすら縦に伸びてゆくだけで、意味がない状態になってしまいます。添付した写真のような感じになってしまいます。どのように設定したらよいのでしょうか。

  • Firefox3.5.2で常時スクロールバーを表示する方法

    今までWEBページを作成していて、 画面遷移時のスクロールバーによる画面のガタつきを防ぐために、 html { overflow-y:scroll; } としていたのですが、Firefox3.5.2ではスクロールバーが 表示されなくなってしまいました。 どなたか、Firefox3.5.2で常時スクロールバーを表示する方法を ご存知でしたら教えていただけないでしょうか?

  • scrollbarを左に表示させるのは可能?

    こんにちは <div overflow:scroll>でスクロールバーを表示させていますが、これを左側に表示させることって可能なんでしょうか? 教えてください。

  • CSSでスクロールバー

    CSSでdivタグにwidthとheightを指定してボックスを作ります。そして、そこにoverflow:scroll;を指定して、そのボックスにスクロールバーを表示させるのですが、下のスクロールバーを表示させないようにするにはどうすればいいんでしょうか?右横の縦方向のスクロールバーは必要ですが、表示させるもののwidthが決まっている場合、下の横方向のスクロールバーが邪魔で仕方ないんですけど。 どなたか教えて下さいませんか??

    • ベストアンサー
    • HTML
  • スタイルシートでスクロールは可能ですか?

    以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 <scroll=内容を切り抜く>ということから当然のことなのでしょうか? <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD>   <TITLE>Test</TITLE>   <STYLE type="text/css">   #left {    position:absolute;    top: 130px;    left: 100px;    width: 300px; overflow: scroll;   }   #main {    position:absolute;    top: 130px;    left: 400px;   }   #right {    position:absolute;    top: 130px;    left: 700px;   }   #footer {    position:absolute;    bottom: 0px;    left: 100px;   }   </STYLE> </HEAD> <BODY> <div id="left">  left<br/> <br/>  left<br/> </div> <div id="main">  main </div> <div id="right">  right </div> <div id="footer">  footer </div> </BODY> </HTML>

  • CSSだけで、テーブルにスクロールバーを表示させたいのですが…

    CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか? 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。

    • ベストアンサー
    • HTML
  • スタイルシートレイアウトで・・

    初めまして。よろしくお願い致します。 先日、知人のHPをテーブルレイアウトからスタイルシートレイアウトで作り直しました。すると、ブラウザでは問題なく見れるのですが、 ホームページ作成ソフトの画面で見ると、大きくレイアウトが崩れています。文字の大きさなどはスタイルシートで設定したとおりです。 ちなみに、元々のHP(テーブルレイアウト)はドリームウィーバー4日本語版というもので作られており、私が作成したものではありません。それを私が、ホームページビルダー10を使って、スタイルシートレイアウトに書き直しました。 いろんなソフトで確認してみると『ビルダー10』のページ編集の画面では、レイアウトの崩れはありません。『ビルダー9』のページ編集の画面でみると右と左に回りこみを指定したのに、文字などが重なってしまいます。 また、『ドリームウィーバー4日本語版』のデザインビュー画面だと文字の大きさ以外のスタイルシートは、全く無視され大幅に崩れてしまって、回り込みなどは全く無視され、下へ下へ書き込んだHTMLソースどおりに表示されます。 『ドーリームウィーバーMX2004』だと左に回り込みを指定した部分だけが崩れて、その部分が左の最下部(フッターよりも下)になっています。 ソフトが違うから崩れるのでしょうか?それともスタイルシートの設定がおかしいのでしょうか?何から修正すればいいのかわかりません。 当方、HP歴はビルダーで1年ほどほぼ独学の初心者です。 うまく説明できなくて、申し訳ありませんがよろしくお願いします。

  • フレームのサイズ固定とスクロールバー

    初心者ですが、宜しくお願いいたします。 現在「上部にタイトル」「下左にメニュー」「下右に本文」のフレームで3分割されたhpを作成途中です。 1.表示サイズを狭くした場合、下右の本文が左によって来て左下のメニューの幅が狭くなってしまいます。左下のメニューの横サイズを固定したいのですがどうすれば宜しいのでしょうか? 2.また、表示サイズを小さくして上部タイトルの幅よりも狭くなった時にタイトルの下ではなく、画面全体の一番下にスクロールバーを出したいのですが出来ますでしょうか? 3.同じ事が縦でもあり、上下の表示を狭くした場合下左のメニューの下が隠れたときに、画面全体の右側(下右の本文の更に右)にスクロールバーを表示したいのですがいかがなものでしょう? デザイン的にフレームとフレームの間にスクロールバーは避けたいのです。 何卒、宜しくお願いいたします。

    • ベストアンサー
    • HTML