ブラウザの横幅イコール100％ではない？
- ブラウザの横幅が100％に設定されているにもかかわらず、正しく表示されない問題が発生しています。
- HTMLコードやCSSの設定に誤りがある可能性があります。
- 要素の幅やマージンの計算方法に問題があるかもしれません。どこに問題があるかを確認し、修正する必要があります。
- ベストアンサー
ブラウザの横幅イコール100％ではない？
以下のコーディングで、各色、1行になる筈なのですが、上手くいかず困っています。根本的に何かを間違えているようで、思ったようになりません。何を勘違いしているのか、どうすればいいのかを教えてください。よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <head> <title>無題ドキュメント</title> <style type="text/css"> body{margin:0;padding:0;width:600px;} h1{margin:0 1%;width:98%;background:#ffbbbb;} div{float:left;padding:2em;margin:0 1%;} .test2{width:48%;background:#ffdddd;} .test3{width:31.3%;background:#ddffdd;} .test4{width:23%;background:#ddddff;} .test1{width:98%;background:#ffffcc;} </style> </head> <body> <p>body{margin:0;padding:0;width:100%;}</p> <h1>見出し1 h1{margin:0 1%;width:98%;}</h1> <div style="margin:0;width:100%;background:#eeeeee;height:30px;padding:1em;">div 共通{float:left;padding:2em;margin:0 1%;}</div> <div class="test2">div.test2{width:48%;赤}</div> <div class="test2">.test2（左右1％のマージンと48％のコンテンツで50％）が2個で100％のつもり</div> <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> <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 class="test1">.test1{width:98%;黄}（左右1％のマージンと98％のコンテンツで100％）のつもり</div> </body> </html>
- Mee-me
- お礼率62% (5/8)
- CSS
- 回答数8
- ありがとう数5
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
ボックスモデルとモードを理解されていないようです。 <!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
その他の回答 (7)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞インラインブロック要素を持ち出したのか？ 当初の質問が、漠然とした％の算出方法でしたから、％は何を100%とみなすかで答えが変わるという意味で回答しました。配置するブロック内に画像のような置換インライン要素があると、その幅は内容の大きさになるということです。 ＞仕様書に明るいORUKA1951さんからみて、問題ありますでしょうか？ イヤミ？？？気にしませんが・・ HTMLをdivだらけにしないように・・・。HTML4.01では構造化要素があまりに不足しているがために、divだらけになる必然があったので無理もない部分もありますが。 この答えは、No.7で良いと思います。 標準モード、互換モードの切り分けも必要ですが、あくまでscreen端末(ブラウザ)だけの狭い世界の話で、HTMLはそれだけが対象ではない。膨大なインターネットというデータベースの中のひとつのデータと考えると・・・ 最後のサンプルで、width:,mi-width,max-width:を調整すれば、何列だろうが、ほぼ希望通りになるでしょう。ウィンドウ幅(解像度)を変えるとどうなるでしょう。 ＞実際は、2ブロックばかりとか3ブロックばかりを高さ固定の成り行きで並べる予定です。30-50個に1つづつ数値指定は無理ですし、増えたり減ったりしますので、 後だしじゃんけんは「なし」です。
お礼
ここはWebデザイン・CSSのカテゴリーなので、表現に関するお答えが欲しかったのです。実験だとありありとわかるようなソースに、relativeを持ち出され、苦肉の策で、relativeを使わない理由をでっちあげてしまいました。後出し邪意見,大変失礼しました。 divが嫌いで、撲滅運動をされているのですね。それは申し訳ありませんでした。私は、今回のような質問には汎用ブロックレベル要素がてきしていると思っています。中身のない質問のための単純化したソースですから、問題だけが浮かび上がるはずです。 問題が再現できる最低限のソースコードで的確に質問することが、欲しい答えを貰う方法だと考えていたものですから、今回の答えのソースの長さには驚きました。そして長い質問ソースはスルーされる理由もよくわかりました。 大変勉強になりました。何度もお答えいただき、ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞英語の文献を読むのは私には無理です。 整形について、この様な掲示板で説明するのは無理です。仕様書でも２章、それも多くのページ数を割り当ててある複雑な部分です。 英文が苦手でも、今は多くの翻訳サイトがあります。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 )］より と同じ過ちを繰り返すことになります。
お礼
＞整形について、この様な掲示板で説明するのは無理です。 ずばり、指摘してくれたDrFellさんに大感謝です！！！無理なことを十数行でわかりやすく、教えていただき感激です。 あらためて、ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
それと、＿は消すかタブに戻してください。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞(デザインのためにマークアップしてないのでmainとmain2は中身は同じ) を書き足す位置が違った。 次の段落 「ちょっと簡単なサンプルを書いてみました。これだと、点字端末・読み上げソフト・携帯電話・検索エンジンなど、どのようなユーザーエージェントでも表示・理解してくれるでしょう。」に移動して読んでください。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞根本的に何かを間違えているようで、思ったようになりません。 そうですね。根本的な間違いは、とても重要なことなのですが--デザインを考えてマークアップしようとしていることです。初心者の一番多い根本的な間違いです。 デザインのために、文書構造上意味のない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"> <!-- html,body{margin:0;padding:0;} p{text-indent:1em;} div.header,div.section,div.footer{ ＿width:80%;min-width:420px;max-width:1000px; ＿border:aqua 1px solid; ＿margin:0 auto; ＿position:relative; } div.header{min-height:180px;} div.header h1,div.header div.abstract{margin-left:180px;} div.header p.logo{margin:0;position:absolute;top:5px;left:5px;width:160px;height:160px;background-color:gray;text-indent:0;} div.section{border-color:lime;} div.footer{border-color:silver;clear:left;} div.main{position:relative;min-height:200px;background-color:#ff88ff;} div.main>*{margin-left:40%;} div.main div.nav{position:absolute;top:0;left:0;width:39%;background-color:fuchsia;height:100%;margin-left:0;} div.main2{position:relative;min-height:200px;background-color:#8888ff;} div.main2>*{margin-left:30%;margin-right:30%;} div.main2 div.nav, div.main2 div.aside{ ＿position:absolute;top:0;width:29%;background-color:blue;height:100%;margin:0; } div.main2 div.nav{left:0;} div.main2 div.aside{right:0;} div.product h2{display:none;} div.product ul,div.product ul>li{ ＿display:block; ＿margin:0;padding:0; } 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) } --> ＿</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>
お礼
なぜ、インラインブロック要素を持ち出したのか？以下の補足質問にまったく回答がなく、残念です。回答が何をいいたいのかまったくわかりません。 このような技術質問Q&Aサイトでは、問題が出現する「最低限度」のソースを示すことが、マナーだと思っています。問題を単純化することは、質問の本質把握や回答を明確にできますので。 また、今回、新たにページを紹介いただきましたが、またしても英語で読めません。そして、「divスープ」は日本語では考え方すらないようで、検索エンジンには、それについて扱ったページは、おかしな翻訳サイト以外ヒットしませんでした。ORUKA1951さんも今回の件については、わからないのに回答しているのでは？と思います。そうだとしたら、迷惑です。今後無用に願います。 私の問題はDrFellさんの回答で、一応の解決ができました。仕様書に明るいORUKA1951さんからみて、問題ありますでしょうか？お分かりになり、問題があるようでしたら、ご指摘ください。しばらくは締め切らずにお待ちしております。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
その要素が、％をとるとき、何を基準(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なりで指定するのが本来の方法です。
補足
>その要素が、％をとるとき、何を基準(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)
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; を書けば一行になります！
お礼
padding:0;！！他の方の回答で、理由がわかりました。 ありがとうございました。
関連するQ&A
- docomo携帯サイトのボックスのマージン
携帯サイトで、ボックス(div)に対して マージンを適用させたいと思っています。 実際にそういうサイトがあったので、実現させたいのですが とあるサイトにあった以下のソース <div style="background-color:#ffcccc; margin:0px; padding:0px;">↵ きつきつ</div> <div style="background-color:#ccffcc; margin:1em; padding:1em;↵ border-width:1em; border-style:solid; border-color:#006600;">ゆったり</div> <div style="background-color:#ccccff; margin:0.5em; padding:0.5em;↵ width:2em;">はば指定</div> こちらではDocomoの実機でマージンが取れませんでした。 Docomoの仕様等あるとは思いますが 実際にマージンをとってるサイトがあったのですが あれはどのように実現しているのでしょうか？ なにかいい方法があればご教授下さい。
- 締切済み
- HTML
- ＣＳＳでマージンを残しつつ中央そろえにする方法について
こんにちは、Ｐｈｏｅｎｉｘ００１と申します。 趣味でホームページ製作をしている者です（ただし割と初心者です）。 先日、ネットサーフィンをしてホームページ作成の参考になるサイトを探していた所、 http://www.gardenxgarden.com/ というサイトを発見いたしました。 このサイトはサイトのサイズが横８００ｐｘだと思うのですが、１２００ｐｘで開くと左右に均等にマージンがあり、ウィンドウを小さくするとマージンからなくなり、さらにウィンドウを小さくしてもページが崩れないように出来ています。 私はこのようにマージンを作りつつ中央にサイトがあり、ウィンドウを小さくするとマージンからなくなるページは始めて見たので是非自分でもやってみたいのですが、ＣＳＳの設定はどうやるのでしょうか？ 練習用にＨＴＭＬとＣＳＳのソースを作りましたので、これでやり方を示していただけると幸いです。 ＨＴＭＬ、ＣＳＳ内容がメニューとコンテンツの（参考サイトのページ３分割ではなく）２分割です。マージンのやり方なので問題はないと思います。 なるべく間違いがないように骨組みは（マージン以外）作ったつもりですが、間違えていたらご容赦ください。 どうぞ、よろしくお願いいたします。 ■練習用ＨＴＭＬ <head> <title>マージンがあり、ウィンドウを小さくするとそこからなくなっていくサイトを作るには？</title> <link rel="stylesheet" type="text/css" href="index.css" media="screen,print"> </head> <body> <div id="main">■■←Ｍａｉｎで全体を覆いますよね？使用しない場合は消してください。 <div id="head"> <h1>マージンのあるサイト</h1> </div> <div id="menu"> <h2>リンク</h2> <ul> <li>マージン</li> <li>作りたいです</li> </ul> </div> <div id="content"> <p>マージンがあるのに中央にそろえられて、ウィンドウを小さくするとマージンから消えていくサイトは始めてみました。是非創ってみたいです。解答しやすくなるようにコンテンツのデータを入れてあります。</p> <h2>案内</h2> <p>ＨＴＭＬ、ＣＳＳが分かる方、解答をお願いいたします。</p> <dl> <dt>マージン</dt> <dd>ページの余白のこと</dd> <dt>やり方</dt> <dd>分からないです</dd> <dt>作る意欲</dt> <dd>沢山あります。</dd> </dl> </div> </div> ■ＨＴＭＬ終了 ■練習用ＣＳＳ（いらないものは消して、いるものは追加してください。ｈ１、ｈ２は分かりやすくなるように入れています。） body { background-color: white color: black; margin-left : auto ; margin-right : auto ; } h1 { font-size: 1.6em; background-color: #480; color: white; padding: 0.2em; } h2 { font-size: 1.0em; border: 1px solid #480; padding: 0.2em; } p { line-height: 1.6em; } div#main { float: middle; width: 800px; } div#menu { float: left; width: 9em; background-color: white; margin-right: 1em; padding: 0.4em; } div#menu h2 { font-size: 1em; } div#menu ul { font-size: 0.9em; list-style-type: none; margin-left: 0; padding-left: 0.5em; } div#menu li { margin-bottom: 0.4em; } div#content { float: left; width: 80%; } div#content h2 { font-size: 1.2em; border: 1px solid #800; padding: 0.2em; } div > *:first-child { margin-top: 0; } ■ＣＳＳ終了
- ベストアンサー
- HTML
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト
- marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************HTML <!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=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- HTML
- div配置のことで質問です。
div配置のことで質問です。 こんにちは。タイトル通りなのですが、divタグがうまく使えません。 いろいろなサイトを参照しましたが、解決できないのでこちらで質問させてください。 お聞きしたい事は3点あります。 （下の方に画像をつけているので参照しながらお願いします。） 1.画像上の黄色のdivくくりを水色の隣に持っていきたいということ 2.赤からオレンジまでの固まりをセンターに持っていきたいということ（横です） 3.紫のdivくくりをpadding:40;に指定すると上下左右に40pxずつ幅が広がってしまうのですが、サイズはwidth900×height500のまま内側に40px余白を作りたいということ もしおわかりになる方がいらっしゃいましたら、教えていただけると幸いです。 どうぞよろしくお願いいたします。 ■スタイルシート /*------------------------------------------------------------------ */ * { margin: 0; padding: 0; } body { text-align: center; background-color: #ffffff; } body div { margin: 0 auto; border : 0 ; } /*------------------------------------------------------------------ブロック要素 */ div.all { width: 900px; margin:0; padding: 0px; } div.aka { text-align: left; width: 900px; margin:0; padding: 0px; background-color: #ff0000; } div.murasaki { font-size:10pt ; text-align: left; width: 900px; height:300px; margin:0; padding:40px; background-color: #aaaaff; } div.mizu { font-size:10pt ; text-align: left; width: 500px; margin:0; padding:0px; background-color: #00ffff; } div.kiiro { font-size:10pt ; text-align: left; width: 400px; margin:0; padding:0px; background-color: #ffff00; } div.orange { font-size:10pt ; text-align: right; width: 900px; margin:0; padding: 0px; background-color: #ff6600; } ■ボディ内 <div class="all"> <!--ーーーーーーーー赤色--> <div class="aka"> テスト </div> <!--ーーーーーーーー紫色--> <div class="murasaki"> テスト </div> <!--ーーーーーーーー水色--> <div class="mizu"> news<br /> <table cellspacing="0" cellpadding="0" width="500"><tr><td> テスト </td></tr></table> </div> <!--ーーーーーーーー黄色--> <div class="kiiro"> topics<br /> <table cellspacing="0" cellpadding="0" width="400"><tr><td> テスト </td></tr></table> </div> <!--ーーーーーーーーフッター--> <div class="orange">テスト</div> </div> 長々とすみません。よろしくお願い致します。
- ベストアンサー
- HTML
- ブラウザ間でのdiv幅の違い
次のようなdivの入れ子を作ったのですが、 IEとFirefoxで大きさが違って表示されてしまいます。 FirefoxでもIEと同じ幅、同じ見ためで表示させるには 何をどのように指定してやれば良いでしょうか。 よろしくお願いします。 <html> <head> <style type="text/css"> <!-- .blue {width:200px; padding:10px; background-color:#0000ff;} .green {width:180px; padding:5px; background-color :#00ff00;} --> </style> </head> <body> <div class="blue"> <div class="green">ここが180px</div> </div> </body> </html>
- 締切済み
- HTML
- IEとその他のブラウザの表示
よろしくお願いします 現在、2段落の段組をCSSで行っています 但し、1段落目と2段落目にはマージンを指定しています そこで質問なのですが どこかのサイトでfloatとmarginは一緒に指定しないほうが良いというのを見たので --------------------------------- style.css --------------------------------- div.box_left_outer{ width: 300px; background-color: #FFF9E5; float: left; } div.box_left{ width: 260px; margin: 20px 20px 20px 20px; } div.box_right_outer{ width: 310px; float: left; } div.box_right_outer2{ width: 300px; margin-left: 10px; background-color: #FFF9E5; } div.box_right{ width: 260px; margin: 20px 20px 20px 20px; } --------------------------------- test.html --------------------------------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <div class="box_left_outer"> <div class="box_left"> テキスト </div> </div> <div class="box_right_outer"> <div class="box_right_outer2"> <div class="box_right"> テキスト </div> </div> <body> </html> という風に書いているのですが IEだと意図した表示になるのですが Firefoxやその他のブラウザだと右側の段組のマージンの箇所が 1つ上のdivについている感じになります Firefoxなどでも同じ表示にするにはどうしたらいいでしょうか？ よろしくお願いします
- ベストアンサー
- HTML
- 背景の色がコンテンツ部分にも表示されてしまいます
サイトに背景色をつけて、コンテンツ部分は白にしたのですが、どうしても背景色が表示されてしまいます。今はbody以外の各divの背景を白にしていますが、contentsの右下が背景色が表示されてしまします。 お手数ですが、ご指摘頂けると幸いです。よろしくお願いいたします。 <html> <body> <div id="wrapper"> <div id="header"></div> <div id="contents"> <div id="banner"></div> <div id="navi"> <h2><a href="../service/index.html"><em>あああ</em></a></h2> 中略 </div> <div id="bread"><a href="index.html">トップページ</a> > あああ</div> <div id="main"> <p>あああ</p> </div> <div id="sidenavi"> <h3>あああ</h3> <p>あああ</p> </div> <div id="pagetop"><a href="#"></a></div> <div id="footer">Copyright (c) 2009 All Right Reserved </div> </div> </body> </html> <css> body { text-align: center; margin: 0px; padding: 0px; background: #FFCCFF; } #wrapper { text-align: left; margin: 0px auto; padding: 0px; height: 800px; width: 850px; background: #FFFFFF; } #header { margin: 0px; padding: 0px; height: auto; width: 850px; background: #FFFFFF; } #contents #banner { background: url(image/banner.jpg) no-repeat; margin: 0px; padding: 0px; height: 304px; width: 850px; } #contents #navi { background: url(image/menu.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #contents #navi2 { background: url(image/menu2.jpg) no-repeat; margin: 0px; padding: 0px; height: 61px; width: 850px; } #navi h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi em { visibility: hidden; } #navi2 h2 { font-size: 12px; margin: 0px; padding: 0px; float: left; } #navi2 em { visibility: hidden; } #contents { margin: 0px; padding: 0px; height: 500px; width: 850px; background: #FFFFFF; } #contents #sidenavi p { font-size: 95%; line-height: 1.1em; margin-right: 5px; margin-left: 5px; } #sidenavi h3 { font-size: 105%; font-weight: bold; border-left: 7px solid #FF3366; padding-left: 5px; background: #FFCC33; margin: 0px; padding-top: 5px; padding-bottom: 5px; } #navi a { margin: 0px; padding: 0px; height: 61px; width: 169.5px; display: block; text-decoration: none; } #navi2 a { margin: 0px; padding: 0px; height: 61px; width: 170px; display: block; text-decoration: none; } #contents #main { margin: 10px 0px 0px; padding: 0px 10px 10px; height: auto; width: 610px; float: left; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "メイリオ"; background: #FFFFFF; } #contents #pagetop { clear: both; background: #FFFFFF; margin: 0px; padding: 0px; } #contents #sidenavi { margin: 10px 5px 0px 0px; padding: 0px; float: right; width: 200px; border: 1px dashed #FF3399; background: #FFFFFF; } #footer { font-size: 90%; color: #FF3366; text-align: center; margin: 0px; padding: 10px 0px 0px; clear: both; border-top: 1px dotted #333333; border-right-color: #333333; border-bottom-color: #333333; border-left-color: #333333; background: #FFFFFF; } #main p { font: bold 120% "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #FF3399; padding: 0px; margin-top: 5px; margin-bottom: 5px; } #pagetop img { text-align: center; padding-top: 10px; margin: 0px; padding-bottom: 10px; padding-left: 5px; } .p1 { font-size: 130px; color: #FF3366; padding: 10px; width: 590px; border: 2px dashed #FF3399; background: #FFCCFF; margin: 10px; text-align: center; } #main img { margin: 0px; padding: 0px 0px 10px; } #contents #bread { margin: 5px 0px 0px; padding: 5px 5px 0px 10px; font-size: 100%; width: 830px; }
- 締切済み
- HTML
- FlexboxのレシポンシブCSSで困ってます2
Proof4さんスミマセン！再度質問させてください。教えて頂いた通りにしたらboxのレシポンシブ化は出来たので、infofl-item2にｈ3とリストを作成したらinfofl-item2のリストがｈ3の下に来なくて右横に来てしまいました。どこが悪いのかわかりません？お手数ですが教えて下さい。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Introduction to CSS(flex-basis)</title> <script src="js/flexibility.js"></script> <style> <!-- .infofl{ display: -webkit-flex; display: flex; padding:0; width:100%; } .infofl-item1 { display: -webkit-flex; display: flex; flex-basis: 40%; } .infofl-item2 { display: -webkit-flex; display: flex; flex-basis: 60%; } @media screen and (max-width:567px) { .infofl{ display: block; } .infofl > div{ width: 100%; } } --> </style> </head> <body> <div class="infofl"> <div class="infofl-item1" style="background-color : yellow;"> <dl> <dt>■test1 <dd>test <dd>test <dt>■test2 <dd>test <dd>test <dt>■test3 </dl> </div> <div class="infofl-item2" style="background-color : silver;"> <h3 style="color : white;background-color : #212121;padding-top : 0.5em;padding-left : 0.5em;width : 98%;height : 1.5em;">お知らせ・新着情報</h3> <dl> <dt>■test1 <dd>test <dt>■test2 <dt>test <dt>■test3 <dt>■test4 <dt>■test5 </dl> </div> </div> </body> </html> 何度お尋ねしてもうしわけありまんがよろしくお願いいたします。
- ベストアンサー
- CSS
- 【スマホ・タブレット】floatの高さ可変マージン
スマホやタブレットにて画面サイズが違っていても常に横幅を１００％で表示させたいと思っています。 ただfloatで回り込ませた場合、Link１に右と下にマージンができません。 またborder-radiusを付けた場合下部が角丸にならず、何かうまく表示される方法はないかと悩んでいます。 この様な場合どのようにソースを書けばいいのかアドバイスを頂ければと思います。 またLink1やLink2の部分の高さの中央揃えにしたい場合もご教授頂ければ幸いです。 宜しくお願いいたします。 <style type="text/css"> <!-- html,body { margin: 0; padding: 0; height: 100%; } .cl { display: inline-block; } .cl:after { content: ""; display: block; clear: both; } div#boxArea { overflow: hidden; height: auto; width:100%; } div#boxArea div { float: left; padding-bottom: 32767px; margin-bottom: -32767px; } div#boxArea div#one { width: 10%; } div#boxArea div#two { width: 50%; } div#boxArea div#three { width: 50%; } --> </style> </head> <body> <div id="boxArea" class="cl"> <img src="http://www.universe-s.com/img/news/2004/0520_01.jpg" style="float:left; background:#000; width:20%; height:auto;" /> <div style="width:80%"> <div style="width:100%;"><div>aaaaa</div></div> <div id="two"> <div style="background:#F00; margin:5px 5px -32767px 5px; padding:5px 5px 32767px 5px; width:100%; border-radius:10px;">Link1</div> </div> <div id="three"> <div style="background:#060; margin:5px; padding:5px; padding-bottom: 32767px; margin-bottom: -32767px; width:100%; border-radius:10px;">Link2</div> </div> </div> </div> </body>
- 締切済み
- CSS
お礼
ありがとうございました。できました。 思ったように、できるようになりました。 勘違いを単刀直入に解説いただき、わかりやすかったです。 br や clear も不要できれいな構造のまま、デザインすることができ、すっきりしました。