CSSで商品データをボックス形式で羅列する方法とは？

2012/12/10 11:51

このQ&Aのポイント

CSSを使って商品データをボックス形式で羅列する方法を知りたいです。現在はfloat: left;を使用してボックスを並べていますが、その結果、内容と金額の位置がバラバラで、ブロックの高さを固定することができません。
float:とposition: absolute;の組み合わせでは、高さを自動にすることはできませんか？内容の量によってブロックの高さが異なるため、統一された高さにする方法を知りたいです。
また、ボックス形式の羅列にはfloat以外の方法があるのでしょうか？float以外の方法でボックスを並べることで、高さの統一と位置の調整ができるのか知りたいです。

ENTRE
お礼率0% (17/2526)

CSS
回答数3
ありがとう数0

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/12/12 17:57 回答No.3

No.1です。　極めて簡単なサンプルを上げておきます。・ウィンドウ幅は480px以上あれば、スクロールなしで利用できますのでスマホのような小さな画面でも利用できます。幅広ディスプレイの場合は800px幅まで広がります。・価格はabsoluteで配置してあります。　親になる直近のstaticでないコンテナブロックの高さを参照しています。・floatと異なり高さの低いデータがあるとに回りこむことはありません。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# )でチェック済みのウェブ標準(HTML4.01strict+CSS2.1)です。 ★Firefox,GoogleChrome,Opera,safari,IE8以降で同じになるはずです。　IE7以前に対応させる場合はスタイルシートを違うものを読み込むように指定してください。 ★商品リストはシンプルな <ol class="productList"> 　　<li>商品名　　　　\1,200- 　　　　ここには、説明が入ります。 　　</li> 　　<li>商品名　　　　\12,600- 　　　　ここには、長い説明が入ります。 　　　　説明 　　</li> </ol> でマークアップしてあります。価格は最初のに入ると想定してあります。なお、タブは＿に置換してあるので必ずタブに戻してください。 <!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">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿このページでは・・・・ ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<ol class="productList"> ＿＿＿<li>商品名＿＿＿＿\1,200- ＿＿＿＿ここには、説明が入ります。 ＿＿＿</li> ＿＿＿<li>商品名＿＿＿＿\12,600- ＿＿＿＿ここには、長い説明が入ります。 ＿＿＿＿説明 ＿＿＿</li> ＿＿＿<li>商品名＿＿＿＿\1,800- ＿＿＿＿ここには、とても長い説明が入ります。説明・説明・説明・説明・説明・説明・説明・説明・説明 ＿＿＿＿説明 ＿＿＿</li> ＿＿＿<li>商品名＿＿＿＿\500- ＿＿＿＿ここには、とても長い説明が入ります。説明・説明・説明・説明・説明・説明・説明・説明・説明 ＿＿＿＿説明 ＿＿＿</li> ＿＿＿<li>商品名＿＿＿＿\500- ＿＿＿＿ここには、長い説明が入ります。説明・説明・説明・説明・説明 ＿＿＿＿説明 ＿＿＿</li> ＿＿＿<li>商品名＿＿＿＿\500- ＿＿＿＿ここには、長い説明が入ります。説明・説明・説明・説明・説明・説明・説明・説明・説明 ＿＿＿＿説明 ＿＿＿</li> ＿＿＿<li>商品名＿＿＿＿\1,800- ＿＿＿＿ここには、長い説明が入ります。説明・説明・説明・説明・説明 ＿＿＿＿説明 ＿＿＿</li> ＿＿＿<li>商品名＿＿＿＿\12,600- ＿＿＿＿ここには、長い説明が入ります。 ＿＿＿＿説明 ＿＿＿</li> ＿＿＿<li>商品名＿＿＿＿\1,800- ＿＿＿＿ここには、とても長い説明が入ります。説明・説明・説明・説明・説明・説明・説明・説明・説明 ＿＿＿＿説明 ＿＿＿</li> ＿＿＿<li>商品名＿＿＿＿\500- ＿＿＿＿ここには、とても長い説明が入ります。説明・説明・説明・説明・説明・説明・説明・説明・説明 ＿＿＿＿説明 ＿＿＿</li> ＿＿</ol> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

その他の回答 (2)

ixkaito
ベストアンサー率69% (18/26)

2012/12/12 12:08 回答No.2

NO.1さんの補足として、ボックス内でposition:absolute;にした要素の幅と高さは、ボックスの高さに加えられません。（ボックスが広げられませんと言った方が良いかもしれません）例えばボックスの中身を全部absoluteにすると、ボックスにwidth、height、paddingを指定していないと、どちらも0になってしまいます。そもそも今回のケースでabsoluteにする必要性をあまり感じません。普通にh1～6、pタグなどで入れたらダメでしょうか？

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/12/10 15:41 回答No.1

floatないし、display:inline-blockを使います。　floatが良いのはウィンドウ幅によって並ぶ数が変化するので、様々なディスプレイに対応できる利点があります。display:inline-blockでは、固定幅の場合は、コマ一つ一つのサイズが多少異なっても均等配置できることです。ただし、inline-blockに対応していない古いブラウザには使えません。　それと、コマ内の配置は別の問題で、基本的には内部でabsoluteさせても構いません。その場合長さが変わるデーターはstaticにするのが良いでしょう。　またコマの高さにはmax-heightで制限を加えて、oveflow-y:auto;ではみ出した場合にのみスクロールできるようにすると良いでしょう。