ベストアンサー

※ ChatGPTを利用し、要約された質問です（原文：ブラウザの横幅イコール100％ではない？）

ブラウザの横幅イコール100％ではない？

2011/08/03 07:10

このQ&Aのポイント

ブラウザの横幅が100％に設定されているにもかかわらず、正しく表示されない問題が発生しています。
HTMLコードやCSSの設定に誤りがある可能性があります。
要素の幅やマージンの計算方法に問題があるかもしれません。どこに問題があるかを確認し、修正する必要があります。

Mee-me
お礼率62% (5/8)

CSS
回答数8
ありがとう数5

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

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

ベストアンサー

DrFell
ベストアンサー率55% (305/551)

2011/08/03 21:16 回答No.6

ボックスモデルとモードを理解されていないようです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> は標準モードです。一方考えておられることは、過去互換（後方互換）モードでのボックスモデルです。標準の場合、マージン+罫線+パッディング+widthとすべてを足し算しなくてはなりません。Mee-me さんのソースの場合、パディング分が100%からはみ出ます。過去互換の場合、マージン+width（罫線・paddingを含む）の計算になります。こっちのモードだと今のままで思ったとおりに表示されますが、お勧めしません。図があったほうがわかりやすいと思いますので、そのあたりの説明ページを紹介します。ボックスモデルを理解する http://kuramaserukuramu.blog93.fc2.com/blog-entry-147.html

質問者

お礼 2011/08/04 07:34

ありがとうございました。できました。思ったように、できるようになりました。勘違いを単刀直入に解説いただき、わかりやすかったです。 br や　clear も不要できれいな構造のまま、デザインすることができ、すっきりしました。

その他の回答 (7)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/08/04 10:53 回答No.8

＞インラインブロック要素を持ち出したのか？　当初の質問が、漠然とした％の算出方法でしたから、％は何を100%とみなすかで答えが変わるという意味で回答しました。配置するブロック内に画像のような置換インライン要素があると、その幅は内容の大きさになるということです。＞仕様書に明るいORUKA1951さんからみて、問題ありますでしょうか？　イヤミ？？？気にしませんが・・　HTMLをdivだらけにしないように・・・。HTML4.01では構造化要素があまりに不足しているがために、divだらけになる必然があったので無理もない部分もありますが。　この答えは、No.7で良いと思います。　標準モード、互換モードの切り分けも必要ですが、あくまでscreen端末(ブラウザ)だけの狭い世界の話で、HTMLはそれだけが対象ではない。膨大なインターネットというデータベースの中のひとつのデータと考えると・・・　最後のサンプルで、width:,mi-width,max-width:を調整すれば、何列だろうが、ほぼ希望通りになるでしょう。ウィンドウ幅(解像度)を変えるとどうなるでしょう。＞実際は、2ブロックばかりとか3ブロックばかりを高さ固定の成り行きで並べる予定です。30-50個に1つづつ数値指定は無理ですし、増えたり減ったりしますので、　後だしじゃんけんは「なし」です。

質問者

お礼 2011/08/04 21:01

ここはWebデザイン・CSSのカテゴリーなので、表現に関するお答えが欲しかったのです。実験だとありありとわかるようなソースに、relativeを持ち出され、苦肉の策で、relativeを使わない理由をでっちあげてしまいました。後出し邪意見,大変失礼しました。 divが嫌いで、撲滅運動をされているのですね。それは申し訳ありませんでした。私は、今回のような質問には汎用ブロックレベル要素がてきしていると思っています。中身のない質問のための単純化したソースですから、問題だけが浮かび上がるはずです。問題が再現できる最低限のソースコードで的確に質問することが、欲しい答えを貰う方法だと考えていたものですから、今回の答えのソースの長さには驚きました。そして長い質問ソースはスルーされる理由もよくわかりました。大変勉強になりました。何度もお答えいただき、ありがとうございました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/08/04 09:22 回答No.7

＞英語の文献を読むのは私には無理です。　整形について、この様な掲示板で説明するのは無理です。仕様書でも２章、それも多くのページ数を割り当ててある複雑な部分です。　英文が苦手でも、今は多くの翻訳サイトがあります。firefoxのアドオンにQuick Transrator、East Asian Transrator、FoxLingoなどがあります。文学ではないので機械翻訳でもREC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )と比べながら読むと十分理解できるでしょう。　また、ごく簡単な <div class="section"> 　<div class="section"> 　</div> </div> 　程度でも、 div.section{width:600px,border:20px solid red;padding:10px;height:100px;margin:5px;background-color:aqua;} div.section div.section{border-color:green;margin:5px;padding:15px;background-color:blue;} とかで実際に数値を入れてテストしてみるのがよいです。＞clearしてfloatすれば、左端によりますが、「無効になる」の意味がわかりません。　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^寄りません!! <img style="clear:left;"> <img style="clear:left;float:left;"> <img style="clear:left;float:left;"> は、clearされないということ。IEはバグがあってclearされますが間違いです。＞代替案ありがとうございます。が、親をrelatibeにし、topやleftで1ブロックづつ数値指定はできません。見本では1-4段のブロックにしていますが、実際は、2ブロックばかりとか3ブロックばかりを高さ固定の成り行きで並べる予定です。30-50個に1つづつ数値指定は無理ですし、増えたり減ったりしますので、　ですから、そこが根本的な間違いなのです。デザインのためにHTMLを書くのではありません。^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 　HTMLは、【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからどんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より　なのですから、ワープロやDTP ( http://ja.wikipedia.org/wiki/DTP )とは根本的に違うのです。プレゼンテーションは犠牲にしてでも文書構造をマークアップすることで、この最大の目的をかなえようとしています。もし、プレゼンテーションを期待されるならワープロやDTPで作成してPDFにすればよいです。　何十個もブロックがあってそれを、何列かに並べたい---そういう必然性があるなら文書構造も、例のように製品リストなり、サムネイル画像のナビゲーションだったりするということですよね。　ならそのようにマークアップすればよいのです。　すなわち、サンプルの最後の方法になります。(もちろん、それがtableならtableでもよいが、作業は大変でしょう。) 　最後の div.product ul>li{ ＿width:24.5%; ＿float:left; ＿height:100px; ＿border-style:solid; ＿border-color:yellow; ＿border-width:0 1px; ＿background-color:rgb(255,255,200) } に、min-width:180px;とかを追加すれば、ウィンドウの幅に関わらず適当に並べてくれるでしょう。　　最初の質問＞以下のコーディングで、各色、1行になる筈なのですが、・・・【中略】・・・＞<div class="test3">.test3</div> では、単なる実験の質問のようでしたから、その範囲内でお答えしましたが、補足では＞実際は、2ブロックばかりとか3ブロックばかりを高さ固定の成り行きで並べる予定です。と、実際のものだといわれました。　なら、HTMLがどういう内容や文書構造のもので、どのようにマークアップすべきか？それをこの様にプレゼンテーションしたいがＣＳＳはどう書けばよいか？という質問になります。　そのような並列な内容のデータの羅列でしたら、リスト(OL,LI,DL)などではないでしょうか？　まずスタートは、デザインは考えない文書構造に従った正しいHTMLです。ＨＴＭＬはワープロとは違う・・そうでないと【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからしかし日常生活の一部としてWebを利用しはじめた人々の間では、HTMLの制限は不満が募る元となり、著者は、HTMLのスタイル上の制限を回避することを余儀無くされた。 Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より　と同じ過ちを繰り返すことになります。

質問者

お礼 2011/08/04 20:27

＞整形について、この様な掲示板で説明するのは無理です。ずばり、指摘してくれたDrFellさんに大感謝です！！！無理なことを十数行でわかりやすく、教えていただき感激です。あらためて、ありがとうございました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/08/03 20:22 回答No.5

それと、＿は消すかタブに戻してください。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/08/03 20:20 回答No.4

＞(デザインのためにマークアップしてないのでmainとmain2は中身は同じ) を書き足す位置が違った。　次の段落「ちょっと簡単なサンプルを書いてみました。これだと、点字端末・読み上げソフト・携帯電話・検索エンジンなど、どのようなユーザーエージェントでも表示・理解してくれるでしょう。」に移動して読んでください。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/08/03 20:12 回答No.3

＞根本的に何かを間違えているようで、思ったようになりません。　そうですね。根本的な間違いは、とても重要なことなのですが--デザインを考えてマークアップしようとしていることです。初心者の一番多い根本的な間違いです。　デザインのために、文書構造上意味のないdivだらけにしてしまう。divスープと言います。(デザインのためにマークアップしてないのでmainとmain2は中身は同じ) Tag soup - Wikipedia, the free encyclopedia ( http://en.wikipedia.org/wiki/Tag_soup ) 　ちょっと簡単なサンプルを書いてみました。これだと、点字端末・読み上げソフト・携帯電話・検索エンジンなど、どのようなユーザーエージェントでも表示・理解してくれるでしょう。　それでいて、あなたの希望にほぼ沿ったプレゼンテーションをしてくれるはず。しかもウィンドウ幅が多少違ってもおかしくならない。i-honeの450pxより大きければ・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>ページのタイトル</h1> ＿＿<p class="logo">ロゴやメッセージ</p> ＿＿<div class="abstract"> ＿＿＿<p> ＿＿＿＿本文をいくつかのブロックに分ける方法＿＿＿</p> ＿＿</div> ＿</div> ＿<div class="section main"> ＿＿<h2>本文タイトル</h2> ＿＿<p>もっとも長い本文記事をここに書きます。ですが、テンプレートの段階ではナビゲーションよりも短い場合もあるのでmin-heightで最低限の高さを指定して置くとよい。</p> ＿＿<div class="nav"> ＿＿＿<h3>ナビゲーション</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="">トップ</a></li> ＿＿＿＿<li><a href="">その他</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>脚注</h3> ＿＿＿<p> ＿＿＿＿本文と関係ない記事とか＿＿＿</p> ＿＿</div> ＿</div> ＿<div class="section main2"> ＿＿<h2>本文タイトル</h2> ＿＿<p>もっとも長い本文記事をここに書きます。ですが、テンプレートの段階ではナビゲーションよりも短い場合もあるのでmin-heightで最低限の高さを指定して置くとよい。</p> ＿＿<div class="nav"> ＿＿＿<h3>ナビゲーション</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="">トップ</a></li> ＿＿＿＿<li><a href="">その他</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>脚注</h3> ＿＿＿<p> ＿＿＿＿本文と関係ない記事とか＿＿＿</p> ＿＿</div> ＿</div> ＿<div class="section product"> ＿＿<h2>製品情報</h2> ＿＿<ul> ＿＿＿<li>品名1 ＿＿＿＿<ol> ＿＿＿＿＿<li>写真</li> ＿＿＿＿＿<li>サイズ</li> ＿＿＿＿＿<li>色</li> ＿＿＿＿＿<li>価格</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿＿<li>品名1 ＿＿＿＿<ol> ＿＿＿＿＿<li>写真</li> ＿＿＿＿＿<li>サイズ</li> ＿＿＿＿＿<li>色</li> ＿＿＿＿＿<li>価格</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿＿<li>品名1 ＿＿＿＿<ol> ＿＿＿＿＿<li>写真</li> ＿＿＿＿＿<li>サイズ</li> ＿＿＿＿＿<li>色</li> ＿＿＿＿＿<li>価格</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿＿<li>品名1 ＿＿＿＿<ol> ＿＿＿＿＿<li>写真</li> ＿＿＿＿＿<li>サイズ</li> ＿＿＿＿＿<li>色</li> ＿＿＿＿＿<li>価格</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿＿<li>品名1 ＿＿＿＿<ol> ＿＿＿＿＿<li>写真</li> ＿＿＿＿＿<li>サイズ</li> ＿＿＿＿＿<li>色</li> ＿＿＿＿＿<li>価格</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿＿<li>品名1 ＿＿＿＿<ol> ＿＿＿＿＿<li>写真</li> ＿＿＿＿＿<li>サイズ</li> ＿＿＿＿＿<li>色</li> ＿＿＿＿＿<li>価格</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿＿<li>品名1 ＿＿＿＿<ol> ＿＿＿＿＿<li>写真</li> ＿＿＿＿＿<li>サイズ</li> ＿＿＿＿＿<li>色</li> ＿＿＿＿＿<li>価格</li> ＿＿＿＿</ol> ＿＿＿</li> ＿＿</ul> ＿</div> ＿<div class="footer"> ＿＿<h3>Document Information</h3> ＿＿<h4>更新履歴</h4> ＿</div> </body> </html>

質問者

お礼 2011/08/04 08:26

なぜ、インラインブロック要素を持ち出したのか？以下の補足質問にまったく回答がなく、残念です。回答が何をいいたいのかまったくわかりません。このような技術質問Q&Aサイトでは、問題が出現する「最低限度」のソースを示すことが、マナーだと思っています。問題を単純化することは、質問の本質把握や回答を明確にできますので。また、今回、新たにページを紹介いただきましたが、またしても英語で読めません。そして、「divスープ」は日本語では考え方すらないようで、検索エンジンには、それについて扱ったページは、おかしな翻訳サイト以外ヒットしませんでした。ORUKA1951さんも今回の件については、わからないのに回答しているのでは？と思います。そうだとしたら、迷惑です。今後無用に願います。私の問題はDrFellさんの回答で、一応の解決ができました。仕様書に明るいORUKA1951さんからみて、問題ありますでしょうか？お分かりになり、問題があるようでしたら、ご指摘ください。しばらくは締め切らずにお待ちしております。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/08/03 18:43 回答No.2

　その要素が、％をとるとき、何を基準(100%)にするかは、その要素が何であるか、親コンテナブロックが何であるかによって変わります。置換インライン要素は内容の大きさを基準にするとか・・　CSS2.1では、tableを除くブロック要素は、親となるコンテナブロックの内辺(パディング辺の内側)を基準にします。しかも、それを参照しても自身がpaddingを持つと、その内側のサイズが計算結果になります。また古いＩＥはポーター辺の内側を基準にしたりしますので注意が必要です。　詳しい説明は仕様書に書かれていますから参照してください。 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification ( http://www.w3.org/TR/CSS2/ ) 　↑現在ブラウザが標準としているCSS2.1の仕様書ですが邦訳はありません。CSS2の邦訳( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html )はあるのですが、この視覚整形モデルについては、変更や訂正が結構あってCSS2.1を読まないと正確なところはわかりません。　期待されているようにならない原因は、「ブロックの配置にfloatを使っていること」です。floatされるブロックはサイズを親コンテナブロックの内辺から算出し、しかもサイズは生成されるブロックの内寸だから、はみ出てしまうのです。　親ブロックの幅を広げて、floatを解除するclearを書くのがよいのですが、clearは自身がfloat要素のときは無効になる--floatの時点で親から独立するので当たり前ですが--ので、文書構造上意味のない要素を書かなければならなくなり、ウェブ標準からは逸脱します。　本来floatは、文章内に存在するfigureな画像の周囲に本文を回りこませるためのもので、この様なブロックの配置に使用するのは本来の用途ではありません。　親コンテナブロックをrekativeにして、子要素をabsoluteなりで指定するのが本来の方法です。　

質問者

補足 2011/08/03 20:28

>その要素が、％をとるとき、何を基準(100%)にするかは、その要素が何であるか、親コンテナブロックが何であるかによって変わります。置換インライン要素は内容の大きさを基準にするとか・・親要素のhtmlはパディングをとっておらず、600pxを100％の基準にしていると考えています。divなので、ブロックレベル要素が前提ですが？なぜ、置換インライン要素のお話がでてくるのか理解できません。でも、関係があるから、持ち出されたことと思います。もう少し説明いただけると幸いです。 >CSS2.1では、tableを除くブロック要素は、親となるコンテナブロックの内辺(パディング辺の内側)を基準にします。しかも、それを参照しても自身がpaddingを持つと、その内側のサイズが計算結果になります。また古いＩＥはポーター辺の内側を基準にしたりしますので注意が必要です。「しかも、それを参照しても自身がpaddingを持つと、その内側のサイズが計算結果になります。また古いＩＥはポーター辺の内側を基準にしたりしますので注意が必要です。」がよくわからないのですが、「左右1％のマージンと48％のコンテンツで50％）が2個で100％のつもり」が98％だということでしょうか？それだとなおさら、最初の1行に収まらないのが不思議です。このあたりが誤解の核心の気がします。また、古いIEはまだ、対象としておらず、新らしめのクロスブラウザを考えております。 >詳しい説明は仕様書に書かれていますから参照してください。英語の文献を読むのは私には無理です。 >期待されているようにならない原因は、「ブロックの配置にfloatを使っていること」です。floatされるブロックはサイズを親コンテナブロックの内辺から算出し、しかもサイズは生成されるブロックの内寸だから、はみ出てしまうのです。親コンテナは内辺も内寸も100％で600pxではないのですか？なぜはみだしているのかわかりません。 >親ブロックの幅を広げて、floatを解除するclearを書くのがよいのですが、clearは自身がfloat要素のときは無効になる--floatの時点で親から独立するので当たり前ですが--ので、文書構造上意味のない要素を書かなければならなくなり、ウェブ標準からは逸脱します。親ブロックの幅はそのままがいいので、計算方法さえわかれば、子ブロックを狭くします。clearしてfloatすれば、左端によりますが、「無効になる」の意味がわかりません。 >親コンテナブロックをrekativeにして、子要素をabsoluteなりで指定するのが本来の方法です。代替案ありがとうございます。が、親をrelatibeにし、topやleftで1ブロックづつ数値指定はできません。見本では1-4段のブロックにしていますが、実際は、2ブロックばかりとか3ブロックばかりを高さ固定の成り行きで並べる予定です。30-50個に1つづつ数値指定は無理ですし、増えたり減ったりしますので、そのたびに訂正することは不可能です。そのための考え方をお教え願うための質問です。折角お教えいただいたのですが、わからないことだらけです。理解力のない、質問者ですが、引き続き、教えていただけますでしょうか。あつかましいお願いで申し訳ありませんが、よろしくお願いいたします。

hinananana
ベストアンサー率69% (16/23)

2011/08/03 09:57 回答No.1

bodyのwidthが600pxと指定されているので widthを消すか100%としてみてください。あと、 <br clear="all"> を入れてみてください。 <div class="test2">div.test2{width:48%;赤}</div> <div class="test2">.test2（左右1％のマージンと48％のコンテンツで50％）が2個で100％のつもり</div> <br clear="all"> <div class="test3">div.test3{width:31.3%;緑}</div> <div class="test3">.test3（左右1％のマージンと31.3％のコンテンツで33.3％）が3個で99.9％のつもり</div> <div class="test3">.test3</div> <br clear="all"> <div class="test4">div.test4{width:23%;青}</div> <div class="test4">.test4（左右1％のマージンと23％のコンテンツで25％）が4個で100％のつもり</div> <div class="test4">.test4</div> <div class="test4">.test4</div> こんな感じに。 divにfloatをかけているので、表示が崩れています。あとは、赤と緑と青を一行にしたらいいんですね！解決方法は各class(test2,test3,test4)に padding:0; を書けば一行になります！

質問者

お礼 2011/08/04 21:05

padding:0;！！他の方の回答で、理由がわかりました。ありがとうございました。

ブラウザの横幅イコール100％ではない？

ブラウザの横幅イコール100％ではない？