- 締切済み
ブラウザの表示幅で100%指定が切れる
ちょっと現象を把握しきれていないのですが、100%指定をしている箇所が、ブラウザによって途中で切れる現象が確認できています。 具体的には、ヘッダにボーダーとして引いている線 <img src="xx.gif" width="100%" height="5"> と フッタのdiv指定の箇所 <footer></footer> width:100%; としている箇所です。 通常のPCブラウザ表示では問題ありませんが、Chromeで、開発者ツールを右ペインに指定しているのですが、ここを開くと幅が縮まって、ブラウザの表示幅がサイトの全体幅よりも小さくなります。 その状態で本文部分を右にスクロールすると、100%指定した箇所だけが、その開発者ツールが開いた位置から表示されなくなります。 表示されないというと語弊がありますが、ボーダーの指定などが効いているので、「そこが100%として認識されている」という状態だと思います。 右にスクロールした状態でリロードすれば戻るのでは？と思いましたが戻りません。 また、開発者ツールを閉じて、普通の状態で画面幅を広げたり狭めたりすると問題なく表示されます。 それと、iPadのSafariでも同様の表示になっていて、こちらはページを開いた状態ですでに右側が欠けている状態です。 縦、横、どちらの向きも同じく右側が欠けます。 サイト自体は1024px幅で組んでいますが、768pxの位置までで、そこから先が表示されなくなります。 なんとなく、metaで幅をきっちり指定してあげるべきなのかなぁと思っていますが、同様の現象に悩まされた方いらっしゃいましたらよろしくお願い致します。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- think49
- ベストアンサー率59% (285/482)
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)
まず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を使用すると、そのあたりの関係が良く分かるのですが・・
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
ご回答いただいてありがたいのですが、ヘッダとは上部を指していて、別に<header>のボーダーとして用いているわけではありません。 まぁ確かにimg width="100%"は一昔前の書き方なんで突っ込まれるだろうなとは思いましたが、とある事情により仕方なくそうしています。 どう使うかは別として構文的には間違っていない書き方をしていますけどね。 それよりも1000%に指定したらどうなるか・・・予想付きませんか？ ありがとうございました。