- ベストアンサー
cssで写真と説明文の表示方法？
初心者です。こんな時のcssの記述方法を教えて下さい。（添付データ参照） 一つのボックス内にp要素ばかりがあるのですがこんなときは、無理に見出しや定義リストでマークアップした方が良いのでしょうか? それとも、p要素に一つずつクラス設定をした方が良いのでしょうか？ 全体をdiv class="goodsBoix"でくくり、タイトルは見出し<h2>で設定しました。 次に商品写真<p>にid=mainImgをつけて左にフロートしました。 右側の説明文の高さを固定して（説明文が長いのや短いのがあるので）、横並びになったイラストと金額を説明文の下側に並べたいのですがどうしたらよいのでしょうか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
Transitionalはstrictを含みますからよいとして、CSS1とCSS2ではいくつか重要な点で異なります。 特に 詳細度で優先順位がきまり、セレクタに詳細度が決まっていること [*]全称セレクタ、[ ]子供セレクタ、[+]隣接セレクタ、[=~]属性セレクタなどが追加 borderの細かい設定 positionの導入 など、希望の配置はCSS1では難しい上に、HTMLをデザインのために書くという本来の目的を外れた書き方をしなければなりません。 CSS2を学ばれることをお勧めします。 示したCSSは、CSS2のこれらの機能を使っていますのでそれを簡単に解説します。 そのまえに、可能な限りプロパティの設定は一度ですむようにセレクタが複数書いてあります。,で区切ってある部分です。 それと、CSSを考えるとき常に考えないとなせないのが詳細度です。CSS2では次のように定められています。 (一意セレクタidの数) x 100 + (属性,クラス,擬似クラス) x 10 + (要素の数) x 1 ◎はCSS2以降、★は一部CSS1、ただし使い方は違う。 ◎全称セレクタ * ★タイプセレクタ 要素名 h1とかpとか ★子孫セレクタ div pのように半角スペースでつなぐ ◎子セレクタ >直接の子供 ◎隣接セレクタ +兄弟関係 p+pは、その前にpがあるpに適用される。 ◎属性セレクタ 属性および属性値で指定する。クラスやidと同じ ◎img[alt] 属性にaltをもつimg ◎img[alt=test] ◎table[summary~=1] ◎p|=lang ★クラスセレクタ CSS1とは使い方が違う!! ★一意セレクタ ◎疑似要素 :first-line :first-letter :before :after ◎疑似クラス :first-child :link :visited :focus :hover:active そのうえで div.productsList dl dd ul li+li+li, div.productsList dl dd+dd+dd{ は、「productsListをクラス名にもつdiv要素の子孫のdlの子孫のulの子孫のなかで兄に二つのliをもつもの」と「productsListをクラス名にもつdiv要素の子孫のdlのこどものddのうち兄に二つのddをもつもの」という意味 div.productsList ？ |-- dl ？ |--dd ？ |--ul ？ |--li |--li |--li← ここより下のli |--li←ここはli+li+li+li class名を使わず、あるいはあっても、なぜこのような書き方をするかというと、たとえばpriceというクラス名だと、 ★サイトの他の部分で同じクラス名が使われている可能性がある。 ★他の要素や他の部分でpriceというクラス名が使える。 ★excelから出力したCSVファイルから、HTMLを作るとき自動化しやすい。 などです。 CSS2にしろ、ブックマークに仕様書をいれておくこと。どんな参考書よりも正確で的確です。 REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html#toc ) そして、よいサイトを見つけること 例）1と2の間辺りからはじめるCSS講座 ( http://www6.plala.or.jp/go_west/beginner/css/ ) CSS Dencitie ( http://www6.plala.or.jp/go_west/nextcss/ )
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
たぶん、HTMLのマークアップは想像されていたものより、ずっとシンプルなことに気がつかれたでしょう。もちろん説明や金額の書かれたliやddに、わかりやすいようにexplainとかpriceのようにclass名をつけてもかまいません(というより普通はつける)が、それすら必要ないのです。 HTMLは後日のメンテナンスのため（同時に検索エンジンやユーザービリティのため）にきちんとマークアップしておきます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
先のHTMLに、簡単なCSSを書いてみました。ＨＴＭＬは商品説明が二重に書いていたので修正してあります。 HTMLはHTML4.01strictでCSSはCSS2です。 DOMが dl |-dt |-dd |-dd |-dd dl |-dt |-dd |-ul |--li |--li でもまったく同じ外見になるはずです。マークアップは外見のためにするのではないことがお分かりいただけると思います。 ★リキッドスタイルでウィンドウ幅にかかわらず商品説明ブロックが適当な数並びます。 なお、写真はfloatさせていません(absoluteで配置しています)。floatは文中の画像の周囲に文字を回りこませるためのもので、ブロックを並べるものではありません。どういう構造かわかるように枠線や背景色が設定してあります。 ★以下のソースを利用するときは全角スペースをタブに変換してください。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ <!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"> <!-- div.productsList{ width:90%;margin-right:auto;margin-left:auto; padding:5px; margin-bottom:10px; background-color:rgb(200,255,255);/*確認のため*/ } div.productsList hr{clear:both;visibility:hidden;} div.productsList dl, div.productsList dt, div.productsList ul, div.productsList dd, div.productsList li{ display:block; list-style:none; padding:0;margin:0; border:solid black 1px;/*確認のため*/ } div.productsList ul{ border:none; } div.productsList dl{ width:270px; height:200px; margin-left:5px; float:left; position:relative; background-color:rgb(200,255,0);/*確認のため*/ } div.productsList dt{ width:268px; line-height:20px; } div.productsList dl dd{ margin-left:150px; text-indent:1em; font-size:0.9em; } div.productsList *.photo{ position:absolute; top:24px;left:0px; width:140px;height:160px; margin-left:5px; background-color:white;/*確認のため*/ } div.productsList dl dd ul li+li+li, div.productsList dl dd+dd+dd{ text-indent:0em; position:absolute; bottom:10px; left:150px; width:54px; font-size:0.7em; background-color:rgb(255,200,200);/*確認のため*/ margin-left:0px; } div.productsList dl dd li+li+li+li, div.productsList dl dd+dd+dd+dd{ left:215px; } --> </style> </head> <body> <h1>商品一覧</h1> <div class="productsList"> <dl> <dt>商品タイトル(1)</dt> <dd> <ul> <li>商品説明(1)なんたらかんたら、なんたらかんたら、なかたらかんたら、</li> <li class="photo">写真(1)</li> <li>イラスト(1)</li> <li>金額(1)</li> </ul> </dd> </dl> <dl> <dt>商品タイトル(2)</dt> <dd> <ul> <li>商品説明(2)なんたらかんたら、なんたらかんたら、なかたらかんたら、</li> <li class="photo">写真(2)</li> <li>イラスト(2)</li> <li>金額(2)</li> </ul> </dd> </dl> <dl> <dt>商品タイトル(3)</dt> <dd> <ul> <li>商品説明(3)なんたらかんたら、なんたらかんたら、なかたらかんたら、</li> <li class="photo">写真(3)</li> <li>イラスト(3)</li> <li>金額(3)</li> </ul> </dd> </dl> <hr> </div> <div class="productsList"> <dl> <dt>商品タイトル(4)</dt> <dd class="photo">写真(4)</dd> <dd>商品説明(4)なんたらかんたら、なんたらかんたら、なかたらかんたら、</dd> <dd>イラスト(4)</dd> <dd>金額(4)</dd> </dl> <dl> <dt>商品タイトル(5)</dt> <dd class="photo">写真(5)</dd> <dd>商品説明(5)なんたらかんたら、なんたらかんたら、なかたらかんたら、</dd> <dd>イラスト(5)</dd> <dd>金額(5)</dd> </dl> <hr> </div> </body> </html>
補足
親切丁寧にありがとうございます。 参考書を見ながら独学中のため、マークアップの解釈が間違っていました。CSSで指定する為に都合よく見出しやリストの設定をしていました。 教えて頂いた通り定義リストでマークアップしてみたのですが、 dl |-dt 商品タイトル |-dd 商品写真 |-dd 商品説明 |-dd イラスト |-dd 金額 こうなった場合にddにidやclassを設定しないと別々に設定したいのにすべてのddに適用されてしまうのですがどうしたらよいのでしょうか？ 申し訳ないのですがcss2が分からないので、css1で教えて下さい。(htmlは1.0Transitionalです)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞こんなときは、無理に見出しや定義リストでマークアップした方が良いのでしょうか? ここは根本的な理解が間違っています。とても重要ですので、しっかり理解しておきましょう。 ＨＴＭＬは、Hyper Text ＭＡＲＫＵＰ Languageの略で、文字通りある文書の中で、それを構成する(段落,見出し,引用,リスト,表などの)要素(element)をマークアップするためのものです。 具体的にいうとそのデータでしたら、 定義リストを使用して【タブでのインデントは視認性を上げるため全角スペースに変換してあります。】 <h1>商品一覧</h1> <div class="productsList"> <dl> <dt>商品タイトル(1)</dt> <dd>商品説明(1) <ul> <li>商品説明(1)</li> <li class="photo">写真(1)</li> <li>イラスト(1)</li> <li>金額(1</li> </ul> </dd> </dl> <dl> <dt>商品タイトル(2)</dt> <dd>商品説明(2) <ul> <li>商品説明(2)</li> <li class="photo">写真(2)</li> <li>イラスト(2)</li> <li>金額(1</li> </ul> </dd> </dl> </div> あるいは、 <div class="productList"> <dl> <dt>商品タイトル(1)</dt> <dd class="photo">写真(1)</dd> <dd>商品説明(1)</dd> <dd>イラスト(1)</dd> <dd>金額(1)</dd> </dl> <dl> <dt>商品タイトル(2)</dt> <dd class="photo">写真(2)</dd> <dd>商品説明(2)</dd> <dd>イラスト(2)</dd> <dd>金額(2)</dd> </dl> </div> のようにマークアップします。Lynx( http://sourceforge.jp/projects/lynx-win32-pata/ )のようなテキストブラウザで表示させると、検索エンジンや読み上げブラウザからどのように解釈されるかよくわかります。 そのうえで、プレゼンテーション(見栄え)をＣＳＳで設定していきます。 不必要なclass名やデザイン由来のclass名ではなく、その要素がどのよう意味を持っているかを後で理解できるようにマークアップするとよいでしょう。なぜなら、今は右に配置していても先で左に配置するかもしれないしね。
お礼
遅くなってすみませんでした。 教えて頂いたサイトをみて自分なりに勉強してみたのですが、まだCSS1も理解していないのでCSS2がよく分かりませんでした。時間をかけて勉強してみます。 丁寧に教えていただいて本当にありがとうございました。