- ベストアンサー
float divの関係
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
HTMLには文書構造しか書きません。 たとえば、本文と目次でしたら <body> <section><!-- ひとつのセクション(節とか章とか項にあたる)を示す要素 --> <h2>見出し</h2> <section> <h3>見出し</h3> <p>段落<p> <p>段落<p> </section> <section> <h3>見出し</h3> <p>段落<p> <p>段落<p> </section> <nav id="contentTable"> <h2>目次</h2> <ol></ol> </nav> </section> ・・・・ というHTMLがあるとします。わかりやすいようにHTML5の新しい要素( )を使ってます。HTML4でしたら <body> <div class="section" id="what_is_HTML"> <h2>見出し</h2> <p>段落</p> <div class="section" id="History"> <h3>見出し</h3> <p>段落<p> <p>段落<p> </div> <div class="section" id="Web"> <h3>見出し</h3> <p>段落<p> <p>段落<p> </div> <div class="nav" id="contentTable"> <h2>目次</h2> <ol></ol> </div> </div> ・・・・ と書くところですね。 ★以下順を追って説明していきますので、知らない部分があったら自分で調べてください。ここでは説明し切れません。 (1) ここで、文書の本文(<body>でマークアップされている要素にfont-familyを指定する body{font-family:"ＭＳ Ｐ明朝",serif;} /* 詳細度 0 0 0 1 */ とすると、font-familyは継承するプロパティですから、子々孫々の要素に継承されます。 (2) ここで、div要素に div{border:solid 1px gray;} /* 詳細度 0 0 0 1 */ と指定すると、すべてのdiv要素にborderが付きますが、borderは継承されないプロパティなので、Hh2><h3><p><ol>・・・などには枠は付きません。 (3) さらに、 div div{border-color:red;font-family:"ＭＳ Ｐゴシック" sans-serif;} /* 詳細度 0 0 0 2 */ とすると、div要素の子孫のdivのみ枠の色が赤くなり、フォントも変わります。詳細度が高いですから、(2)の指定は上書きされます。 ★ここで質問は、親コンテナにあたる<div class="section" id="what_is_HTML">に対して、 #what_id_HTML{} /* 詳細度 0 1 0 0 */ で指定した継承されるはずのプロパティが継承されないということでしたら、原因は、 ・この要素が閉じられている ・下の階層の<div>でより高い詳細度でスタイルが定義されている。 div.#Web{font-family:monospace;}/* 詳細度 0 1 0 1 */ などが考えられます。 一度文法チェックなり、きちんとインデントさせてタグの閉じすぎがないか、出現順番に誤りがないか、詳細度は想定どおりかなどをチェックしてください。 firefoxにはDOM inspectorが標準インストールすれば付いてきます。は、fireBugという解析用アドオンがあります。それで調べるとわかりやすいでしょう。
その他の回答 (1)
- kamepanman
- ベストアンサー率43% (19/44)
もうすこし詳しいソースを見せてください！！
関連するQ&A
- floatで並べた２つのdivの高さを揃えるには？
コーディング初心者です。 以下の内容のcssがかけなくて困っています。 内容は <p id="a">A</p> <div id="b">B</div> <p id="c">C</p> 今はこの3つをfloatで横並びにします。 #a {float: left;} #b {float: right;} #c {float: right;} ここで、BとCに入る内容が変わる場合でも2つの高さが揃うようにしたいのですが、 MTを使用し、Bを表示させないこともあるので、 BとCを<div>で囲み幅を指定することができません。 何か方法はありますでしょうか？ 参考のURL等を教えていただけるだけでもたすかります。 よろしくお願いします。
- 締切済み
- CSS
- floatさせたdivタグを折り返させたくない
Javascriptで開いた子ウィンドウ内のページについて レイアウトで困っております。 以下のようなブロック要素の配置について <div> <div style="float; left"> コンテンツA </div> <div style="float; left"> <div> コンテンツB </div> <div> コンテンツC </div> </div> <div style="clear: both"> </div> 以上のような配置になっており、 コンテンツ３の中身をJavascriptで書き換えています。 その際、コンテンツCの横幅が変動し右に大きく広がる場合があります。 それにより、ウィンドウサイズによってはコンテンツBCがコンテンツAに回りこんでしまいます。 何故こうなるかは理解出来るのですが、対策が思い浮かびません。 ●思いついたが避けたい対応策 ・親のdivタグに想定出来る最大値のwidthを設定する ・tableタグによるレイアウト 良い対応策はございませんでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- 【ＣＳＳ】floatで左右に並べた<div>のマージンが効かない。
ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、<div id="A">に設定したマージンが【firefox】でききません。 おそらく基礎的なことと思われますが、検索の仕方が悪いのか、 該当する質問を探し出すことが出来ませんでしたので、質問させていただきました。 どなたか、教えていただければと思います。 【HTML】--------------------------------- <div id="A"> <div class="B"> <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> <div class="C" > <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> </div> 【CSS】--------------------------------- #A { margin-bottom:10px } #A h3{ background:url(../images/bg_h3_option_half.gif) no-repeat; width:380px; height:31px; padding:0 0 0 15px; margin:10px 0 0 0; overflow:hidden; font-size: 22px; color:#FFFFFF; font-style:normal; } #A div.B { float:left; width:380px; height: 100%; margin-right:20px; } #A div.C { float:left; width:380px; height: 100%; }
- ベストアンサー
- HTML
- floatしたdiv内の要素について
下記のようなHTML、CSSで、 floatしたdiv「leftside」内にp要素を配置すると p要素の上下に空間が発生します。 このp要素の上下の空間はなんでしょうか？ どうすれば消えますか？ ちなみに、スタイルシートから「leftside」の「float: left;」を削除するとp要素の上下空間はなくなります。 または、pタグで囲まなくても空間は消えます。 よろしくお願いいたします。 ■Html <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test_style.css" media="all"> </head> <body> <div id="warapper"> <!-- ヘッダ --> <div id="head"> </div> <!-- 左サイト --> <div id="leftside"> <p class="test">leftside</p> </div> <!-- コンテンツ --> <div id="contents"> contents </div> <!-- フッター --> <div id="footer"> <p>fotter</p> </div> </div> </body> </html> ■Css @charset "utf-8"; body{ /*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/ font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 90%; text-align:center; padding: 0; margin: 0; background-color: #fff; } #warapper{ text-align: left; width: 800px; margin:0 auto; /*ページ全体をセンタリングする指定*/ padding: 0; background-color: #ffffcc; } #head{ background-color: #000; height: 160px; margin: 0 0 20px 0; padding: 0; position: relative; /*ロゴ画像を右下に配置するため*/ } #topbar{ background-color: #dcdcdc; height: 50px; margin: 0 0 20px 0; padding: 0; } #leftside{ background-color: #ccc; width: 180px; float: left; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ overflow:hidden; } #contents{ background-color: pink; width:600px; float: right; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ } #contents_all{ background-color: pink; margin: 0 0 20px 0; /*下方向に余白を設ける*/ padding: 0 0 0 0; } #footer{ background-color:#666; text-align: center; clear: both; margin: 0; padding: 0.5em 0; } .test { background-color: red; }
- 締切済み
- CSS
- divが思うように使いこなせず困っています。
divが思うように使いこなせず困っています。 下記のようにした場合、背景色や、width:100; height:100の指定は無視されてしまいます。 (動作確認はfirefox3でしています) width:100; height:100と指定していてもサイズが小さければ小さくなってしまうのでしょうか。 サイズの固定方法と、一番外のdivを効かせる方法をどなたか教えていただけますか？ <div style="min-height:50; width:200; background-color:#FFFF00;"> <div style="width:200; height:100; float:left"> <p>testtest</p> <p>testtest</p> </div> <div style="width:100; height:100; float:left"> <p>testtest</p> <p>testtest</p> </div> </div>
- ベストアンサー
- SEO
- floatを含むブロック
左側にブロック要素を置いて、テキストが右側に回り込むようにしたくて、以下のようなHTMLを書いてみたのですが・・回り込むテキストが少ないと、左に寄せたブロックが、親ブロックからはみ出してしまいます。 float:leftがついているブロックが、親のブロックからはみ出さないようにする方法は、ないでしょうか？ <div style="background-color:orange"> ブロック１<br/> <div style="width:150px; float:left; background-color:pink"> ブロック２<br/> ：<br/> ：<br/> ： </div> ブロック１ </div>
- ベストアンサー
- HTML
- ボックス（div）の縦方向中央をそろえる
<div id="wrap"> <div id="a">～</div> <div id="b">～</div> </div> #a { float: left; } #b { float: right; } a, b を wrap で包み、a, b を float で左右に並べています。 この a と b のボックスの高さが違うとき、これらを縦方向センターでそろえるにはどうしたらよいでしょう？
- ベストアンサー
- 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
- CSS floatについて教えて下さい。
【html】 <div id="wrapper"> <div id="top"></div> <div id="middle"> <div id="a"></div> <div id="b"></div> </div> </div> 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#FFF; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#CC0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか？初心者ですので、よろしくお願い致します。
- ベストアンサー
- HTML
- float の clearfixで謎の空間が出現
現在、図のように表示されています。 本来であれば右側の「フロートテスト」という横並びのブロックがすぐ下に並んで表示させたいのです。 しかし、2つめが左側のサイドバーの終わりから表示されています。 サイドバーにも「フロートテスト」にもfloatとclearfixを使用しています。 clearfixを削除すると、wrapperが高さを持たないボックスになりますが、目的通りの縦に並んだ状態になります。 フロートが悪いのか、clearfixの設定or使い方が悪いのか。 原因が不明で悩んでおります。 よろしくお願いします。 <?xml version="1.0" encoding="UTF-8"?> <!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" dir="ltr" xml:lang="ja" lang="ja"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>test</title> </head> <body style="background: #ffe6e6;"> <div id="wrapper" style="width:800px;background:#ffffff;border:1px solid red;" class="clearfix"> <div id="sidebar" style="width:200px;float: left;"> <div> <div> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> </div> </div> <div> <div style="border:1px solid #ccc;"> <p style="FONT-WEIGHT: bold; TEXT-ALIGN: center">サイドメニュー</p> </div> <div> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> <ul><li><a href="index.html">サイドメニュー</a></li></ul> </div> </div> </div> <!-- /sidebar --> <!-- contents --> <div id="contents" style="margin-left: 200px;" class="clearfix"> <div class="clearfix"> <div style="float:left;width:50%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> <div style="float:right;width:49%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> </div> <div class="clearfix"> <div style="float:left;width:50%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> <div style="float:right;width:49%;"> <div style="border:1px solid green"> <p>フロートテスト</p> </div></div> </div> </div><!-- /contents --> </div><!-- /wrapper --> </body> </html> common.cssで読み込んでいるclearfix の部分 .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; /* Hides from IEmac \*/ } .clearfix { display: block; }
- ベストアンサー
- CSS
