2004年11月29日
ULとスタイルシート
Windows のようなフォルダツリーを HTML で表現するにはどうしたらよいのだろう。
<ul>
<li>マイ ドキュメント</li>
<li>マイ コンピュータ</li>
<ul>
<li>ローカル ディスク (C:)</li>
<ul>
<li>Documents and Settings</li>
<ul>
<li>All Users</li>
<li>ceekz</li>
</ul>
<li>Perl</li>
</ul>
</ul>
</ul>
上記の画像であれば、こんな感じに HTML タグを記述する。ここに適切にスタイルシートを記載して同じように見せたいわけですよ。もちろん、必要に応じて class を設定しますが。
list-style-image を使うくらいしか方法は無いかな。そうすると [+] の部分が再現できないんだけどね。
なんか良い方法ないかなぁ。
ちなみに、どこに使うかというと次期バージョンの RSS Reader に使います。12月3日には、発表題目連絡書を提出しなきゃいかんのだよね。あと Table タグを使えば出来るのだけど、最近はスタイルシートを使って記述したい気分です。
2004年11月29日 21:38 | Programming
トラックバック
コメント
その表現間違ってないか？
HTML4.01のDTDによると、ulの子要素にはliしか入らないよ。
http://www.w3.org/TR/REC-html40/struct/lists.html#edef-UL
それにliの中にulが無いと、そのディレクトリの中味はどのディレクトリに属しているのかを明示していることにはならない。HTMLでは、順番に意味のある語彙は無かったはず。
その画像の通りにHTMLを表現するなら、次のようになるはず。
マイ ドキュメント
マイ コンピュータ
ローカル ディスク (C:)
Documents and Settings
All Users
ceekz
Perl
HTMLじゃなくて、RDFならもっと上手く表現できるんだけど…表現じゃなくて、もしブラウザで表示するのを目的としているなら、こういうことは気にしなくていいけど…
投稿者 TELL : 2004年11月30日 15:08
ああ！
エスケープされた！
投稿者 TELL : 2004年11月30日 15:09
list-style-image と li の背景画像で如何でしょう？
li {
background: url("images") no-repeat top left;
}
みたいな
投稿者 やまざき : 2004年11月30日 19:05
>> TELL くん
本当だ。確かに ul の中に ul を書いちゃダメなんだ。階層ごとに ul で書くのがよさそうだなぁ。面倒だ。
>> やまざき さん
背景にしてしまうと、文字とかぶってしまいそうな気が。後ほど、試してみます。
投稿者 ceekz : 2004年12月01日 01:52
> 背景にしてしまうと、文字とかぶってしまいそうな気が。後ほど、試してみます。
そこは padding で制御します。
ちなみに、list-style-image はテキストと上下位置に差が出て若干ズレているように見えます。
これを回避するテクニックで、background による背景画像指定をする事があります。
投稿者 やまざき : 2004年12月02日 13:44
>> やまざき さん
おー。デザインのノウハウですな。勉強になります。
投稿者 ceekz : 2004年12月03日 18:59
IEでは対応していないけど(ダメ？)、li:before疑似クラスに画像を貼るとか。
投稿者 TELL : 2004年12月04日 03:47
>> TELL くん
シェアの高い IE に対応していないのは厳しい。
投稿者 ceekz : 2004年12月05日 03:38