- ベストアンサー
CSSのfloatについて教えてください
- DreamweaverCS3, CSS1,Winを使用して商品紹介のページを作成中です。商品ブロックを左右に２列ずつ表示しようと考えていますが、floatを使用してもレイアウトが崩れてしまいます。
- 現在、商品紹介を４シリーズに分けて各ブロックにボーダーをつけて表示しようとしています。試した方法としては、各シリーズにクラスを設定してborder-Bottomをつける方法と、商品ブロックを定義リストでマークアップしてfloatを使用する方法を試しましたが、どちらの方法でもレイアウトが崩れてしまいます。
- また、floatではなくabsoluteを使用してもデザインビューでは回りこんで表示することができますが、ブラウザ上では表示されません。この問題に対してアドバイスをいただきたいです。
- みんなの回答 （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もどこに指定していいの □ □ か分かりません。 □
お礼
classの使い方がなんとなくですが分かりました。こんなに簡略化できるのですね。 今までの考え方がとんでもない間違いだったと気づけました。 長々と質問してしまってすいませんでした。とっても丁寧で分かりやすい説明、ありがとうございました。 早速トライしてみます。