てんぽ: XHTMLの見本を作る

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

XHTMLの見本を作る

2005年07月18日(月)

遅くなりましたが、Project.Rに参加しようと思います。

妥当なマークアップの仕方には複数の方法があると思いますが、その妥当なものの中から最良のひとつ(と思われるもの)を考えようという趣旨だと捉えました。

たとえば、比較的簡単に最良のマークアップ方法が決まると思われるのがコメントの投稿フォームです(と思ってたけど、実はそうでもないかもしれない。が、気にせず続けます)。 よく見かけるのは次のようなマークアップですが、どれが最も良いでしょうか。

  • form要素以下をp要素とinput要素、br要素でマークアップ
  • table要素を用いて整形する
  • dl要素用い、さらにlabel要素やfieldset要素で関連付ける

この中で選ぶとすれば3番目が良さそうです。文書構造の点でもCSSでレイアウトを行うときの自由度でもこれが最も優れています。

一方、簡単には決められないものもあります。何度も悩んだのがメニュー部分(サイドバー)のマークアップをどうするか。とりあえず妥当なマークアップとして思いつくのは以下の3つ。

1. 見出し+ul要素
<h3>月別アーカイブ</h3>
<ul>
<li>2005年7月</li>
<li>2005年6月</li>
<li>2005年5月</li>
</ul>

シンプルでわかりやすい。hn要素とul要素をdivでまとめることも(文法上)できる。

2. dt要素+dd要素連発
<dt>月別アーカイブ</dt>
<dd>2005年7月</dd>
<dd>2005年6月</dd>
<dd>2005年5月</dd>

dl要素がコンテナボックスを設置するのでdiv要素一切なしで2カラムレイアウトが可能(参考:テンプレート変更 - Primary Planet / ADP: div要素なしレイアウト)。

3. dt要素+dd要素内にul要素
<dt>月別アーカイブ</dt>
<dd>
<ul>
<li>2005年7月</li>
<li>2005年6月</li>
<li>2005年5月</li>
</ul>
</dd>

要素が多いぶんCSSでのレイアウトの自由度が高い。

他にもいろいろ悩む点は多いです。

  • コメント、トラックバック部分(dl要素、hn要素+div要素など)
  • 投稿日時やカテゴリ等の各エントリーの情報部分(p要素、ul要素、dl要素など)
  • divの使い方
  • id,class名

Project.Rではこのあたりのことについて勉強したいと思います。

#31
カテゴリ:未分類

同じカテゴリの記事

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/31-75c91a99

<<Web標準の教科書 | バラエティギフト>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。