CSSのfloatについて教えてください
- DreamweaverCS3, CSS1,Winを使用して商品紹介のページを作成中です。商品ブロックを左右に２列ずつ表示しようと考えていますが、floatを使用してもレイアウトが崩れてしまいます。
- 現在、商品紹介を４シリーズに分けて各ブロックにボーダーをつけて表示しようとしています。試した方法としては、各シリーズにクラスを設定してborder-Bottomをつける方法と、商品ブロックを定義リストでマークアップしてfloatを使用する方法を試しましたが、どちらの方法でもレイアウトが崩れてしまいます。
- また、floatではなくabsoluteを使用してもデザインビューでは回りこんで表示することができますが、ブラウザ上では表示されません。この問題に対してアドバイスをいただきたいです。
- ベストアンサー
CSSのfloatについて教えてください。
商品紹介のページを作成したいのですが、★どうクラスをつけて★どうfloatしたらいいのか 分かりません。（DreamweaverCS3, CSS1,Win）画像添付してます。 いろいろ試してはみたのですが・・・・・↓ 商品紹介は４シリーズに分けて各間にボーダーをつけて商品ブロックを左右に２列ずつ表示していこうと考えています。 ○各シリーズにクラスを設定してborder-Bottomをつける ○商品ブロックを1つづつ定義リストでマークアップして<dl class="floatL"><dl class="floatR">をつけていく。（cssに.floatL {float:left} .floatR {float:right}と記述してます。） 参考書を見ながらこの方法ですると何回やってもErrorがおきてしまいました。 次に１つづつ<dl>にidをつけて１つずつfloatしていくと★2が右に寄った状態になってしまいレイアウトが崩れてしまいました。 ちなみにfloatではなくabsoluteでするとデザインビューでは回りこんで表示するのですがブラウザでは表示できませんでした。 どの方法も間違った感じがするのですが独学中のためアドバイスをいただけたらうれしいです。 宜しくお願いします。
- ennbosu
- お礼率51% (15/29)
- CSS
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
div.products div+div 詳細度は 1+10+1+1 = 13 + は隣接セレクタというものです。兄弟関係を調べる。 div.products 要素の子孫であるdiv の弟になるdiv要素と言う意味です。 5.7 隣接セレクタ（Adjacent sibling selectors） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#adjacent-selectors ) {border-top:double 3px green;} その要素のトップにだけボーダーをつける。 div.products div hr{ 詳細度は、1+10+1+1 = 13 class配列にproductsをもつdiv要素の子孫であるdiv要素の中のhrについて clear:left; floatを解除すためだけなので visibility:hidden; hrは表示しなくて良い。display:noneじゃ消えちゃうので・・ 詳細度を計算する癖をつけましょう。この場合、 div.section div div hr があったとしてもそれは詳細度 1+10+1+1+1=14ですから、それに指定してあるスタイルは上書きできませんね。 セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )やセレクタの詳細度 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#specificity )を含むカスケード処理 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascade )は、カスケーディングスタイルシートの命ですからね。 HTMLの要素のclass属性は空白で区切った配列を値として持ちえます。( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#adef-class ) それによって、div class="section product note"のようにclass属性を書けます。それをうまく利用すると、HTMLもCSSもとっても簡略化かつわかりやすくなります。 例) <div class="note important"> <div class="section important"> <span class="important note"> なら、*.important{font-weight:bold;}、div.note{text-decoration:underline;}とか・・・
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
画像を左右に２列だとしてもfloat:leftだけで行います。下のサンプルはウィンドウ幅が1120px程度だと２列になりますが、幅広ディスプレイだと３列になるし、狭いディスプレイでも２列(min-widthを消せば1列、width:720pxとかに固定すれば強制的に2列) ユーザービリティを考えれば、ガチガチに２列に固定しない(リキッドスタイルのほうが)ほうがよいです。印刷を想定されるなら、サンプルのように@media print{}のスタイルシートを別途用意するか、PDFにしましょう。 floatの回り込みを解除しボーダーをつけるにはdiv+divと兄弟セレクタを使うか、hrを使うかが良いでしょう。 ★下記サンプルはタブを全角スペースに置き換えてあります。 <!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:orika1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- h1{text-align:center;} div.products h2{display:none;} div.products{ width:auto; min-width:700px; margin-left:160px; margin-right:160px; padding-left:10px; background-color:rgb(220,2520,220); } div.products div{ padding-left: 0px; } div.products div+div{border-top:double 3px green;} div.products div hr{ clear:left; visibility:hidden; } div.products dl{ width:300px; height:300px; display:block; float:left; margin:20px; border-color:gray; border-style:solid; border-width:1px 3px 3px 1px; position:relative; } div.products dl dt,div.products dl dd{ padding-left: 140px; margin:5px; } div.products dl dd.photo{ padding:2px; width:120px;height:280px;margin-left:5px; position:absolute; top:5px;left:5px; background-color:gray; } @media print{ div.products{ width:720px; margin-left:auto; margin-right:auto; } } --> </style> </head> <body> <h1>サンプル</h1> <div class="section products"> <div class="section"> <h2>製品グループ1</h2> <dl> <dt>ドライバーA</dt> <dd class="photo"><img src="" alt="" /></dd> <dd>商品説明あいうえおかきくけこさしすせそ</dd> <dd>価格</dd> </dl> <dl> <dt>ドライバーB</dt> <dd class="photo"><img src="" alt="" /></dd> <dd>商品説明あいうえおかきくけこさしすせそ</dd> <dd>価格</dd> </dl> <dl> <dt>ドライバーC</dt> <dd class="photo"><img src="" alt="" /></dd> <dd>商品説明あいうえおかきくけこさしすせそ</dd> <dd>価格</dd> </dl> <hr> </div> <div class="section"> <h2>製品グループ2</h2> <dl> <dt>ハンマー1</dt> <dd class="photo"><img src="" alt="" /></dd> <dd>商品説明あいうえおかきくけこさしすせそ</dd> <dd>価格</dd> </dl> <hr> </div> <div class="section"> <h3>製品グループ2</h3> <dl> <dt>ペンチ1</dt> <dd class="photo"><img src="" alt="" /></dd> <dd>商品説明あいうえおかきくけこさしすせそ</dd> <dd>価格</dd> </dl> <dl> <dt>ペンチ2</dt> <dd class="photo"><img src="" alt="" /></dd> <dd>商品説明あいうえおかきくけこさしすせそ</dd> <dd>価格</dd> </dl> <dl> <dt>ペンチ3</dt> <dd class="photo"><img src="" alt="" /></dd> <dd>商品説明あいうえおかきくけこさしすせそ</dd> <dd>価格</dd> </dl> <hr> </div> </body> </html>
補足
やっと理解できました。ありがとうございます。 ただ１箇所教えていただきたいのですがCSS部分の div.products div+div{border-top:double 3px green;} div.products div hr{ clear:left; visibility:hidden; これは、各section間のボーダーの表示方法ですよね？ <div class="section products">の中の<div class="section">のtopにボーダーを適用するという意味で、hrはclearを設定する為だけの役割で非表示になっているのですか？
- DrFell
- ベストアンサー率55% (305/551)
まず、マークアップの基本がわかっておられないですね。まず、見た目にこだわるのはやめましょう。htmlでは見た目を除外した文章構造でマークアップします。見た目ではなく構造にマークアップするので、<dl class="floatR">などという見た目の配置をクラス名にいれるのは、やめましょう。 ｃｓｓでは見た目にこだわりましょう。役割分担が違うのです。floatをleftとrightに分けなくても、float:leftとするとなりゆきで左に左に左に配置します。2つしか入らないサイズですと、float:leftのみで、左、左、次の行左、左、次の行となります。 詰められるにもかかわらず、空けたい理由はなんですか？その理由をclass名とします。この場合はシリーズでしょうか？ 左に詰め続けていたfloatをいったん解除します。clearというプロパティを使います。floatは左だったので、左を解除します。 clear:left;となります。左右使っていたなら両方を意味する、clear:both;です。両方には左も含まれるので、こちらでもかまいません。 <dl> <dd>あ</dd> <dd>い</dd> <dd>う</dd> <dd class="series">え</dd> <dd>お</dd> <dd>か</dd> <dd>き</dd> <dl> ｃｓｓ dl{padding:0;width:500px;} dd{margin:0;padding:0;float:left;width:250px;} dd.series{clear:left;border-top:dotted 3px #999;} 私的には、シリーズごとにブロックでまとめる方法の方が、文章構造的には自然だと思います。 div.series{margin:0;padding:0;width:500px;clear:left;border-bottom:dotted 3px #999;} .series div{margin:0;float:left;width:250px;} <div class="series"> <div>あ</div> <div>い</div> <div>う</div> </div> <div class="series"> <divえ</div> <div>お</div> <div>か</div> <div>き</div> </div>
お礼
納得です。マークアップは文章構造でcssがデザインなのですね。 最初のマークアップは文章構造を考えていたのですが装飾する時にcssの為のものになってしまっていました。 アドバイスありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そんなマニュアル捨てちゃいましょう。CSSはきちんとできたHTMLに対して有効なもので、リンク先でもないのにidをつけるのはHTMLを煩雑にするだけでメンテナンスもできません。 たとえば次のようにマークアップします。そもそもfloatLなんて文章の構造に無関係なclass名やidはつけないほうがよいです。<font color="red">などと同じレベル 簡単な例を示しておきます。class名やid名をどのようにつければよいかもわかるでしょう。 idのwoodやmetalはリンクの終端として以外使用しません。 これをブラウザで見ると、検索エンジンやテキストブラウザなどがどのように読めるか理解できるでしょう。その上でCSSでスクリーン端末用にデザインしていきますが、そのために余分なidやclassをつけることは基本的にしません。 マニュアルやCSSサイトにそれがあるのは、単にどのように見えるかを説明しやすいがためです。 ＞商品紹介は４シリーズに分けて ＞各間にボーダーをつけて ＞商品ブロックを左右に２列ずつ表示 程度で、以下のマークアップだけで困ることはありません。 <div class="section"> <h2>製品一覧</h2> <div class="products" id="wood"> <dl> <dt>製品名</dt> <dd class="photo"><img src="" alt="" width="" height=""> <dd>商品説明</dd> <dd class="price">\2,000-</dd> </dl> <dl> <dt>製品名</dt> <dd class="photo"><img src="" alt="" width="" height=""> <dd>商品説明</dd> <dd class="price">\2,000-</dd> </dl> ・・・・・・略・・・・・・ </div> <div class="products" id="metal"> <dl> <dt>製品名</dt> <dd class="photo"><img src="" alt="" width="" height=""> <dd>商品説明</dd> <dd class="price">\2,000-</dd> </dl> <dl> <dt>製品名</dt> <dd class="photo"><img src="" alt="" width="" height=""> <dd>商品説明</dd> <dd class="price">\2,000-</dd> </dl> ・・・・・・略・・・・・・ </div> </div> cssで写真と説明文の表示方法？ - HTML - 教えて！goo ( http://okwave.jp/qa/q6709276.html )も参考になるでしょう。
補足
レイアウトがこんな感じなのですが・・・（画像が添付できませんでした。） □ □ ★４シリーズに分けて □ ★商品ブロックが左右 ----- ★間にボーダー ■ □ ----- idやclassを除けばマークアップ方法は同じでした。ただfloatをどう指定していいのかが □ 分かりません？cssでdl{float:left}をすると■が右に寄った状態になります。 ----- 上から２・４・６行目の右側は空きを作りたいのですがclearfixもどこに指定していいの □ □ か分かりません。 □
関連するQ&A
- CSSのfloatの回り込み解除について
現在は、<dt>にfloat:leftを指定して、.clearを作成し、<div class="clear"></div>で解除しています。 ただ最近floatを頻繁に使うようになり、<div class="clear">が多くなってしまいどうにかならないか探しているところです。 私がやりたい事は、<dl>に直接clear属性を付属できないかです。 これができれば、回り込み解除の指定がいらなくなるので、助かるのですが、<dl>に入れると、<dt>のfloatも解除されてしまいます。 下記がサンプルソースです。 CSS： dl {clear:both;} dt {float:left;width:130px;border:solid 1px #CCC;} HTML <dl> <dt>SAMPLE</dt> <dt>SAMPLE</dt> <dt>SAMPLE</dt> </dl> <p>clearを設置しなくても回り込み解除</p> これが理想です。 やはり、clearは別で設置しなければならないんでしょうか？
- ベストアンサー
- HTML
- cssのfloatについて質問があります。
cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。 下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。 初歩的なことかもしれませんが、 どなたかアドバイスいただけると助かります。 宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- cssでのレイアウトの仕方
次の2ファイルを作成しました。 ---index.html <html> <head> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="notice"> <dl> <dt>タイトル</dt> <dd class="noticeDesc"><p>→一覧</p></dd><br /> <dd class="noticeBox"> <ul> <li>リスト１</li> <li>リスト２</li> </ul> </dd> </dl> </div> </body> </html> ---index.htmlここまで ---style.css @charset "utf-8"; .notice { width: 210px; background-color: #ffff00; border-bottom-style: solid; height: 80px; } .notice dl { background-color: #00ffff; border-top-style: solid; } .notice dt { padding-top: 3px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; border-right-style: solid; border-left-style: solid; border-bottom-style: solid; } .notice .noticeBox { margin: 0px; padding: 0px; background-color: #00ffff; border-bottom-style: solid; } .notice .noticeDesc p { width: 60px; position: absolute; top: 3px; right: 5px; line-height: 1; } .notice dd { border-right-style: solid; border-left-style: solid; float: left; width: 204px; margin: 0px; padding: 0px; } ---style.cssここまで ここの掲示板は画像をUPしてもかなり劣化されてしまうのでどれだけ見えるかわかりませんが実際に表示したイメージも添付しました。 これで希望と違うところが2点あります。 ●「→一覧」というのは「タイトル」と同じ箱の中に右詰めで表示したい ●「タイトル」の箱の周りの枠と下の「リスト」が入った箱の隙間は開けたくない 何通りかのやり方があるんだとは思いますが、style.cssの方を修正する方法でどこをどう調整すればよいのか教えてください。 よろしくお願い致します。
- ベストアンサー
- CSS
- 【ＣＳＳ】floatで左右に並べた<div>を下揃えにできますか？
ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、この２つのblockレベル要素は高さが違えば下部が不ぞろいになります。 これは仕方ないとして、上部が不揃いになってもいいので下揃えにできませんでしょうか？ text-align:bottom;やvertical-align:bottom;ではできませんでした。tableを使えば可能でしょうが今回はtableなしという事でお願いいたします。
- ベストアンサー
- HTML
- HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- CSSでfloatがうまくいきません。
CSSでfloatがうまくいきません。 .main{ width: 1000px; } .wrap{ width: 900px; height: 120px; margin-left: 50px; background-color: #ffffff; overflow:auto; } .head_l { width: 300px; height: 120px; float: left; } .head_r { width: 600px; height: 120px; float: left; } <div class="main"> <div class="wrap"> <div class="head_l">ロゴ画像</div> <div class="head_r">項目</div> </div> </div> mainの中にwrapという箱を作りhead_l(ロゴ画像)とhead_r(項目ボタン)という箱を横並びに表示させたいのですが、スクロールバーが出たりします。うまくいきません。どのようにしたらいいでしょうか？
- ベストアンサー
- HTML
- 【css】floatを指定するとはみ出します
ブロック要素をfioatで横並びにした際に、画像とテキストが全体を囲っている要素（親要素）からはみ出すことが多々あります。 その度に高さを指定して回避しているのですが、こちらはその他に回避の方法というのはあるのでしょうか？ それとも、自分の記述がおかしいのでしょうか？ 例えば下記の例です。 こちらは左に画像、右にタイトルとコメントが入ります。 <div class="aaa"> <div class="left"><img src="photo.jpg" width="180" height="120"></div> <div class="right"> <h3 class="title">タイトルです</h3> <div class="comment">コメントです</div> </div> </div> //////////////////////////////////// .aaa{ margin-bottom: 5px; padding-top: 7px; padding-right: 10px; padding-bottom: 7px; padding-left: 10px; clear: both; } .left{ float: left; height: 120px; width: 180px; } .right{ float: left; padding-left: 10px; width: 380px; } .title{ font-size: 90%; line-height: 120%; padding-right: 10px; padding-left: 10px; width: 360px; padding-top: 3px; padding-bottom: 1px; clear: both; } .comment{ font-size: 80%; line-height: 120%; padding: 5px; clear: both; }
- 締切済み
- HTML
- CSSでcopyright(一番下に表示)
CSSで段組デザインのwebを作っているのですが、ページの一番下にcopyrightを表示するクラスを作ったのですが、うまくいきません。 <div class="menu"> ... </div> <div class="main"> .... </div> ページは↑のような構成になっていて(absoluteで位置指定しています)、 .copy { bottom : 10px ; position : absolute ; } のようなクラスを作ったところ、スクロールが必要なページの場合、ページの途中にコピーライトが書かれてしまいます。つまり、ページの今見えている部分の一番下にかかれてしまいます。 ページ全体の一番下に書かれるようにするにはどうしたらよいでしょうか？
- 締切済み
- CSS
- このHTMLとCSSをひとつにするのはどうすれば？
WordpressのAddQuickTagを使うために別れたままでは使うことができません＞＜ https://saruwakakun.com/html-css/reference/box ちなみに１９番のカギカッコを使いたいと思っています。 何卒よろしくお願いいたします！！ HTMLが・・・ <div class="box19"> <p>ここに文章</p> </div> CSSが・・・ .box19 { position: relative; padding:0.25em 1em; } .box19:before,.box19:after{ content:''; width: 20px; height: 30px; position: absolute; display: inline-block; } .box19:before{ border-left: solid 1px #5767bf; border-top: solid 1px #5767bf; top:0; left: 0; } .box19:after{ border-right: solid 1px #5767bf; border-bottom: solid 1px #5767bf; bottom:0; right: 0; } .box19 p { margin: 0; padding: 0; }
- 締切済み
- HTML
- Cssで
次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し２</h2> <h2 class="sample1">見出し２</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }
- 締切済み
- HTML
お礼
classの使い方がなんとなくですが分かりました。こんなに簡略化できるのですね。 今までの考え方がとんでもない間違いだったと気づけました。 長々と質問してしまってすいませんでした。とっても丁寧で分かりやすい説明、ありがとうございました。 早速トライしてみます。