XHTML1(以降）の記述方法で

質問

HTML勉強中でこれまでなんでもかんでもテーブルでレイアウトを行っていたものをＣＳＳ表記に変更しております。

下記のような事例はみどういうタグで表記するべきだと思われますか。
例１
　　機種名　　ＸＸＸＸ
　　ＣＰＵ　　ＸＸＸＸ
　　メモリ　　ＸＸＸＸ
例２
　　メニュー１　09/XX/XX (更新日を表記）
　　メニュー２　09/XX/XX

例１は、本来のテーブルの意味を持つということでTABLEを利用してもよいのではと考えております。

例２は
<UL>
<li class="menu">xx</li>
<li class="update">xx</li>
</ul>
とBODY内で表記し、スタイル表記で逃げる（？）方法を考えたのですが、いかがなものでしょうか。

回答No.4

abril · ベストアンサー

> <li>メニュー<span class="update"></li>の場合の.update はliのスタイルは適用されないのですよね。

されません。

> HTML表記上に<タグ>が入れ子になった場合は、上位のタグは適用されないという認識でいいのでしょうか。

本件で、<span class="update">～</span>に適用されたスタイルが親要素のliに適用されないのは、「CSSでのセレクタの記述がそうなっているから」です。
ul.whatsnew li span.update {～}というセレクタの意味は、「”class属性でwhatsnewという値が与えられた”ulの子要素であるliの子要素である”class属性でupdateという値が与えられた”spanでマークアップされた箇所にのみこのスタイルを適用する」です。<span class="update">～</span>の親要素の<li>～</li>はその条件に合致していないのでスタイルが適用されないのです。
この様に、セレクタで子要素【B】にしか適用されていないスタイルは、当然の結果として親要素【A】には適用されません。
子要素【B】が更に子要素【C】を持つ場合には、【B】で設定されたスタイルのプロパティの内、”継承されるもののみ”継承されます。

> ブロック要素、インライン要素の類でしょうか。

これは全く別の問題ですね。本件とは関係ないです。

> すいませんが参考になるページがあれば教えていただきたいのですが・・・。

「参考になる」というのはCSSのセレクタに関する事、と受け取ってよろしいでしょうか？であれば、下記などはわかりやすいかと思います。
【参考】http://w3g.jp/css/guide/

お礼

CSSの知識。まだ不十分なので教えていただいたところを見て研究させていただきたいと思います。

＞【B】で設定されたスタイルのプロパティの内、”継承されるもののみ”継承されます。
この存在を忘れていました。
継承されるもの、されないものがあるんですよね。
見直します。

ありがとうございました。

回答No.3

abril

No.2です。
さっきまとめて書くつもりで途中で投稿してしまったので分割投稿で申し訳有りませんが、No.1様のマークアップをそのまま活かした場合の一例です。

【HTML】
<ul class="whatsnew">
<li>ほげほげほげほげ<span class="update"> 09/XX/XX</span></li>
<li>ほげほげ<span class="update"> 09/XX/XX</span></li>
<li>ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ<span class="update"> 09/XX/XX</span></li>
<li>ほげほげほげほげほげ<span class="update"> 09/XX/XX</span></li>
</ul>

【CSS】
ul.whatsnew {
width: 400px;
list-style: none;
margin: 0;
padding: 0;
}
ul.whatsnew li {
position: relative;
margin: 0 0 1em 0;
padding: 0 6em 0 0;
}
ul.whatsnew li span.update {
position: absolute;
top: 0;
right: 0;
}

<span class="update">～</span>の内容が常に「更新日付」yy/mm/ddの形式であるなら、ある程度の以上の長さにはならない事になります。この場合、1バイト文字が2つで約1emの大きさと考え、更に少し余裕を持たせて更新日付のテキストを描画する領域に6emほどを確保しておけば「メニュー…」の内容が長くても（仮に複数行に渡っても）と重なったりくっつかずに済みます。また、日付という性質上、右寄せでも良いと考えました。
liにpadding-right（"padding: 0 6em 0 0;"）で右側に「メニュー…」のテキストが描画されない領域を作ります。
span.updateの親要素となるliに"position: relative;"を設定した上で、span.updateの描画位置を（親要素liを基点とした）絶対位置で上端・右端から、と指定します。その場合、親要素liに指定されたpadding-rightは無視されますので、左右方向の描画位置もliの右端からになります。

お礼

分かりやすい説明ありがとうございました。

paddingの互換性がいまいち分からず使いきれていなかったのですが、こんな方法があるのですね。

例２の場合は論理的にも<li>を1つの意味で使う方がいいですね。
理解できました。

追加で申し訳ないのですが、
<li>メニュー<span class="update"></li>
の場合の.update はliのスタイルは適用されないのですよね。
HTML表記上に<タグ>が入れ子になった場合は、上位のタグは適用されないという認識でいいのでしょうか。
ブロック要素、インライン要素の類でしょうか。
すいませんが参考になるページがあれば教えていただきたいのですが・・・。
わがまま申してすいません。

回答No.2

abril

【例1】は私もtableかdlが適切かと思います。
【例2】ですが、

> <UL>
> <li class="menu">xx</li>
> <li class="update">xx</li>
> </ul>

確かにスタイルはclassセレクタでどうとでもできますが、マークアップが論理的に適切ではないと思います。
同一のul内の子要素liはliどうしが「同格」の内容をもったアイテムであるのが相応しいです。上記のマークアップではスタイルを外した状態で見てみると、

・メニュー１
・09/XX/XX
・メニュー２
・09/XX/XX

となるわけですから、内容に沿った論理構造になっていません。
ですので、ulを使用するならNo.1様のマークアップの方が適切だと思います（メニューと更新日付のどちらをspanでマークアップするか、あるいはどちらもspanを適用するか、あるいはspanではない要素で入れ子にするか、はケースバイケースですが、基本的な考え方としては、という事です）。

> 今回メニューの文字数が異なることもあり、レイアウトをそろえるためにliを使用しました。
> レイアウトをそろえるために他の方法はありますでしょうか？

No.1様のマークアップでも、メニューの文字幅が異なっていても、更新日付の表示の開始位置を揃える事は可能です。
子要素のspanをblock要素化して幅を決め、floatさせるなりして。
＃個人的には【例2】もdlでマークアップしてもまあ許されるかな…と思います。

回答No.1

salonpath

表示例を挙げてるんだから、ソース側にもテキストを反映させたらもっとわかりやすくなったんじゃないかなぁと思いました。
例2は
<UL>
<li class="menu">メニュー１</li>
<li class="update">09/XX/XX (更新日を表記）</li>
</ul>
て意味ですか？

個人的な書き方だと
例1は、tableかdl,dt,dd
例2は、
<ul>
<li>メニュー１<span class="update">　09/XX/XX (更新日を表記）</span></li>
<li>メニュー２<span class="update">　09/XX/XX (更新日を表記）</span></li>
</ul>

.update{
margin-left:1em;
}

お礼

例の書き方、不十分でした。すいません。

例２。確かにそういった方法ありますね。忘れていました。

今回メニューの文字数が異なることもあり、レイアウトをそろえるためにliを使用しました。
レイアウトをそろえるために他の方法はありますでしょうか？