- ベストアンサー
HTMLタグについて質問です。
HTMLタグについて質問です。 FC2ブログを使用しているのですが、記事内やフリーエリアのプラグインなどでリンクをツリー表示できるようにしたいのです。 が、HTMLタグに関しては全くの無知なもので、どうしていいやらさっぱり。 どんなタグを打てばいいかお教えください。 よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。 やっぱり「ちなみに」の方でしたか。 他の方法もあると思いますが、 とりあえず以下を参考になさってください。 ・<meta http-equiv="Content-Script-Type" content="text/javascript"> が<head>内に無かったら追加してください。 ・「tree-menu」「Tree」「list1/2」は便宜上つけたもので自由に変えてください。 ・style="display:none;"はスタイルシートで行なわず、例の通りにしてください。 <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <style type="text/css"> <!-- div.tree-menu ul{ list-style-type:none; padding:0; } div.tree-menu ul li span{ cursor:pointer;/*マウスを乗せたときに手の形に*/ } --> </style> <script type="text/javascript"> <!-- function Tree(id){ var obj=document.getElementById(id); if(obj.style.display == 'none'){ obj.style.display = 'block'; }else{ obj.style.display = 'none'; } } // --> </script> </head> <body> <div class="tree-menu"> <ul> <li><span onclick="Tree('list1')">分類1</span> <ul id="list1" style="display:none;"> <li><a href="アドレス1-1">分類1-1</a></li> <li><a href="アドレス1-2">分類1-2</a></li> <li><a href="アドレス1-3">分類1-3</a></li> </ul> </li> <li><span onclick="Tree('list2')">分類2</span> <ul id="list2" style="display:none;"> <li><a href="アドレス2-1">分類2-1</a></li> <li><a href="アドレス2-2">分類2-2</a></li> <li><a href="アドレス2-3">分類2-3</a></li> </ul> </li> </ul> </div> </body> </html>
その他の回答 (1)
- zeff
- ベストアンサー率69% (137/198)
http://www.kanzaki.com/docs/html/htminfo13.html ここの「リストの入れ子」をご覧ください。 こういうことですよね？単純に。 あとは http://www.tagindex.com/html_tag/list/ul.html こういうところとか。 リンクと組み合わせるには <ul> <li>分類１ <ul> <li><a href="アドレス1-1">分類1-1</a></li> <li><a href="アドレス1-2">分類1-2</a></li> <li><a href="アドレス1-3">分類1-3</a></li> </ul> </li> <li>分類2 <ul> <li><a href="アドレス2-1">分類2-1</a></li> <li><a href="アドレス2-2">分類2-2</a></li> <li><a href="アドレス2-3">分類2-3</a></li> </ul> </li> </ul> 記事内でもフリープラグインでも同じです。 基本がわかれば余白を調節したり、 リストマークを画像にしたり、無しにしたり、 ということができます。 1例：左の余白を1文字分にする <ul style="padding-left:1em;"> <li>分類１ <ul style="padding-left:1em;"> <li><a href="アドレス1-1">分類1-1</a></li> <li><a href="アドレス1-2">分類1-2</a></li> <li><a href="アドレス1-3">分類1-3</a></li> </ul> </li> <li>分類2 <ul style="padding-left:1em;"> <li><a href="アドレス2-1">分類2-1</a></li> <li><a href="アドレス2-2">分類2-2</a></li> <li><a href="アドレス2-3">分類2-3</a></li> </ul> </li> </ul> ちなみに、 クリックすると開いたり閉じたりするのは javascriptっていうのを使います。
補足
すいません、説明不足でした。 私が言いたかったのは、「クリックするとツリー表示されるようにしたい」ということです。 たとえば、「A」をクリックするとその下にリンクがズラッと縦にツリー表示されるような感じです。 お手数をかけて誠に申し訳ありません。
お礼
とても丁寧に説明してくださり、ありがとうございます。 HTMLタグに関しては本当に無知なのですが、このタグをそのままコピペしてリンクのところだけいじってみたところ、うまくいきました。 誠にありがとうございました。