初心者です。こんな時のcssの記述方法を教えて下さい。(添付データ参照)
一つのボックス内にp要素ばかりがあるのですがこんなときは、無理に見出しや定義リストでマークアップした方が良いのでしょうか?
それとも、p要素に一つずつクラス設定をした方が良いのでしょうか?
全体をdiv class="goodsBoix"でくくり、タイトルは見出し<h2>で設定しました。
次に商品写真<p>にid=mainImgをつけて左にフロートしました。
右側の説明文の高さを固定して(説明文が長いのや短いのがあるので)、横並びになったイラストと金額を説明文の下側に並べたいのですがどうしたらよいのでしょうか?
No.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 … )
そして、よいサイトを見つけること
例)1と2の間辺りからはじめるCSS講座 ( http://www6.plala.or.jp/go_west/beginner/css/ )
CSS Dencitie ( http://www6.plala.or.jp/go_west/nextcss/ )
遅くなってすみませんでした。
教えて頂いたサイトをみて自分なりに勉強してみたのですが、まだCSS1も理解していないのでCSS2がよく分かりませんでした。時間をかけて勉強してみます。
丁寧に教えていただいて本当にありがとうございました。
No.3
- 回答日時:
たぶん、HTMLのマークアップは想像されていたものより、ずっとシンプルなことに気がつかれたでしょう。
もちろん説明や金額の書かれたliやddに、わかりやすいようにexplainとかpriceのようにclass名をつけてもかまいません(というより普通はつける)が、それすら必要ないのです。HTMLは後日のメンテナンスのため(同時に検索エンジンやユーザービリティのため)にきちんとマークアップしておきます。
No.2
- 回答日時:
先のHTMLに、簡単なCSSを書いてみました。
HTMLは商品説明が二重に書いていたので修正してあります。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です)
No.1
- 回答日時:
>こんなときは、無理に見出しや定義リストでマークアップした方が良いのでしょうか?
ここは根本的な理解が間違っています。とても重要ですので、しっかり理解しておきましょう。
HTMLは、Hyper Text MARKUP 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/ )のようなテキストブラウザで表示させると、検索エンジンや読み上げブラウザからどのように解釈されるかよくわかります。
そのうえで、プレゼンテーション(見栄え)をCSSで設定していきます。
不必要なclass名やデザイン由来のclass名ではなく、その要素がどのよう意味を持っているかを後で理解できるようにマークアップするとよいでしょう。なぜなら、今は右に配置していても先で左に配置するかもしれないしね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- JavaScript 指定したパスが現URLに含まれていたら特定要素を削除するJavascriptのコードを教えてください 2 2023/04/27 17:58
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- その他(プログラミング・Web制作) pythonにおける単方向リストの実装について 4 2022/07/13 12:34
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS リストの並べ替え 1 2022/09/13 15:27
- Excel(エクセル) エクセルのグラフに上下限値の横棒を表示させたい 5 2022/12/12 11:09
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- Excel(エクセル) エクセルについて教えてください。 2 2023/06/14 11:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
「・」(黒い点)を非表示にした...
-
リストマーカーをボックス内に...
-
liタグの中に<p>タグやら<dl>を...
-
display:table;を多段表示させたい
-
画像横のテキストをセンターに...
-
ol要素の番号とリスト項目の離...
-
HTMLで組織図を作成する方法
-
<ul><li></li></ul>にするメリ...
-
リストを2つに分割して、それぞ...
-
<ul>と<li>リストマークを消す...
-
親ページ側からインラインフレ...
-
html <li>の中の文字一部に色を...
-
HTMLで画像を3つ並べる方法
-
複数行にまたがる括弧を表示し...
-
レスポンシブWebデザインでリン...
-
ulとliで囲った文字の一部を変...
-
<ul>~</ul>が二つ続くと間に改...
-
番号付きリスト(<Ol><Li>・・...
-
横並びのボタンの背景を片方だ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
レスポンシブWebデザインでリン...
-
<table>の高さ固定。情報増加時...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
ページを開いているときのリン...
-
html <ul></ul>の並びで一行空...
-
html/cssの、navを2段にする...
-
HTML5のfooterに見出しを付けて...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報