• 締切済み

ブラウザの表示幅で100%指定が切れる

ちょっと現象を把握しきれていないのですが、100%指定をしている箇所が、ブラウザによって途中で切れる現象が確認できています。 具体的には、ヘッダにボーダーとして引いている線 <img src="xx.gif" width="100%" height="5"> と フッタのdiv指定の箇所 <footer></footer> width:100%; としている箇所です。 通常のPCブラウザ表示では問題ありませんが、Chromeで、開発者ツールを右ペインに指定しているのですが、ここを開くと幅が縮まって、ブラウザの表示幅がサイトの全体幅よりも小さくなります。 その状態で本文部分を右にスクロールすると、100%指定した箇所だけが、その開発者ツールが開いた位置から表示されなくなります。 表示されないというと語弊がありますが、ボーダーの指定などが効いているので、「そこが100%として認識されている」という状態だと思います。 右にスクロールした状態でリロードすれば戻るのでは？と思いましたが戻りません。 また、開発者ツールを閉じて、普通の状態で画面幅を広げたり狭めたりすると問題なく表示されます。 それと、iPadのSafariでも同様の表示になっていて、こちらはページを開いた状態ですでに右側が欠けている状態です。 縦、横、どちらの向きも同じく右側が欠けます。 サイト自体は1024px幅で組んでいますが、768pxの位置までで、そこから先が表示されなくなります。 なんとなく、metaで幅をきっちり指定してあげるべきなのかなぁと思っていますが、同様の現象に悩まされた方いらっしゃいましたらよろしくお願い致します。

  • umioyo
  • お礼率78% (172/220)
  • CSS
  • 回答数2
  • ありがとう数15

みんなの回答

  • think49
  • ベストアンサー率59% (285/482)
回答No.2

CSS における width の % 指定は 親要素の content-width (width指定) を100%とした場合の相対値ですが、HTML全体の幅は border, margin, padding, width の和算で求められます。 親要素の border, margin, padding 値が 0 を超えていた場合、HTML全体の幅が 100% を超過するので横スクロールバーが発生します。 http://hp.vector.co.jp/authors/VA022006/css/box.html#introduction-box http://hp.vector.co.jp/authors/VA022006/css/visualren.html#width 対象の要素(#target1 とする)がbody要素直下に存在するなら、下記を指定すれば期待通りに動作すると思われます。 --- html, body { margin: 0px; padding: 0px; border-style: none; } #target { margin: 0px; padding: 0px; border-style: none; width: 100%; } --- # Re: umioyoさん

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

まずHTMLが誤り。 （※インデントは全角スペースに置き換えてある。） [HTML4.01,XHTML1.0等] DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )ので・・ <body> 　<div class="header"> 　　<h1>ページタイトル</h1> 　　<class="nav">ナビゲーション</div> 　</div> 　<div class="section"> 　　<h2>本文見出し</h2> 　　<p>本文記事</p> 　</div> 　<div class="footer"> 　　この文書のフッタ 　</div> </body> [HTML5]だと <body> 　<header> 　　<h1>ページタイトル</h1> 　　<nav>ナビゲーション</nav> 　</header> 　<section> 　　<h2>本文見出し</h2> 　　<p>本文記事</p> 　</section> 　<footer> 　　この文書のフッタ 　</footer> </body> ＞ヘッダにボーダーとして引いている線 　これはとってもまずいので、div.headerのborder-imageで指定するか、<hr>を書いておいてhrのスタイルを指定するほうが良いでしょう。 html,body{margin:0;padding:0;} div.header,div.footer{width:1000%;} [HTML5] html,body{margin:0;padding:0;} header,footer{width:1000%;} なお、ウェブページ作成されているなら当然開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxお使いだと思いますが、そのアドオンfirebugを使用すると、そのあたりの関係が良く分かるのですが・・

umioyo
質問者

お礼

ご回答いただいてありがたいのですが、ヘッダとは上部を指していて、別に<header>のボーダーとして用いているわけではありません。 まぁ確かにimg width="100%"は一昔前の書き方なんで突っ込まれるだろうなとは思いましたが、とある事情により仕方なくそうしています。 どう使うかは別として構文的には間違っていない書き方をしていますけどね。 それよりも1000%に指定したらどうなるか・・・予想付きませんか？ ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • ブラウザ枠を超えず表示する方法

    CSSについてですが、まずはCSSとHTMLを見てください。 ↓test.css === * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; } #container { width: 100%; height: 100%; margin: 10px; border: 1px solid #b3b3b3; } === ↓test.html=== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="./test.css" type="text/css"> </head> <body> <div id="container"> </div> </body> </html> === test.html をブラウザで見ると、ボーダーラインがブラウザ枠(右側)を突っ切る形で表示されています。width: 100% と指定したので、現在表示しているブラウザ幅からmargin: 10px したところでborder: 1px が表示される(四角形のボーダーがスクロールなしで確認できる)と思ってましたが、ボーダーが現在のブラウザ幅を突っ切って表示されることはあたりまえのことなんでしょうか？ むしろ、スクロールなしでボーダー全体を確認する術は、tableタグを使わずに実現する方法はあるのでしょうか？ お願いします。

    • ベストアンサー
    • HTML
  • スタイルシートのpositionでフッターを位置指定するには

    こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか？ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }

  • ●○■□などの文字を含んだ<td>の幅指定について

    Firefoxで表示確認をしています。 <table border="1" width="100"> <tr> <td>あああああああああああ</td> </tr> </table> だと、幅100pxの位置で自動的に改行されるのですが、 <table border="1" width="100"> <tr> <td>●●●●●●●●●●●</td> </tr> </table> だと改行ず、幅がオーバーしてしまいます。●以外にも○■□などでも同じでした。 ●を使いつつ、指定した幅で改行させることはできないでしょうか？

  • floatをfooterに指定すると正しく表示ができない。

    floatをfooterに指定すると正しく表示ができない。 画像の(3)のようにfooterにfloat:leftを指定しなければ綺麗に表示されるのは分かります。ところが、画像の(1)や(2)のように、footerにfloat:left;を指定して、次の行で<div style="clear:left"></div>と指定して、footerにfloat:leftを指定しなかったのと同様の処理をすると、(1)や(2)のようにwidthに対して様々な現象が起きてしまいます。 (1)はwidthを指定しない場合、width:auto;を指定した場合に見られ、(2)はwidth:100%;とした場合にwrapperよりはみ出すという現象が起きます。なぜ、floatを指定しないのと指定後解除するのとで同様の結果が得られずに違った結果になるのでしょうか？わかる方いらっしゃいましたら回答宜しくお願い致します。 以下はソースでそのままエディタに貼り付けると表示できます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- /* default.css */ #container { background:red; border:10px solid fuchsia; padding:10px; } #left { float: left; width: 200px; height:100px; background:yellow; } #right { float: left; border:5px #000 solid; width: 200px; height:200px; background:black; color:#FFF; } #footer { float: left; height:200px; background:blue; border:5px #000 solid; color:#FFF; } --> </style> </head> <body> <div id="wrapper">WRAPPER <div id="header">HEADER</div> <div id="container">CONTAINER <div id="left">LEFT </div> <div id="right">RIGHT </div> <br style="clear:left"/> </div> <div id="footer">FOOTER </div> <div style="clear:left"></div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • CSS、ブラウザの幅が狭まったときの表示

    CSS学習中です。 ブラウザの幅が狭まったときの表示について教えてください。 現在、CSSファイルで以下のように書いています。 【test.css】 #alpha, #beta, #gamma { position: relative; 　display: inline; 　float: left; } #alpha { 　width: 300px; 　background: #f00; } #beta { 　width: 100px; 　background: #0f0; } #gamma { 　width: 100px; 　background: #00f; } このCSSを使い、 <body> 　<div id="alpha"> Alpha </div> 　<div id="beta"> Beta </div> 　<div id="gamma"> Gamma </div> </body> と表示させています。 ブラウザの表示幅が広いときは同じ行に 　Alpha Beta Gamma と並ぶのですが、ブラウザの表示幅を狭めると、入りきらないGammaが下の行に表示されます。 そうではなく、入りきらない部分は表示されない（表示が欠ける）様にしたいのですが、どのようにすればよいのでしょうか？ ブラウザはIE6を使用しています。

    • ベストアンサー
    • HTML
  • フラッシュの幅をブラウザ一杯に表示させたい

    フラッシュを作成したのですが、高さは500pxほどで、幅だけをブラウザいっぱいに表示させたいと考えています。 width100％ではできなかったのですが、どのような方法がありますでしょうか？

    • ベストアンサー
    • Flash
  • 固定幅div内のテーブルセルの幅指定方法

    幅を指定して横スクロールバーを有効にしたdivがあります。 その中に、divよりも幅の広いtableを置き、thやtdの幅を指定したいのですが、有効になりません。 tableへの幅指定は有効になるのですが、内容が動的に変化するので、セル単位で幅を指定したいと思っています。 解決方法がありましたらお願いいたします。 HTML：標準モード UA：Windows xp IE6 サンプルコード： <style> div{ height:200px; width:200px; overflow-x:scroll; border:#f99 solid 1px; } table{ background:#ddd; border:#666 solid 1px; } td{ width:100px; border:#666 solid 1px; } </style> <div> <table> <tr> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> <td>サンプルテキスト</td> </tr> </table> </div>

    • ベストアンサー
    • HTML
  • 再投稿：テーブルタイトルの幅指定

    重要なことが抜けておりましたので、再投稿します。申し訳ありません。 テーブルの<th>の幅指定が上手くいきません。 htmlファイルのstyle部分にｃｓｓを書きこんでいます。 現状 ------ table{ width: 900px; margin:0; padding:0; border-top:#00cc00 2px dotted; border-collapse: collapse; font-family:'メイリオ',"ヒラギノ丸ゴ Pro",sans-serif; } th{ width: 200px; border-bottom:#00cc00 2px dotted; } td{ width: 700px; padding:10px; border-bottom:#00cc00 2px dotted; } （中略） <body> <table> <tr> <th scope="row"> 画像とリンク</th><td>説明</td> </tr> 以下略 ----- ｔｈを左にもってきて、ｔｄと違う幅にしたいわけですが、なぜかthとtdの幅が均等に表示されます。 thに画像を入れておりまして、画像抜きですと幅指定がきちんと反映されます。 しかし画像を入れたバージョンは、画像の幅より余裕をもったth幅となります。謎です。 どうすれば画像を入れたまま、幅指定を反映してもらえるでしょうか？

  • 同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象

    同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象 まったくの初心者ですが、テンプレートを編集してホームページを作りました。 しかし、別の環境で見たところ、テーブルの表示が明らかにおかしいことに気づきました。 （Lunascapeというブラウザで、３種類のエンジンが選べるので他のエンジンにしてみたのです） 問題を極力単純化しようと余計な文章を省いたHTMLを用意しましたが、結果は変わりませんでした。 Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広すぎて間抜けなのです。 現状、この重大なエラーを残したまま公開している状態のため、急ぎ直したいのです。 画像は実行したときの症状を、下にはそのソースを載せます。 アドバイス、回答をよろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title>テスト</title> </head> <body> <style type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; width: 60%; margin-bottom: 30px; border: 1px solid #DDD; table-layout:fixed; } th { border: 1px solid #DDD; color: #333; padding: 10px 20px; } td { border: 1px solid #DDD; color: #333; padding: 5px; } .title{ width:12em;} .compose,.long{ width:4em;text-align:center;} .value{ width:6em;text-align:center;} th.genre { background: #E5F2F8;} --> </style> <table> <tr><th class="title">タイトル</th><td class="long">こうもく１</td><td class="value"><span class="d">こうもく２</span></td><td>こうもく３は大切なこうもくです。ほんとうです。</td></tr> <tr><th class="title">タイトル</th><td class="long">こうもく１</td><td class="value"><span class="d">こうもく２</span></td><td>こうもく３は大切なこうもくです。ほんとうです。</td></tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • css で指定した div と table の幅が

    html と css の勉強中です。 スタイルシートで次のように同じ幅を 指定したのですが、表とブロックの幅が 揃いません。 <style><!-- #a {width:300px;border:solid 2px} #b {width:300px;border:solid 2px} --></style> <div id="a"> <p> a b c d </p> </div> <table id="b" border="1"> <tr> <td>a</td><td>b</td><td>c</td><td>d</td> </tr> </table> ブラウザは IE６と opera で見てみました。 お願いします。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する