電子書籍の厳選無料作品が豊富！

HTMLタグについて質問です。

解決済

  • 質問者：qwe_stock
  • 質問日時：
  • 回答数：2件

HTMLタグについて質問です。

FC2ブログを使用しているのですが、記事内やフリーエリアのプラグインなどでリンクをツリー表示できるようにしたいのです。

が、HTMLタグに関しては全くの無知なもので、どうしていいやらさっぱり。
どんなタグを打てばいいかお教えください。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： zeff#1
  • 回答日時：

#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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

とても丁寧に説明してくださり、ありがとうございます。
HTMLタグに関しては本当に無知なのですが、このタグをそのままコピペしてリンクのところだけいじってみたところ、うまくいきました。
誠にありがとうございました。

通報する
お礼日時：2010/04/27 17:18

No.1

  • 回答者： zeff#1
  • 回答日時：

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」をクリックするとその下にリンクがズラッと縦にツリー表示されるような感じです。
お手数をかけて誠に申し訳ありません。

補足日時：2010/04/27 15:54
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報