ホームページのWindowsに表示される画面サイズ

締切済

質問者：megggmint
質問日時：2006/07/20 00:22
回答数：3件

ホームページを作成していますが、作っているページがフルサイズで
でしか、表示されません。（左側にお気に入りのウインドウを表示した
ままだと、画面が切れてしまう）
画像が切れずに、小さいウインドウのときでもジャストサイズで
表示されるHTMLタグが分りません。
ご存知でしたらおしえてくださいませ。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： aqucent
回答日時：2006/07/20 18:32

#1です。

再度確認しますが、「画面全体にコンテンツが表示されず、横スクロールが表示される(右端が見えない)」という状況で合っているのですね？
以下、その前提で話を進めます。

> タグが見つかりません・・・
タグというより、CSSですね。
ブロックレベル要素にCSSの width, margin, paddingセレクタを指定すれば良いと思います。
# #2 の方の仰るように、画像が主体のコンテンツ(画像がウインドウ幅を決定する主要な要素)なら、
# 画像の使い方を変えないとリキッドレイアウトは出来ません。

1. ブロック幅を "width: 30%" のような相対値で指定する
2. "width: 20px" のような絶対値で指定してから、後で残りのブロック要素を消費する
3. "margin: 10em; padding: 5em" のように、マージン,パディングを指定して中身の幅は余った部分とする

私は 3. を好んで用います。
注意しなければならないのは、画像は横幅を絶対値で指定する事です。

<div style='width: 30%'><img width='800' height='600' src='test.png'></div>

上のケースでは、画像の横幅がブロック幅を超えてしまう可能性があります。
大きな画像は使わないように注意して下さい。
(画像も背景画像として使うなら、ウインドウの大きさに依存せずに使えるんですけどね。[並べて表示] になりますから。)

# リキッドレイアウトの場合は、px よりも em の方が好まれる(文字主体のコンテンツと相性が良い)傾向がありますが、
# em は相対値なので画像との相性が悪い事もあります。
# その辺は、ケースバイケースなので柔軟に対応して下さい。

# 要素を横に並べる float はあまり使わない方が良いです。
# 従って、同様の動作を示す align属性も控えめに。(alignは非推奨属性ですしね)

参考URL：http://www.nextindex.net/web/CSS/index.html

- 0
- 件

通報する

No.2

回答者： noname#20964
回答日時：2006/07/20 02:46

現在のソースやCSS、画像のサイズが解らないとなんとも言えませんが、画像を無視（画像の横幅は基本的には伸縮しないため）した場合、CSSや属性で要素の横幅を絶対値で指定したり、行の多い表を入れていたり、半角英数字をスペース無しで書き続けない限りウインドウの有効範囲で調整されて横スクロールバーが表示されにくくなっているはずです。

こんなことを考えると画像が原因で横スクロールが出ていると仮定すると対処は難しいと思います。
画像の横幅を300px位に納めて見るとか、画像のwidth、heightを止めてCSSで%を単位にして横幅だけを指定すると望むようなレイアウトになるかもしれません。

基本的にブラウザは横スクロールを出しにくくなっていますので出る場合は自分で出している場合が多いのでCSSを見なおすか画像のサイズを見直すなどすると改善されますよ。

例えば
<html>
<head>
<title>**</title>
<head>
<body>
<p>
<img src="a.gif" width="50" height="50" alt="あ">
あああああああああああああああああああああああああああああああああああああああああ</p>
</body>
</html>
このように書けばほとんど横スクロールがでることはないと思います。
これに横スクロールを出すにはimgのwidthを1000にすると出てきますしpにstyle="width:1000px"を入れても出てきますよ。

だから何もしないと横スクロールは出ないものです。

- 0
- 件

通報する

No.1

回答者： aqucent
回答日時：2006/07/20 00:42

「切れる」というのが今ひとつ分かりませんが、画面全体にコンテンツが表示されず、横スクロールが表示される(右端が見えない)という事でしょうか？

そういう場合は、リキッドレイアウトにすれば良いかと思います。

Google検索: リキッドレイアウト
http://www.google.co.jp/search?ie=euc-jp&lr=lang …

リキッドレイアウトというのは、ブロック幅を「相対値で指定」or「絶対値で指定して、どこかで余りを消費する」という形にして
ウインドウ幅に依存せずに、コンテンツを表示するテクニックです。