人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

スタイルシートのulタグで、下のようなメニュー
を作るにはどうしたらいいんでしょうか?

(一番下だけ└で、それまでは├)

■ 目次
├はじめに
├研究の目的
├研究の方法
├結果の提示と考察
└まとめ

●質問者: sun-chan
●カテゴリ:ウェブ制作
✍キーワード:UL スタイルシート タグ 目的 研究
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● okuryu
●35ポイント

「├」や「└」は文書構造としては必要ないと思うので画像化し li 要素などの背景画像に指定するというのはどうでしょうか。

仮に「├」は list.gif で「└」は list_end.gif とします。

HTML

<h2>目次</h2>
<ul>
 <li>はじめに</li>
 <li>研究の目的</li>
 <li>研究の方法</li>
 <li>結果の提示と考察</li>
 <li class="end">まとめ</li>
</ul>

CSS

li {
 list-style-type: none;
 margin: 0 0 0 20px;
 background-image: url("list.gif");
 background-repeat: no-repeat;
}

li.end {
 background-image: url("list_end.gif");
}

http://www.hatena.ne.jp/

◎質問者からの返答

ありがとうございます。

画像にしてしまうという方法もあるのですね。

サイズを間違えないようにしないといけないのが

難しそうですが、これなら私にでもできそうです。


2 ● kn1967
●35ポイント

http://www.tohoho-web.com/css/reference.htm

CSS2では以下のような方法が可能なのだけど、ブラウザの実装状況はまだ追いついていないですね。

IE6 は×

FireFox2.0 は○

IE7、Opera等は未確認

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="ja">
<head>
 <meta http-equiv="content-type" content="text/html; charset=shift_jis">
 <meta http-equiv="content-style-type" content="text/css">
 <title>マーカー</title>
 <style>
 li { list-style-type: none; }
 li:before { display: marker; content: "├"; }
 li.end:before { display: marker; content: "└"; }
 </style>
</head>
<body>
 <ul>
 <li>あ</li>
 <li>い</li>
 <li>う</li>
 <li>え</li>
 <li class="end">お</li>
 </ul>
</body>
</html>
◎質問者からの返答

ありがとうございます。

そういう方法もあるんですね。

ブラウザの実装状況が追いついてきたら

便利そう…

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ