- ベストアンサー
olのタグの入れ子で、1-1等の番号を振りたいが
お世話になります。 olを使用したリストの入れ子で、1-1、1-2などの番号を 振る方法はないでしょうか。 例で言いますと、 <ol> <li>A <ol> <li>AA</li> <li>AB</li> </ol> </li> </ol> …等とすると、 1.A 1-1.AA 1-2.AB のように表示させたいのですが、このように、 入れ子の数に対して、「1-3-1」とか『2-A-1-1』などの 番号を振る方法とは、ありますでしょうか。 もしあるのであればご教授ください。 よろしくお願いいたします。
- みんなの回答 (2)
- 専門家の回答
関連するQ&A
- 番号付きリスト(<Ol><Li>・・・</Ol>)の数字を全角に。
番号付きリスト(<Ol><Li>・・・</Ol>)の数字を全角に。 お世話になっております。 番号付きリスト(<Ol><Li>・・・</Ol>)の数字を全角にしたいのですが、 そのようなことはできるのでしょうか。 ご教授ください。よろしくお願いします。
- ベストアンサー
- HTML
- olタグ・liタグで一部のリストを横並びにした
olタグ・liタグで一部のリストを横並びにしたい場合 olタグに display: inline; list-style-type: none; としても意味がないのでしょうか? <style type="text/css"> ol.test1{ display: inline; list-style-type: none; }</style> <ol class="test1"> <li><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> としても横にはならずに番号が消えました。 なので li.test2{ display: inline; list-style-type: none; } として <ol> <li class="test2"><a href="#">階層1</a></li> <li class="test2"><a href="#">階層2</a></li> <li class="test2"><a href="#">階層3</a></li> </ol> としたのですが liの数だけスタイルシートを指定しないとダメなのでしょうか? <ol> <li class="test2"><a href="#">階層1</a></li> <li><a href="#">階層2</a></li> <li><a href="#">階層3</a></li> </ol> のように一つだけクラスに入れたら そこだけ番号が消えた上 横並びにはなりませんでした。
- ベストアンサー
- CSS
- ol要素の番号とリスト項目の離れについて
最近HPを作り始めた素人です。 DWでol要素を使って順序つきの項目リストを作っております。 DWのデザインウィンドウとIEだとちゃんとリスト項目の行頭に番号が表示されるのですが、Google Chromeで閲覧すると番号とリスト項目が離れて表示されてしまいます。 (番号は左寄り、項目は中央です。) 例 <ol> <li>アメリカ</li> <li>フランス</li> <li>イギリス</li> </ol> IE 1. アメリカ 2. フランス 3. イギリス Chrome 1. アメリカ 2. フランス 3. イギリス 因みにこのol要素をdiv idで囲んでいてText-alignをcenterにしております。 単純な間違いだとは思うのですが、知識不足のため分かりません。 恐れ入りますが、どなたかご教授お願いいたします。
- 締切済み
- その他([技術者向] コンピューター)
- UL OL タグの使い方
「以下」もわからずに <BR>以下としていますが、 以下と1.順序付きリスト...の間が開かないようにしたいのですが 良い方法はありますか? --------以下見え方 ----- ・順不同リストULタグ 以下 <-------------- ここに隙間をなくしたい。 1.順序付きリストolタグ 2.同じく --------ソース---------- <UL> <LI>順不同リストULタグ <BR>以下 <OL> <LI>順序付きリストolタグ <LI>同じく </OL> </UL>
- ベストアンサー
- HTML
- CSS入れ子リストを作成したい
CSS初心者です。 1,リスト 1-1,○○○○○ 1-2,○○○○○ 2,モデル 2-1,○○○○○ 2-2,○○○○○ 3,まとめ のような入れ子リストを作成したいのですが 現在の ■HTML <ol class="sample1"> <li>リスト</li> <li>○○○○○</li> <li>○○○○○</li> <li>モデル</li> <li>○○○○○</li> <li>○○○○○</li> <li>まとめ</li> </ol> ■CSS ol.sample1{ counter-reset:list; list-style-type:none; font: 14px/1.6 'arial narrow', sans-serif; padding:0; } ol.sample1 li{ position:relative; margin: 7px 0 7px 0px; padding-left:40px; font-weight: bold; font-size:14px; line-height: 30px; border: solid 1px #F6A38B; border-radius:20px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } ol.sample1 li:before{ counter-increment: list; content: counter(list); position: absolute; left: 0px; width: 30px; height: 30px; text-align: center; color: #fff; line-height:30px; background: #F6A38B; border-radius: 50%; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } ol.sample1 li:hover{ background: #F6A38B; color: #fff; } ol.sample1 li:hover:before{ background: #fff; color: #F6A38B; } をHTMLを下記に変更して上の例のような入れ子にするには 上記のCSSをどのように変更すればいいのでしょか? ■HTML <ol class="sample1"> <li><a href="">リスト</a></li> <ol> <li><a href="">○○○○○</a></li> <li><a href="">○○○○○</a></li> </ol> </li> <li><a href="">モデル</a></li> <ol> <li><a href="">○○○○○</a></li> <li><a href="">○○○○○</a></li> </ol> </li> <li><a href="">まとめ</a></li> </ol> よろしくお願いいたします。
- ベストアンサー
- CSS
- UL OL タグのインデントについて
UL OLタグでリストを作った時、通常下記のように表示ますが、 リスト ・項目1 ・項目2 ・項目3 これを リスト ・項目1 ・項目2 ・項目3 のように<li>でくくったものをインデントさせないで表示することは可能でしょうか?
- ベストアンサー
- HTML
- HTMLタグ リストの入れ子とNetscapeについて
HTMLソースにおけるリストの入れ子とNetscapeについて 更新履歴を作成したく、リストの入れ子を作成しました。 Netscape以外のブラウザ(IE8、Opera、Safari、FireFox)では期待通りの表示になったのですが、Netscapeのみ表示が異なります。 以下ソース ------------------------------------------------------- [html] <ul id = "Style_NonIndex"> <li style="font-size:12px">*最終更新*</li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">ccccの更新</li> </ul></li> </ul> <br><br><br><br> <ul id = "Style_NonIndex"> <li style="font-size:12px">*更新履歴*</li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">aaaaの更新</li> </ul></li> <li><ul id = "Style_NonIndex"> <li class = "List_Date">2000/00/00</li> <li class = "List_Comment">bbbbの更新</li> </ul></li> </ul> ------------------------------------------------------- [css] #Style_NonIndex { margin-top:0px; margin: 0px; padding: 0px; list-style: none; font-size: 10px; font-family: MSゴシック; color: #696969; } .List_Date { float: left; width: 70px; text-align: left; font-size: 12px; margin: 0px; padding: 2px; list-style: none; } .List_Comment { float: left; width: 250px; text-align: left; font-size: 12px; margin: 0px; padding: 2px; list-style: none; } ------------------------------------------------------- [予想表示] *最終更新* 2000/00/00 ccccの更新 *更新履歴* 2000/00/00 aaaaの更新 2000/00/00 bbbbの更新 ------------------------------------------------------- [Netscapeの表示] *最終更新* 2000/00/00 ccccの更新 *更新履歴* 2000/00/00 aaaaの更新 2000/00/00 bbbbの更新 ------------------------------------------------------- 他のブラウザでの表示は問題ないのですが、Netscapeのみ横リストとして表示されます。 表示が異なるのはNetscapeの仕様でしょうか? それとも指定方法がおかしいのでしょうか。 大分煮詰まってしまったので、アドバイスをお願いいたします。
- ベストアンサー
- 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
- <OL><LI>タグにて、こういう風にはできないのでしょうか???
こんにちは(*- -)(* _ _) たびたびお世話になっています。 今、HTMLを作成中なのですが、 番号を振るタグで<OL><LI>がありますよね? あれだと、 1. ●● 2. ●● という風に出るのですが、 1. ●● 1-1. ×× 1-2. ×× ××× 1-3. ××× このように、1-1.みたいにはできないでしょうか・・・(T-T) ムリっぽいなぁ・。・。・とは思うものの。。。 もし、「そのタグではムリなのでこうしてみたら?」というのがあれば是非教えてください!!!!
- ベストアンサー
- HTML
- cssで、入れ子になったリストに別のデザインを適用したくてつまづいてい
cssで、入れ子になったリストに別のデザインを適用したくてつまづいています。 ■ソース <ul id="column-topmenu"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a> <ul class="sub"> <li><a href="#">●●●</a></li> <li><a href="#">●●●</a></li> </ul> </li> <li><a href="#">●●●</a> </li> </ul> ■CSS(親リストの指定) ul#column-topmenu li { padding: 15px 20px 15px 25px; list-style:none; background: url(../img/title2_bg.gif) no-repeat; font-size: 17px; line-height: 1.1; } 親要素のリストには、背景画像をつけるのですが、 入れ子のほうには背景画像なしで、テキストを整形して並べるだけです。 システムで生成する関係上、<li>にはIDを振ることができません。 <ul>は可能です。 入れ子のulには、subとつけて、試行錯誤しているのですが、 どうしても背景画像が反映してしまって・・・。 ご教示ください。 よろしくお願いします。
- 締切済み
- HTML
お礼
早速のご返答、ありがとうございました。 cssでできるというのは解ったのですが、 ブラウザに依存するというのではやはり 思ったようにはできなそうです。 タグのみでできるのが理想だったのですが、 残念です。 ここでいうことではないかもしれませんが、 cssでなく、タグで標準機脳としてもあって よいような気もします。 ありがとうございました。