2005/12/23
某社さんは定義リストも使ってくれません。プロとしてのポリシーなのでしょう。この画像をご覧下さい。何かの日程です。これはその一部なのですが、この場合6項目の説明です。行数にして14行です。では、どんな風に書かれているか引用してみます。
- <table border="0" cellspacing="0" cellpadding="0" class="txs">
- <tbody>
- <tr>
- <td valign="top">■</td>
- <td><strong>その他</strong><br />
- 坐禅体験、念珠製作、法話 等</td>
- </tr>
- <tr height="15">
- <td valign="top" height="15"></td>
- <td nowrap="nowrap" height="15"></td>
- </tr>
- <tr>
- <td valign="top">■</td>
- <td><strong>参加費</strong>(1泊2日)<br />
- 5,000円(宿泊費等、すべて含みます)</td>
- </tr>
- <tr height="15">
- <td valign="top" height="15"></td>
- <td nowrap="nowrap" height="15"></td>
- </tr>
- <tr>
- <td valign="top">■</td>
- <td><strong>宿泊</strong><br />
- 花園会館(ホテル)</td>
- </tr>
- <tr height="15">
- <td valign="top" height="15"></td>
- <td nowrap="nowrap" height="15"></td>
- </tr>
- <tr>
- <td valign="top">■</td>
- <td><strong>対象年齢</strong><br />
- 20〜25歳くらいまでの男女</td>
- </tr>
- <tr height="15">
- <td valign="top" height="15"></td>
- <td nowrap="nowrap" height="15"></td>
- </tr>
- <tr>
- <td valign="top">■</td>
- <td><strong>申込〆切</strong><br />
- 1月15日(日)※人数に限りがあります</td>
- </tr>
- <tr height="15">
- <td valign="top" height="15"></td>
- <td nowrap="nowrap" height="15"></td>
- </tr>
- <tr>
- <td valign="top">■</td>
- <td><strong>申し込み問い合わせ先</strong><br />
- 妙心寺派宗務本所 花園会本部<br />
- 〒616-8035 京都市右京区花園妙心寺町64<br />
- Tel. 075-463-3121</td>
- </tr>
- </tbody>
- </table>
と書いてあります。56行にも亘っていてなかなか苦心の跡が見られます。<td>ごとにalign="top"やnowrap="nowrap" height="15"等が書き込まれています。「height="15"」の書かれているところには表示すべき文字がありません。文字のある行の間のスペースを確保するためのものの用なのです。文字列がないのにもかかわらず、「nowrap="nowrap"」を書かれています。せめてcssを使いtableにclassを設定しているのであれば、
このほかにも「white-space:nowrap」などを書き加えると良いとは思うのですが、これはまた別の話。定義リストを使って書いてみます。
先程の画像とほぼ似たものが出来上がりました。中身は以下のようになっています。
16行に収まりました。表示すべき行数に<dl>と</dl>が加わっただけです。削除する場合は、単に<dt>と<dd>の行を削除すればよく、加える場合は、説明が必要な文章に<dt>を付け、説明文字列に<dd>を付け加えるだけです。
レイアウトの大枠としてのテーブルの中に入れれば、それで良いはずなのです。
そしてスタイルシートに
と書くだけです。「dl」というのは多分「Definition list」(そのまんまじゃ)の略。ここにはかいてありませんが適当なマージン・パディング・背景色などを設定すればこういったものにテーブルを使い複雑怪奇なソースをかく必要はありません。この場合<dl>(ol,ulもあり?)等で記述すべきであると思います。
テーブルをレイアウトに使う手法は確かに強力で、使ってみたくなるのでしょう。
そのすべてを否定するわけではありませんが、上記に見えるように、場合によっては壮大な無駄、ないしは見当違いと言うことになりかねません。語句の一覧とその詳細といった場合は、そのことをタグによって明示すべきなのでしょう。そうしていけばMS-IEなどのブラウザが「仮に」cssを解釈できなくとも、それらしくレイアウトしてくれます。表の扱えないブラウザでも同様なのです。単に文字の配置や色または大きさなどで示しても人以外には(正確に言えば「目視以外には」)何の意味もありません。
また上記の場合では、一度スタイルを設定しておけば必要なとき同じスタイルを適用できます。個別にデザインを変更したい場合でも、ほかに影響を与えず変える手段がcss自体の仕組みで提供されています。(HTML本体を殆ど変更せずに可能になる)
文書の構造と言う点では、
での「■ 」は不必要と思います。その点でも擬似要素「before」を使って
とすることによって、
と書くことが出来ます。表示は「■ 参加費(1泊2日)」とされます。今のところMS-IEでは未サポートですが、来るべきMS-IE7ではサポートされるとアナウンスされています。現状でも、ボーダーを設定したり、背景画像を設定したりすればソースから「■」を除くことは可能です。しかしそう云ったことは全く瑣末なことでしょう。
私たちシロートは、HTMLの書式に合っていないからと言って、そう大きく間違っていなければ、「ごめんね、どこだっけ」「判った、直しておくね」でいいと思います。しかしプロを自称し、有償で制作しているのであれば、それなりのスキルをクライアントが期待するのは、そう理不尽な話では無いと思います。少なくとも見栄えがよくても、それでは「web デザイナ」ではあっても「corder」では無いと思うのです。
いや、それとも、「コーダー」なんていうのは「デザイナ」の指示通り見える程度のコーディングすればいいのよ、と言う世界なのでしょうか。
HTMLの記述の仕方には様々な方法があり、これといって決まった形式が無いのが現状だと思います。
仮に「様々な方法があり」であっても、「すべてが規定されていない(一部が駄目だからすべて駄目)」または「一部でも不明確な点があるから全く従わなくてもいい、だって見えるじゃん」ではないはずです。HTMLの先達のなした結果すべてが、まだどうにでも解釈できるものばかりではないはずです。
ご意見・ご感想・愛の告白・懺悔等ございましたら掲示板に書込を。もちろん匿名可能です。