ブラウザサイズによって変わるwebページのサイズ

2023/10/20 20:32

このQ&Aのポイント

ブラウザサイズによって中身のflashやフッターの大きさを調節したい
flashをセンタリングさせる方法がわからない
動的なページ作成のために勉強が必要

ベストアンサー

ブラウザサイズによって変わるwebページのサイズ

2011/03/04 03:42

こんにちわ。ホームページ初心者ですが、いろいろ調べながら作っています。下記の画像を参考に、ブラウザのサイズによって中身のflashや常に画面下に表示されるフッター（flash）の大きさ（幅）を調節したいと考えております。そこでflashを <div id="flash_1">で囲み、 CSSに #flash_1{ max-height:70%; min-height:50%; bottom: 0; padding-left: 0; } などと記述しているのですが、何故かこのFlashがセンターにも来ず、サイズも変わらないままで困っています。基礎的な事もまだ理解できていないので、もう少し勉強してから動的なページを作ろうと考えているのですが、どうしても先に進めずに困っています。特に知りたい事は、 Flashの大きさの変更についてセンタリングについてです。どなたかご教授よろしくおねがいします。

souchou72
お礼率66% (2/3)

ホームページ作成ソフト
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

tsuki11
ベストアンサー率50% (43/86)

2011/03/04 05:02 回答No.1

えーと、質問者さんのソースは・・・ marginが指定されてないので、センタリングされないのだと思います。 #flash_1に width:70%; 　↑もしくはpxで指定 margin:auto; 　↑古いIE対策をするなら　margin-left:auto; margin-right:auto; を加えてみては。上50pxを空けたいのであれば、 margin-top:50px; も加えるといいと思います。ちなみに、bottom:0;　は多分何も反応しないと思いますので padding(div中の空間)ならpadding-bottomに変更、 margin(div外の空間)ならmargin-bottomに変更を。。そして上記変更をした上で、中に入れてあるFlashのObjectタグを width="100%" height="100%" これで多分いけるかと。。いずれも、試しに、divに色をつけてやってみると分かりやすいと思います。

質問者

お礼 2011/03/05 23:50

100％にするといけました！！本当にありがとうございました！！しかしflash編集時の枠外も一緒に表示されるようになってしまいました。 800×350で作っていましたが、ブラウザのページを小さくすれば大丈夫なのですが800以上の大きさになった時に枠外の素材が何故か表示されるみたいです。もう少し試行錯誤してみます＞＜

関連するQ&A

CSSに追加した、footer記述が不完全か　
footer 部を下記の通りCSSに追加したが、画面の最大化では正常ですが、最小化にすると右に横ずれを生じ、どこを修正すべきか分からず解決出来きません。どうかご教示のほどお願いします。（例題を参考にして記述したものです。） html{ position: relative; min-height: 100%; padding-bottom: 100px; } div#footer{ font-size: 12px; position: absolute; left: 150px;　　（例題は、 left: ０; であるが、大幅に左にずれる。） bottom: 0; width: 960px; （例題は、width: 100%;　であるが、右にずれて、設置した仕切り線が無限に右に伸びる現象になる。） height: 100px; } 参考までにCSSに既に記述している---次のwrapper 表示に関係があるのでしょうか。 div#wrapper{ margin: 0 auto; text-align: left; width: 100%; line-height: 1.6; }
- ベストアンサー
- CSS
フッター固定時のdivの背景について
フッターを画面下部に固定するため以下のようなHTMLを書きました。フッターは固定できたのですが、コンテンツの量が少ないと背景が途中で途切れてしまいます。コンテンツの量が少なくても背景を下まで（フッターの上まで）表示させるために何かよい方法はありますでしょうか？ <style type="text/css">  </style> </head> <body> <div id="container"> <div id="screen"> <div id="contents"> コンテンツ </div> <div id="footer">footer</div> </div> </div> </body> </html>
- ベストアンサー
- HTML
ヘッダー・フッター固定HTMLに関して
ヘッダー・フッター固定HTMLに関してヘッダー・フッター固定で（間）中段にFlashコンテンツを横100%縦100%で表示するHTMLを作成しようと思っております。そこで、下記のHTMLソース、及びCSSで指定しているのですが、上手くいきません。ヘッダー・フッター固定はできますが、Flashを表示しようとすると思うようにいきません。「body > #wrapper」を「height:auto;」にすると、Flash部分の高さが小さく、「body > #wrapper」を「height:100%;」にすると、フッター部分が消えてしまします。【HTML】～～～～～～～～ <div id="head">～ヘッダー～</div> <div id="flashcontents">～Flashデータ～</div> <div id="foot">～フッター～</div> ～～～～～～～～【CSS】～～～～～～～～ html,body {margin:0;　padding:0;　overflow:hidden;} #head{～サイズなどを指定～} #flashcontents{margin: 0;　height: 100%;　width: 100%;} body > #flashcontents {height:100％;　position: absolute;} #contents {　position: fixed;　overflow:hidden;　bottom:0;　他サイズなど指定…} ～～～～～～～～以上、分かりにくい説明かと思いますが、もしお分かりになれば教えて頂けますでしょうか？よろしくお願い致します。
- 締切済み
- CSS
CSSでfloatした要素の高さを100%にしたい
はじめまして。下記のコードは、HTMLファイルで<head>内に<style>を設けて、そこでCSSを操作しています。この中で<section>が一か所あるのですが、この要素を一番したの<footer>まで届かせたいのですが、hight: 100%, min-height:100%などにしても言うことを聞いてくれません。　heightを極端に大きくすれば<footer>まで届きますが、それ以外にCSSを使ってきちんとアジャストする方法があれば、ご教授いただければ幸いです。以下コードです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html { height: 100%; } body { height: 100%; margin: 0; position: relative; } #root { background: #ccc; min-height: 100%; width: 100%; } header { background: red; height: 30px; width: 100%; } nav { background: gray; float: left; width: 20%; height: 400px; } section { background: green; float: left; width: 70%; min-height: 100%; /** <----- なぜか下まで行かない **/ padding: 60px 0; } footer { background: blue; height: 200px; width: 100%; position: absolute; bottom: -25px; left: 0; margin: 0; } </style> </head> <body> <div id="root"> <header>header</header> <nav>nav</nav> <section>section</section> <footer>footer</footer> </div> </body> </html>
- ベストアンサー
- CSS
min-heightとheightの違いについて
HTML、CSSを勉強中です。こちらで似た質問は拝見したのですが、疑問が解決できなかったので投稿させて頂きます。ページの内容が少ないときにもフッターを最下部に表示させるため、いくつかのサイトを参考にさせて頂いて以下のようなコードを書きました。・HTML(一部) <html> <body> <div id="container"> <div id="article">内容</div> <div id="footer">フッター</div> </div> </body> </html> ・CSS（一部） html,body { height: 100%; } div#container { position: relative; min-height: 100%; } body > #container { height: auto; } div#article { padding-bottom: 20px; } div#footer { position: absolute; bottom: 0px; height: 20px; width: 100%; } これで目的は達成したのですが、ほぼ丸写しの作業で、containerにheightではなくmin-heightを指定する意味がよく分かりません。 min-heightは高さの最小値を設定するプロパティとのことで、これ自体が上手くいくことは分かるのですが、何故heightに替えると上手くいかないのかが分かりません（実際に、フッターがページ内容の終わり位置まで浮き上がってきます)。親のbody、親の親のhtmlの高さが100%に指定されているのだから、containerの高さ(height)もこれらに対して100%とすることで画面いっぱいの高さが常に確保されるのかと思ったのですが、違うのでしょうか。そもそもhtmlの高さは何に対して100%なのかと調べてみると「表示領域に対して」とのことで、実はこの記載があったページではmin-heightではなくheightを利用してボックスの高さを100%に出来るとまとめてあったのですが、上述の通り私は今回の目的には上手く利用できませんでした。「高さ100%のhtml、bodyに対してcontainerのheightが100%」というのが上手くいかないのなら、何故heightをmin-heightに替えるだけでOKなのかますます分からなくなってしまいました。だらだらとした文面で申し訳ないのですが、解説していただければ大変助かります。
- 締切済み
- CSS
[CSS]　常にフッターは下部に表示　IE7
常にフッターは下部にくるように下記のスタイルとhtmlを使用しております。内容が少ない場合でも、下記のように常に画面一番下にくるようになっております。 ---------------------------- 内容 ---------------------------- フッター部 ---------------------------- 【HTML側】 <body> 　　　<div id="container"> 　　　　　<div id="main"><p>内容</p></div> 　　　　　<div id="footer">Copyright</div> 　　　</div> </body> 【CSS】 body,html{height:100%;} #container {border:1px #000 solid; width: 900px; margin: 0px auto;position: relative;height: 100%;min-height: 100%;} body > #container {height: auto;} #main {background:#f00;padding-bottom: 100px;} #footer {background:#ff0; position: absolute; bottom: 0px;left:0px; height: 100px; width: 100%;} IE9などですと、最初に画面を開いて一番下にいたフッターが、画面サイズを広げると一緒にくっついて一番したのままでいるのですが、 IE７で見ると、最初に開いた画面では一番下にいるのに、画面を広げるとその場所のままです。更新をかけると一番下に移動するのですが、これはIE7では無理なのでしょうか？広げたら一緒にフッター部がくっついていってほしいのですが、わかる方がいらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- CSS
CSSで画面サイズを縮小するとレイアウトが大きく崩れてしまう
CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更（縮小）すると右側のBOXがすべて左側の下に回り込んでしまいます。できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか？ frameとかだと*で対応するみたいなんですが・・・ひとまず、周り込を回避する方法が優先です。どうかよろしくお願いいたします。 @charset "shift_jis"; body { margin: 0px; height: 100%; padding: 0px; font-size: 12px; line-height: 150%; } html { height: 100%; } img { border: none; vertical-align: bottom; } #left { background-color: #666666; width: 350px; float: left; min-height: 100%; height: 100%; } #right { height: 100%; padding: 35px 0 0 0; min-height: 100%; width: auto; margin: 0 0 0 350px; }
- ベストアンサー
- HTML
カラム高さ揃え+固定フッター
いつもお世話になります。 ●確認ブラウザIE6、IE7、FF、 Mac Safari FF 左側幅可変のリキッドレイアウトの中で、 div#wrapの中にある「#boxB、#boxC」のカラム高さが揃った上で #footerはページ下部に固定されている、添付図の状態にしたい。 ●できてること： IE7、FFにおけるカラム高さの統一、固定フッタ ●ここができない： 1.IE6にてboxBとCの高さが揃わない（Cが足らない） 2.#wrapと#footerにすきまが空く（boxBとCの背景色がfooterの上まで来てほしいのです）（全部のブラウザにて） ★CSS /*リキッドレイアウト部分*/ * { margin:0; padding:0; } body { text-align:center; } #container { width:96%; margin-left:auto; margin-right:auto; text-align:left; } #boxA { background:#ffc; } #boxB { background:#fcc; width:100%; float:left; margin-right:-200px; } #boxB p { margin-right:200px; } #boxC { background:#ccf; width:200px; float:left; } #boxD { background:#cfc; width:100%; float:left; } /*100%固定フッタのためのCSS*/ *{ margin:0; padding:0; } html,body{ height:100%; background-color: #000000; color: #000000; } html{ overflow-y:scroll; } #container { width: 100%; position: relative; height: auto !important; height: 100%; min-height: 100%; } div#footer{ position:fixed; bottom:0; left:0; text-align:center; width:100%; } /* * * IE6 * * * */ * html, * html body{ overflow-y:hidden; } * html div#maincontents{ height:100%; overflow-y:scroll; } * html div#footer{ position:absolute; } /* カラム高さが違うものを揃える */ #wrap { overflow:hidden; } #boxB,#boxC { padding-bottom: 32768px; margin-bottom: -32768px; }
- ベストアンサー
- HTML
divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。
divタグ+CSSでレイアウトしようとしています。横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？
- ベストアンサー
- CSS
borderをページの下まで伸ばしたい
お世話になります。既出の質問を見たのですが、解決できず質問させていただきます。テーブルを使い左右にレイアウトを分けています。左のメニュー部分の上下両サイドにborderを設定していますが、メニュー部分の方が圧倒的にメインよりコンテンツが少なく、ページの途中でborderが途切れてしまいます。メインコンテンツの縦量に合わせて下まで伸びて欲しいのですが、どうすればいいのでしょうか？恐れ入りますが下記ソースです。 /*CSS*/ body { margin: 0px auto; padding: 0px; height:100%; width: 760px; text-align:center; position:relative; } #header { padding:0px ; margin: 0px auto; width: 760px; height: auto; } #contents { margin: 0px auto; padding: 0px; height:100%; width: 760px; background-color:#FFFFFF } .side{/*メニュー部分*/ margin:0px; padding:0px 0px 20px; border:1px #666666 solid ; width:163px; height:auto; } .footer {/*フッターの背景画像サイズに合わせheightを設定*/ margin:0px; padding:10px; width: 760px; height:72px; text-align:left; background-image:url(image/bottom.gif); background-repeat:no-repeat; border:0px; } .coretable{/*画面レイアウト左右分けテーブル*/ margin:5px 0px 0px; padding:0px; width:760px; }  <body> <div id="header"> ヘッダー内容 </div> <div id="contents"> <table border="0" cellpadding="0" cellspacing="0" class="coretable"> <tr><td width="165" align="center" valign="top"> <div class="side"> メニュー内容 </div> </td> <td width="595" align="center" valign="top"> メインコンテンツ内容 </td> </tr> </table> </div> <div id="footer"> フッター内容 </div> </body> </html> あるサイトで拝見して、 .sideに height:100%;/* for IE6 */ min-height:100%; を加え、 html{ height:100%; } body{ height:100%;} としてみたところ、borderは伸びず、footerがページの途中に上がってきてしまうという現象でした。テーブルを使っているのが悪いのでしょうか？どうかお知恵をお貸し下さい。
- ベストアンサー
- CSS