あなたの映画力を試せる!POPLETA映画検定(無料) >>

表示倍率を変えるとレイアウトが崩れます。

現在、Webページの製作練習を行っています。
画面上部にメニューボタンを4つ(223×36)設置しているのですが、
マウスで表示倍率を変えると途端にレイアウトが崩れてしまいます。

スタイルシートは下記のように設定しています。

#container {
margin-left:auto;
margin-right:auto;
width:900px;
text-align:center;
border:1px solid #ffffff;
}

#topNavi {
width:900px;
background:#000000;
border-top:1px solid #a3a3a3;
border-bottom:1px solid #a3a3a3;
}

#topNavi div {
float:left;
margin:0px;
height:36px;
width:223px;
}

そして、それぞれの画像の両脇に、border:1px solid #656464; を設定しています。

div#containerで、全体が画面の中央に配置されるように設定し、
div#topNaviではメニューの区切りをわかりやすくするために、
上下にborderを設定しました。
div#topNaviで、メニューを横一列に並べています。


ここでいくつか気になっているのですが、
1.#containe、div#topNaviにそれぞれ設定されているborderですが、width900pxの中に含まれるのでしょうか?
2.なぜ倍率を変化すると崩れてしまうのか?
3.何か良い方法はないか?
もしよろしければ、ご教授をお願い致します。

このQ&Aに関連する最新のQ&A

練習 マウス」に関するQ&A: マウスの練習

A 回答 (2件)

>1.#containe、div#topNaviにそれぞれ設定されているborderですが、width900pxの中に含まれるのでしょうか?



標準モードでは、borderの数値は基本的にwidthに含まれません。
ただし、tableのborderは外側半分をmarginに含んだり少し複雑なので全てではありませんが。
Firefoxの場合は、この部分に関しては標準準拠しておらずmarginに含んでいないようにみえますし、ブラウザ依存の部分も多々あります。

>2.なぜ倍率を変化すると崩れてしまうのか?

No1さんがおっしゃっているように数値が割り切れずに足した数が900pxを超えてしまっているからではないでしょうか。

>3.何か良い方法はないか?

ボタンに画像を使用している場合、width:225pxに増やして、
画像にborderを書いてしまうという方法があります。
テキストを使っている場合も、背景画像にborderを引いてしまえば解決できます。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございました。

今回はアドバイスいただいたように、画像に含めて作成することにしました。
割り切れない端数は結構問題になるのですね;;
勉強になりました。

お礼日時:2011/08/01 20:17

例えば


1pxの線を引いてから2倍⇒2pxの線
2倍してから1pxの線⇒1pxの線

あとは、拡大した時の端数の扱いのバラつきとか。
    • good
    • 0
この回答へのお礼

端数のばらつきによっても変わってしまうのですね。
ありがとうございました。
もう一度考え直してみます。

お礼日時:2011/08/01 20:16

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q文字拡大時にレイアウトが崩れる

普段何も気にせずに制作していたら○のように
文字を拡大してもレイアウトが崩れなかったのですが
新しくホームページを作っている時×のようなレイアウトになってしまいました。
下のfooter部分に食い込んできます。

2つのホームページを見比べても解決しません。
何が悪いのか見当も付きません。

似たような回答は他にもあったのですが解決できませんでした。
ご教授いただけますでしょうか

Aベストアンサー

No2です。解決できたようでよかったですね^^
heightはケースにもよりますが、基本的に可変の可能性のあるdivなどには指定しないほうが良いと思います。
ユーザーが文字を大きくしたときに崩れたり、のちのち文言を変更しようとした場合にCSSをその都度いじらなくてはならなかったり…と、ユーザーにも作成者にも不便になりますしね。
heightを指定していたのは、もしかして左右のボックスの高さを揃えたかったとかでしょうか?(もしそうならheightLine.jsなどを使用するといいかも!)
頑張ってください!

QCSSで画面サイズを縮小するとレイアウトが大きく崩れてしまう

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;
}

CSSとXHTMLで、左と右に分かれただけのデザインという少し変わったレイアウトで作ってみたのですが、画面サイズを変更(縮小)すると右側のBOXがすべて左側の下に回り込んでしまいます。
できればスクロールバーなどを出現させて、レイアウトが崩れないようにしたいと考えています。
色々いじくっていたらめちゃくちゃになってしまったのですが、一応CSSを掲載しておきます。
また、左側を○○pxで、右側を残りのサイズというようなwidthの指定の仕方ってあるのでしょうか?
frameとかだと*で対応するみたいなん...続きを読む

Aベストアンサー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
/* left[liquid] right[fixed] */
body {
overflow: hidden;
zoom: 1;
}
#left {
float: left;
width: 100%;
overflow: hidden;
zoom: 1;
}
#left div.contents {
margin-right: 240px;
}
#right {
float: right;
width: 240px;
margin-left: -240px;
overflow: hidden;
zoom: 1;
}
/* your design */
body{
margin:0;
width:100%;
height:100%;
}
#left{
background: #eee;
height:100%;
}
#right {
background: #ccc;
height:100%;
}
</style>
<body>
<div id="left">
<div class="contents">
text text text text text text text text text text text text text text
</div>
</div>
<div id="right">
text text text text text text text text text text text text text text
</div>
</body>
</html>
こんな感じでどうでしょう?サブコンテンツ固定のメインコンテンツ可変のレイアウトです。(注:IE6とFirefox2.0でしか確認してません)
最近ブログに同じような記事を書いたので、よろしかったら参考にしてみてください。

簡単にCSSレイアウトできるフレームワークを考えてみる - Cyokodog::Diary
http://d.hatena.ne.jp/cyokodog/20080731/1217496357

サブコンテンツ固定・メインコンテンツ可変のCSSレイアウト - Cyokodog::Diary
http://d.hatena.ne.jp/cyokodog/20080805/1217955315

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
/* left[liquid] right[fixed] */
body {
overflow: hidden;
zoom: 1;
}
#left {
float: left;
width: 100%;
overflow: hidden;
zoom: 1;
}
#left div.contents {
margin-right: 240px;
}
#right {
float: right;...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qレイアウトが崩れないようにするための、

<div class="a">で一度幅や高さの指定をしているのに、ウインドウサイズを変更しても、レイアウトが崩れないようにするために、その<div>からさらに<div>で囲むのはなぜなんでしょうか?

<div id="wrapper">
 <div class="a"></div>
</div>

div.a {
width:900px;
}

#wrapper{
width:900px;
}

Aベストアンサー

「ウインドウサイズを変更しても、レイアウトが崩れないようにするため」ではないでしょうか?(^^;

divをdivで囲う理由は、色々ありますが、この場合ですと、
<div id="wrapper">
という大きなブロックと
<div class="a">
という、さっきのブロックの中にある一つのブロック
と、意味のあるブロック単位に明示的に分けていると考えられます。
この形ですと、<div id="wrapper">の中に、<div class="a">を複数設置したり、<div class="b">を併設したり、色々できますね。

両方width:900px;を指定しているのは、どっちか片方だけだと、デザインが崩れるブラウザもあるからです。両方指定しておけば確実ですね。

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Q「該当」と「当該」の違い

辞書には、「該当」・・・その条件にあてはまること。「当該」・・・その事に関係がある。
・・・とあります。
“あてはまる”と“関係がある”、微妙に違うようで似ているようで、お恥かしいのですが私にははっきり区別ができないのです。
該当とすべきところを当該としたら、意味はまったく違ってくるでしょうか?
わかりやすく両者の違いや使い方を解説していただけませんか?宜しくお願いします。

Aベストアンサー

よく似た意味の言葉(名詞)ですが、

○該当…「する」をつけて「当てはまる」という意味の動詞として用いることができる

○当該…主に他の名詞の前につけて「今議論の対象になっている、まさにそのもの」という意味で内容を限定する形容詞的な形で用いる

といった違いがあります。逆の用法はありません。

・この条件に当該する人は申し出てください。

・○○事件につき、該当被告人を有罪に処す。

いずれもおかしな使い方で、反対でないとアウトです。

ご参考になれば幸いです。

Qで文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

Qwidthやheightの数値に単位(px)はつけない方が良いの?

自分はHTMLやCSSにおいて<img>や<td>に width="100px" とか、
div に { width: 70px } とか、ピクセルの単位を付けて作っています。
どこかの本が単位をつけると教えている……はずだったからです。

今日、HTMLチェックというサービスを行ったら
『不正な設定。数値か%指定にしてください』という様なことをいわれました。

ちなみに用いているDocument宣言は4.01 Transitionalです。幅・高さに
単位はまったく必要ないのでしょうか? 逆に単位を省略してはいけないタグはありますか。

Aベストアンサー

仕様書を確認してみましょう
属性索引からimg要素のwidth属性を調べてみると

>width = length [CN]
画像・オブジェクトの幅を上書きする。

という記述が見つかります
lengthからリンクを飛ぶと少し上に行った所にピクセルの説明があり

># ピクセル: (DTDでは%Pixels; と表記)の値は、スクリーンや紙などキャンバスに表示する際のピクセル数を表す整数である。

の後に重要な記述があります

>従って、「50」という値は50ピクセルを意味する。
ピクセルに関する規範的情報は、 [CSS1]を参照のこと。

で、

># 長さ: (DTDでは%Length; と表記)の値は、%Pixel;または水平・垂直方向で利用可能な空間に対するパーセンテージである。従って、「50%」という値は、可能な空間の半分を意味する。

つまり widthは「50」などの数字で指定するか「50%」ちいうパーセントで指定することが出来ます

Q画面サイズ変更時のレイアウトの崩れ

サイトをHTML+CSSで作成しているんですが
ブラウザのサイズが最大化のときは平気なのですがサイズを変更する(縮める)とライン画像がはみ出したりリストが縮める側に寄ってしまったりとレイアウトが崩れてしまいます。
これを直す方法はあるでしょうか?

背景は1024×50の画像をy軸でリピートさせています。
レイアウトのほうは見出し画像の右にリストを横に表示させ、その下にナビゲーションを配置しています。
最大化時、縮小化時ともに縦、横のスクロールがなぜか表示されません。

Aベストアンサー

スクロールバーが表示されないのが問題なのでしょうか?
テンプレートを使っている場合は、デフォルトで表示されないようにしてあったりする場合があると思います。

overflow-x:hidden;
overflow-y:hidden;
などがないか確認してみるといいと思います。

Qサイト全体を縮小して印刷するには?

こんにちは。教えてください。
http://lexus.jp/
上記アドレスのサイトのように
横幅940pxと普通はA4縦では全てが印刷出来ないサイズのサイトでも
ブラウザから印刷するとサイト全体が縮小して
A4縦に収まって印刷される方法を教えてください。

JavaScript、css少しならわかります。
よろしくお願い致します!

Aベストアンサー

まず、このサイトは標準準拠モードではなく互換モードで作成されています。
(IEはプロパティにつくアンダーバーを無視する。
他のブラウザは仕様どおり存在しないプロパティ自体を無視する)

http://lexus.jp/models/common/css/import.css
から読み込まれる
http://lexus.jp/models/common/css/default.css
にある

@media print {
body {
_zoom: 0.68;
}
}

を読み込むことで印刷時のみzoomを効かせているんだと思います。

Minefield/Firefox,Opera,IE7にはShrink To Fitという
自動的にページ幅を基準とする機能が付いています。

MinefieldではScaleで調整し,
Operaでは[ファイル]-[印刷オプション]に「用紙幅におさめる」で有効になります。
IE6は上の指定で回避します。

ただし,IE7は標準でShrink To Fitであり,zoomプロパティを読み込んでしまうため,異様に小さく印刷されてしまいます。なのでShrink To Fitではなく100%で印刷した方が良いでしょう。

何故か俺の環境ではVPC上でしか動作しないSafariは,
VPCにプリンタドライバ入れなきゃいけないのが面倒なので検証していません。

まず、このサイトは標準準拠モードではなく互換モードで作成されています。
(IEはプロパティにつくアンダーバーを無視する。
他のブラウザは仕様どおり存在しないプロパティ自体を無視する)

http://lexus.jp/models/common/css/import.css
から読み込まれる
http://lexus.jp/models/common/css/default.css
にある

@media print {
body {
_zoom: 0.68;
}
}

を読み込むことで印刷時のみzoomを効かせているんだと思います。

Minefield/Firefox,Opera,IE7にはShrink To Fitという
自動的にペ...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング