hasLayoutプロパティに関する具体的な情報を教えてください
- hasLayoutプロパティは、displayプロパティやwidth,heightプロパティ等に特定の値を指定した場合にtrueとなります。
- hasLayoutプロパティの値がtrueの場合、リストマーカーが消えたり、配置が意図しない位置に表示されることがあります。
- hasLayoutプロパティの値がfalseの場合、floatプロパティを使用したレイアウトが崩れる可能性があります。IE独自のzoomプロパティを使用すると改善されることがあります。
- ベストアンサー
hasLayoutプロパティ
hasLayoutプロパティに関しての質問です。 ・displayプロパティやwidth,heightプロパティ等に特定の値を指定した場合にhasLayoutプロパティの値がtrueになる。 ・hasLayoutプロパティの値がtrueの場合、リストマーカーが消えたり、本来付くべき場所以外に付いてしまう。 ・IE7では拡大または縮小表示すると重なる部分が出てくる。 ・hasLayoutプロパティの値がfalseの場合、特にfloatプロパティを使用したレイアウトが崩れてしまう。 ・hasLayoutプロパティの値がfalseの場合で崩れたレイアウトはIE独自のzoomプロパティを使用すると改善される可能性がある。 等のことは理解していますが、もっと具体的なことを知りたいので質問しました。 例えば、hasLayoutプロパティの値がfalseの場合、floatプロパティを使用したレイアウトが崩れてしまう可能性がある。ということだけではなく、レイアウトが崩れてしまう条件やどのように崩れてしまうのかが具体的に載っているサイトや、具体的な経験例をご存知の方、よろしくお願いします。
- gotobuster
- お礼率0% (0/1)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
http://nagomin0123.web.fc2.com/etc/haslayout.html ↑のサイトはいくつかの具体例が記載されています。
関連するQ&A
- IE6のみレイアウトがずれる。
IE6のみレイアウトがずれる。 CSSで下記のように指定しています。 現状のブラウザであればレイアウトが崩れないのですが IE6で見るとレイアウトが崩れるのです。 #my_navi #my_contentsL #my_contentsR の三つが横一列に並ばせたいのですが ● ←#my_navi ● ←#my_contentsL ● ←#my_contentsR の様にレイアウトが崩れてしまいます。 何か解決方法が有りますでしょうか? 宜しくお願い致します。 ↓CSSの記述 body { width : 100% ; float: center; display: inline; } #my_body { margin: 0 auto; width : 950px ; } #my_main { width : 950px ; } #my_header { width : 950px ; height: 100%; } #my_headerT { float : left ; width : 950px ; } #my_headerL { float : left ; width : 750px ; height: 260px; } #my_headerR { float : right ; width : 200px ; height: 260px; } #my_navi { float : left ; width : 190px ; display: inline; } #my_contents { float : right ; width : 750px ; display: inline; } #my_contentsL { float : left ; width : 550px ; display: inline; } #my_contentsR { float : left ; width : 190px ; display: inline; } #my_contentsF { float : left ; width : 750px ; display: inline; }
- ベストアンサー
- ブログ
- メイン部分を除く、リストだけにline-heightプロパティを適用する書き方を教えてください
XHTMLでサイト作成をしています。 メイン部分は除き、リストだけに line-height:normal を適用する書き方を教えてください。 詳しく説明しますと、 CSSファイルで li{ text-align:left; line-height:200% } として、line-heightプロパティで行の高さを200%に指定しました。そうすると、当然ながらリストも含めて200%の高さになってしまいました。しかし、リストだけは、 line-height:normal にしたいのです。どうしたらよいのでしょうか。 ちなみにCSSファイルは、クラス「main」、クラス「menu」に .main{ float:right; width:1000px } .menu{ float:left; width:160px; margin-top:80px } とスタイルを指定しています。 このあと、 「div要素」で各段の範囲をグループ化して、クラス名を指定し、floatプロパティで配置して、幅を指定しました。 このようにして、Ｗｅｂページの左にメニュー、右に本文が表示されるように２段組のスタイルを指定しています。
- ベストアンサー
- HTML
- 横並びリスト ブラウザ縮小 カラム落ち
よろしくお願いします。 ulとliで横並びの商品リストの様なものを作成していて、 ようやく完成したと思っていたのですが、 ブラウザの拡大/縮小機能を使って、 少しでも縮小するとカラム落ちが発生してしまいます・・・。 完成したと思っていたので焦っております(汗) 簡単にソースを記載しますので、 原因と対策がわかりましたら、どうか回答宜しくお願いします。 ul{ width:720px; list-style:none; } li{ width:142px; border:1px solid #000; float: left; } このような感じで、ulには別にクラスを指定して、clearfixも指定しています。 .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ ulの全体720pxを5個のliで割って、144pxとなり、 そこからborder両サイド1pxづつを引いて142pxをliに指定しているのですが、 間違っているのでしょうか？ liの幅を144pxにしてborderを指定しない場合は、 縮小してもカラム落ちは起こりません。 初歩的なことかもしれませんが、 どうぞよろしくお願いします。
- ベストアンサー
- CSS
- ＶＢＡでＺｏｏｍプロパティで値の取得方法を教えてください
Ｗｉｎ ＸＰ エクセル２００３でＶＢＡを使用しています。１ペ－ジに収めて印刷したい為 ＰａｇｅＳｅｔｕｐで ．Ｚｏｏｍ＝Ｆａｌｓｅ ．ＦｉｔＴｏＰａｇｅｓＷｉｄｅ＝１ ．ＦｉｔＴｏＰａｇｅｓＴａｌｌ＝１ ． 余白の指定は、オ－ル０ の指定をしていますが「拡大／縮小」倍率が用紙サイズより常に小さく指定されます。できれば指定用紙サイズ一杯に印刷したいのです。その為に倍率の値が取得できれば得た値を何割か増やして印刷したいのですが。
- 締切済み
- Visual Basic
- インラインフレームの縦幅を、ブラウザ・画面・解像度に合わせて、自動的に調節させたいけど、IEとOperaで上手くいきません；；
現在ホームページを制作中で、初めてインラインフレームを使って制作しています。 まず下記のように、インラインフレームのみで試してみたら、IE７・Opera・FireFox・GoogleChromeで上手く自動的に調節できました。 <html> <head> </head> <body> <div> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> 次に、インラインフレームの周りに、下記のように画像やリンクバナーなどを配置させました。 <html> <head> </head> <body> <div><img src="" width="50" height="600"></div> <div><img src="" width="150" height="600"></div> <div> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> これも予定通り、IE７・Opera・FireFox・GoogleChromeで上手く自動的に調節できました。 次に、下記のようにそれぞれをフロートさせて配置させてみました。 <html> <head> </head> <body> <div style="float:left;"><img src="" width="50" height="600"></div> <div style="float:left;"><img src="" width="150" height="600"></div> <div style="float:left;"> <iframe src="frame_test.html" allowtransparency="true" frameborder="0" width="600" height="80%"></iframe> </div> </body> </html> すると、FireFox・GoogleChromeでは上手くいったのですが、IE7・Operaでインラインフレームの縦幅が100pxくらいに短くなってしまい、調節もできなくなってしまいました。 それぞれを配置させるのにフロートは必要なので、どうすればよいか分からなくて困っています。 何が原因で、どうすれば上手くいくか分かる方、どうかアドバイスをお願いします。
- 締切済み
- HTML
- floatした要素を親要素に対して左右ピッタリに収める
タイトルのとおり、CSSのfloatを使ってある要素を横にレイアウトします。 この要素は増減します。マージンを使って要素の右に隙間を作りますが、一番右にくる要素にも同じマージンがつくので、親要素に対して右端に不要な隙間ができます。 ３つ以上の要素をfloatを使って左右一杯に配置するにはどうすればいいのでしょうか。IE6をメインに、safari1.0やfirefoxでも実現できる方法を教えてください。 ソースはこんな感じです。 【HTML】 <div> <p><img src="○○○○" width="150" height="150" /></p> <p><img src="○○○○" width="150" height="150" /></p> <p><img src="○○○○" width="150" height="150" /></p> <p><img src="○○○○" width="150" height="150" /></p> ・ ・ ・ </div> 【CSS】 div{ width:800px;} p{ width:150px; float:left; margin-left:50px;} この場合、４つ目の要素の右にも50pxの空間ができます。 800pxの中に、均等割付けできればと思います。 よろしくお願いいたします。
- 締切済み
- HTML
- floatでレイアウトした後にcleafixは必ず必要ですか？
いつもお世話になっております。 早速質問ですが、floatを使用してレイアウトした箇所には必ずclearfixを指定しなければならないのでしょうか？ 例えば以下のレイアウトでテキストを組んでみたのですが、winXPのIE7、IE6、opera9、FireFox3、では問題なく表示されていました。 それで外枠のBOXの幅が設定されており、float指定した要素の親要素に高さの指定があり、float指定した要素の親要素の下に外枠と同じ幅の画像やdivがあればclearfixを記述しなくてよいのではと考えたのですが、仕事でWEBを制作しないといけない為、確認しておきたくて投稿しました。 ご回答を宜しくお願いします。 〔XHTML〕 <body> <div id="wrapper"> <div id="header"> <div id="header01">AAA</div><div id="header02">BBB</div> </div><!--end header--> <div id="pankuzu">ccc</div> <div>111</div> <div>222</div> </div><!--end wrapper--> </body> 〔css〕 #header{ text-align:left; width: 900px; height:150px; } #header01 { float: left; width: 400px; } #header02 { float: left; width: 450px; height: 150px; } #pankuzu{ width: 900px; height: 20px; background-color:#999; }
- ベストアンサー
- HTML
- Firefox15.0におけるborderの挙動
Firefox15.0環境でのborderの挙動についての質問です。 divをfloatで並べてレイアウトし、borderで境界線を描画しております。 その際、border-widthを1pxで設定しているのですが、Firefox15.0環境だとborderが若干太くなってしまい、レイアウトが崩れるケースがあります。 Firebugにて確認した所、1pxの指定が実際には1.1167pxという半端な値が設定されていました。 ところが、問題のレイアウト箇所のみ別HTMLに抜き出して確認した所、border-widthは1pxのままでレイアウトは崩れませんでした。 この状況から、他のCSS設定や親要素からの継承が影響しているのだろうと考え、調べたのですが、Firebug上ではレイアウトが崩れる場合（完全版）と、レイアウトが崩れない環境（抜粋版）との間にCSSの設定の相違はありませんでした。 ちなみに、他に試したブラウザです IE6 IE9 Firefox12 では上記問題は起こらず、正常に表示されました。 書くまでもないぐらいのざっくりした感じですがソースは以下のようなイメージです。 //css div.main{ width:500px; height:500px; } div.a{ width:30px; height:30px; border:1px solid black; float:left; } div.main{ width:60px; height:30px; border:1px solid black; float:left; } //html <div class="main"> <div> <div class="a"></div><div class="a"></div><div class="a"></div><div class="a"></div> </div> <div> <div class="b"></div><div class="b"></div> </div> </div> これだけの情報では解決策を頂けないのは重々承知しているので、何かヒントや直接的には繋がりがなくとも、border-widthのおかしい挙動について何かご存知の方が居ましたら教えて頂けないでしょうか？
- 締切済み
- HTML
- どう変更してもＩＥ６だけＣＳＳレイアウトが崩れてしまいます。
ＣＳＳレイアウトで、サイトを作成していたのですが、 最近になってＩＥ６で確認してみると、レイアウトが崩れまくっていました。。。 ３カラムレイアウトなのですが、Ｆｉｒｅｆｏｘ等他のブラウザではきちんと表示されるので、なぜかＩＥ６だけ縦１列になってしまいます。。 こちらのサイトでもＩＥ６はレイアウトが崩れやすいという情報がたくさんあり、そちらのアドバイスを参考にしながら１日かけてがんばってのですが、できませんでした。もう限界です（涙） 現在のＣＳＳは、 * { margin:0; padding:0; } .wrapper { width: 740px; margin: 0 auto; } .header { width: 740px; } .main { width: 740 px; /* 両端ブロックとコンテンツを囲んでいるクラスです。 */ } .menu {display: inline; float: left; width: 205px; } .contents {display: inline; float: left; width: 385px; } .affiliate {display: inline; float: left; width: 150px; } .footer { clear: both; width: 740px; } というような状態です。 どなたかアドバイスいただけますと大変幸いです。 よろしくお願いいたします。
- ベストアンサー
- HTML
- 【css】Firefoxで見るとborder-bottomが消える
ただいま、IEとFirefoxで動作確認をしております。 IEでは問題なく表示されるのですが、Firefoxで確認した場合、ボックスの下部のボーダーが消えてしまいます。 このとき、文字を大きくするとボーダーが表示されます。 また、文字を小さくすると、文字の大きさによっては表示される場合と表示されない場合とがあります。 こちらを回避する方法はあるのでしょうか？ 不必要と思われる部分は端折っていますが、 html及びcssは下記の通りです。 /////////////////////////////////////////// <div id="aaa"> <div id="left">あああ</div> <div id="right">あああ</div> </div> /////////////////////////////////////////// #aaa{ background-color: #ffffff; border: 1px solid #000000; width: 498px; zoom:100%; overflow:auto; } * html #aaa{ width: 500px; overflow: visible; height:1px; } #left{ float:left; } #right{ float:left; } ///////////////////////////////////////////
- 締切済み
- HTML
