HTMLの行番号付きリスト | 階層構造の表示と開閉機能
- HTMLのUL,LIを使用して階層構造を表現し、行番号を付ける方法について紹介します。
- javascriptを使って階層構造を閉じたり、開いたりする機能についても解説します。
- 行番号を付けるプログラムが必要な場合は、特定のサイトを探すことをおすすめします。
- ベストアンサー
HTMLのUL,LIに行番号を付ける
HTMLのUL,LIで階層構造を表現できます また、javascriptを使って階層構造を閉じたり、開いたりできます 階層1 階層1-1 階層1-1-1 階層1-2 階層2 この機能はよく紹介されています この開閉機能を残したまま 行番号付けたいと思います 開いている場合 1 階層1 2 階層1-1 3 階層1-1-1 4 階層1-2 5 階層2 閉じている場合A 1 階層1 2 階層1-1 4 階層1-2 5 階層2 閉じている場合B 1 階層1 5 階層2 行番号は左寄せです このように行番号を付けるプログラムを紹介している サイトがあったら教えてください よろしく、お願いします
- neko-007
- お礼率51% (28/54)
- ホームページ作成ソフト
- 回答数2
- ありがとう数12
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
<ul> <li>トップ</li> <li>書籍 <ul> <li>書籍A</li> <li>書籍B</li> </ul> </li> <li>製品 <ul> <li>工具</li> <li>工具2</li> </ul> </li> </ul> ul li:before{content:counter(chapter);position:bsolute;} ul li ul li:fter{content:"(項目" counter(section)"-" countersub ")";} とか・・ 開閉も含めて、スタイルシートで行なうほうが簡単です。 1 トップ(項目1) 2 書籍A(項目2) 5 製品B(項目3) 開く 1 トップ(項目1) 2 書籍(項目2) 3 書籍A(項目2-1) 4 書籍B(項目2-2) 5 製品(項目3) ⇒'content'( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/generate.html#propdef-content ) beforeおよび:after疑似要素( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#before-and-after )
その他の回答 (1)
- AsarKingChang
- ベストアンサー率46% (3467/7472)
それほど、難しくはないように感じます。 1 階層1 A 2 階層1-1 B 3 階層1-1-1 4 階層1-2 5 階層2 AとBの位置に、クリックすると、 visibility:hidden; visibility:visible; が交互に切り替わるようにCSSを挿入すればよいだけに見えます。 意味が違ったらすいません。
関連するQ&A
- ulとliを指定し横に並べて
テキスト2行、5個のリストをHTMLとCSSとjavascriptでulとliを指定し横に並べて、 2秒間1個のテキストのリストで止まって2秒たったら次のテキストのリストに動く スクリプトの作り方が知りたいです。
- ベストアンサー
- JavaScript
- html <ul></ul>の並びで一行空けたい
htmlについて、初歩的かもしれませんが、お伺いします。 現在、<ul><li>を使って、リストを作成しています。 ですが、その途中に一行空けたい部分が何カ所かありまして、 <ul> <li>×××</li> <li>×××</li> <br> <li>×××</li> <li>×××</li> </ul> という感じで、組んでみました。 何の違和感もなく反映されるかと思いましたが、<br>が機能せずに、一行空かずくっついて表示されてしまい、不思議に思っています。 <ul>の中では、brは使えないのでしょうか? それとも、使えるけれど、何か他の要因があると使えなくなってしまうのでしょうか。 htmlは基礎的なことしか存じませんので、詳しい方や思い当たることをご存じの方にお答えいただけると助かります。 宜しくお願いします。
- ベストアンサー
- その他(インターネット・Webサービス)
- HTMLタグのDL DT DDを使ってliやulの代わり
HTMLタグのDL DT DDを使ってliやulの代わりをしようとしていますが、 liの list-style-image: url("test.gif"); がDL DT DDで表現できません。 違った方法で表示できるのでしょうか? それとも不可能なのでしょうか?
- ベストアンサー
- HTML
- UL, LIタグでの質問
いつもお世話になっています。 自分では以前から疑問に思いつつも放置していた問題です。 その問題とは、UL,LIタグでツリー表示を行い、 各項目にリンクがあります。その項目の選択位置が 項目の文字の長さによって文字がないところでも選択が出来るのです。 言語仕様であればそれで通すのですが、そういうわけでもなさそうな気配なのでどうにか解決したいと思っています。 ソースは下記のようになっていています。 <nobr><ul> <li id=foldheader><a href="">ZZZZZ</a></li> <ul id=foldinglist style=display:none style=&{head}> <li id=foldend><a href="">XXXXXXX</a></li> <ul id=foldinglist style=display:none style=&{head}> </ul> </ul> </nobr> これでいうと、ZZZZZの文字のちょっと後ろがクリックできて、XXXXXXXが表示されます。 で、XXXXXXXが表示されるとXXXXXXXの長さ+アルファぶんだけ後ろまでZZZZZの後ろに選択できる範囲が広がります。 また、XXXXXXXの前にも選択出来る範囲が出てきます。 これを、純粋に文字の部分だけ選択出来るようにする方法はあるのでしょうか? 以上、よろしくお願いいたします。 ※文字数制限により、開閉のJavaScriptは省略
- ベストアンサー
- HTML
- 【JQuery】アコーディオンの入れ子について
アコーディオンの入れ子(多階層)について、お教えください。 JQueryで入れ子のアコーディオンメニューを作成したいと思っています。 入れ子の数は計3つを予定してます。(第3階層まで) 1~3つ目それぞれのメニューは増減する可能性がある為、出来るだけ数字で割り振ったIDなどは使用せずに表現したいと思っています。(メニューを増やす度にIDが増えるのを止めたい) ■HTMLソース例 <ul class="navi"> <li>第1階層 <ul class="navi-sub"> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> <li>第2階層 <ul class="navi-sub2"> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> <li><a href="#">第3階層</a></li> </ul> </li> </ul> </li> </ul> 上記のようなHTMLソースで入れ子のアコーディオンを作成することは可能でしょうか? (ID、CLASSのセレクタの振り方は上記以外でもかまいません) また、最初からアコーディオンメニューの1部分だけ展開した状態にする事は可能なのでしょうか? (上の質問にも言える事ですが、JavaScriptにこだわっている訳ではないので、CSSでも表現が可能であればCSSでも構いません) JavaScriptがよく分からない為、お教え頂けると大変助かります。 何卒宜しくお願い致します。
- 締切済み
- JavaScript
- css li に入れ子で適用する範囲
HTML の li にcssを適用する場合ですが 下のように入れ子の場合 A行に #aaaaa {background-color:yellow;} B行に #bbbbb {background-color:pink;} B行の部分だけはピンクになりますが A行の入れ子部分は黄色です このような入れ子状態で、A行一行のみ黄色にすることはできますか A行の下の <ul>に対して、別の cssを適用するなど なにか方法があれば教えてください よろしく、お願いします <ul> <li>1st item</li> <li>2nd item <ul> <li>2 - 1</li> <li id="aaaaa">2 - 2 ...A行 <ul> <li id="bbbbb">2 - 2 - 1</li> ...B行 <li>2 - 2 - 2</li> <li>2 - 2 - 3</li> </ul> </li> <li>2 - 3</li> </ul> </li> <li>3rd item</li> </ul>
- ベストアンサー
- ホームページ作成ソフト
- <li>要素の追加方法
プログラムの最初で <ul id="list"> <li></li><li></li><li></li> </ul> と書いておいて、javascript内でこの<li></li>の中に site_names = ["1","2"]; site_urls = [" http://oshiete.goo.ne.jp/"," http://www.google. co.jp/"]; のような配列の要素やリンクを要素の追加をするにはどうしたら良いのでしょうか。
- 締切済み
- JavaScript
- どの<li><a> が押されたか判別したい
<ul id="category"> <li><a href="~~">光熱費</a></li> <li><a href="~~">雑費</a></li> </ul> という様なかたちで家計簿のカテゴリーを作っているのですが どの<li>が押されたかを判別してその押された中身のテキストを取得したい場合には どうすればいいのでしょうか? <select>なら「selectedIndex」で選択されたメニューの配列番号が取得できると思うのですが、<li>要素の場合には同じようなものがあるんでしょうか? ちなみに、リスト<li>の個数は固定ではなくて、javascriptでカテゴリーを追加したり削除したり出来る様にしたいと思っています。
- ベストアンサー
- JavaScript
- ulやol、どの階層に居てもOKなcss記述方法
例えば、こんな場合でも <ol> <li> <ul> <li></li> <li></li> <li> <ol> <li></li> <li></li> <li> <ul> <li></li> <li></li> <li></li> </ul> </li> </ol> </li> <li></li> <li> <ol> <li></li> <li></li> </ol> </li> </ul> </li> <li></li> <li></li> </ol> こんな場合でも <ul> <li> <ul> <li></li> <li></li> <li> <ul> <li></li> <li></li> <li> <ul> <li></li> <li></li> <li> <ul> <li></li> <li></li> <li></li> </ul> </li> </ul> </li> </ul> </li> <li></li> <li> <ol> <li></li> <li></li> </ol> </li> </ul> </li> <li></li> <li></li> </ul> どの階層上のol、ulでも ulのliには、list-style-typeのdisc(・)が付き、 olのliには、list-style-typeのdecimal(1、2、3…)が付く cssのシンプルな記述方法を教えて下さい。 何も設定しないと、ulのliが階層によってcircle(○)だったりsquare(■)だったり。 ul liで設定すると、ul内にあるol liが意図しないマークになる。 liのみ設定すると、ulかolのどちらかで意図しないマークになる。 ひょっとしたら、いろんな階層に居る場合を想定した記述方法(ul ol liとか ol ol liとか) をするしかやり方はないのでしょうか?
- ベストアンサー
- HTML
- <li>タグのクリックされたテキストを取得する方法
HTMLのリストの要素をクリックされた時にそのテキストを取得する方法が知りたいです。 取得したテキストを別枠に表示したいです。 jqueryを利用せずjavascriptのみで実装する事は可能でしょうか? <ul> <li>文字1</li> <li>文字2</li> <li>文字3</li> </ul>
- 締切済み
- JavaScript
補足
ありがとうございます 参照したページから LI:before { content: counter(item) ". "; counter-increment: item } の一文を引用しましたが、適用すると、番号は 1. トップ 1. 書籍 2. 書籍A 3. 書籍B 1. 製品 2. 工具 3. 工具2 のように、ULの場所でリセットされます UL { counter-reset: item } LI:before { content: counter(item) ". "; counter-increment: item } の二文を適用すると、番号は 1. トップ 2. 書籍 1. 書籍A 2. 書籍B 3. 製品 1. 工具 2. 工具2 のようになります すべて連番にしたいので、 最初の例のように、一文を適用するだけでLIをカウントしてくれそうなのですが なにか足りないのでしょうか UL LI:before { content: counter(item) ". "; counter-increment: item } と頭にULを付けても最初の例と同じでした よろしく、お願いします