2005/Mar/1 Tue | WEB
会話用に使うタグ
今、自分のサイトをCSSサイトに変えるべく、本を読みながら作業しているわけなのですが、自分で発見したことなどを交えて、ここで紹介することができるといいと思っています。
HTMLでは「構造」のみを記すようにW3Cは述べています。スタイル（見栄え）とは切り離してくれってことですね。そこで、スタイルシート（CSS）が出てくるわけです。
現状として、視覚的にわかれば「どうでもいいやん」って思いますよね。でもね、良くないんですって。WEBの世界にもバリアフリーの時代が来たってことなのでしょうね。
例えば、音声だけのブラウザなどがあります。このブラウザでは、HTML上での視覚的表現は、全く意味をなさないものになります。ここでHTMLの構造というのが必要になってくるのです（少なくとも、このブラウザを知ったときにアタシは思った）
ってなワケで、今回は会話時に使うタグと、CSSの設定について説明します。
例えば
------------------
Aさん 「あああああ」
Bさん 「あああああ」
------------------
という内容を書きたいということがあります。
このときは、定義リストの<dl><dt><dd>タグを使用します。
使い方は
<dl>
<dt>Aさん</dt>
<dd>「あああああ」</dd>
<dt>Bさん</dt>
<dd>「あああああ」</dd>
</dl>
と記入します。
しかし、これだと、
--------------------
Aさん
「あああ」
Bさん
「あああ」
--------------------
というカンジの表示になってしまいます。これをスタイルシートで修正するわけです。
え？<dl>タグにはcompact属性があるじゃないか？これは、W3Cでは非推奨属性なので、使わないようにしてるのですね。なので、スタイルシート。
CSSの配置設定に「display」というプロパティがあります。ここの「compact」というのがあるのですが、これがまた、肝心の、一番ユーザーの多いIEやNNでは使えなくって、自分が確認したのでは、operaだけが使えるといった事態。
では、どうするか。ここは「float」という回り込みのスタイルを使うことにします。
dt { float: left;}
dd { margin-left: 40px;}
というスタイルを記述します。
これで、WINDOWS上の大抵のブラウザでも、上記のスタイルで見せることができました。Macでは確認してないのですけど…多分、大丈夫なんじゃないかな？
とりあえず、私のサイトでも使ってみてるので、参考にしてみてください。
現在プチリニュ中のページで、この方法を使っています。ここでのスタイル指定は
dl {
margin: 10px 8px 10px 30px;
width: 360px;
}
dt {
float: left;
}
dd {
margin-left: 40px;
}
としています。
へなちょこな書き方かもしれませんが、参考になれば。
Comments