- ベストアンサー
リストの階層
リストを使って最高で５階層の一覧を作成したいのですが何度やっても巧く行きません。 原因としては<ul><li>タグの入れ子の閉じる場所に問題があるのでしょうが・・ こんな感じです。 A ┗1 ┣2 ┗3 B ┗1 ┣2 ┣3 ┗4 ┗a ┃┗ア ┃ ┗あ ┣b ┃┗イ ┃ ┗い ┗c C ┗1 ┃┗a ┃ ┗ア ┣2 ┣3 ┃┗a ┗4 うまく表示されるか分かりませんが、どなたか教えて下さい。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
その他の回答 (1)
＞もう少しお願い致します。<m(__)m> 分かりやした(^^ゞ。 「詰めたい」のは左右の間隔ですよね。 Ｎｏ１のソースの<head></head>内に、下記のソースを挿入してください。 <style TYPE="text/css"> <!-- ul.kaiso {margin-left:20px;} --> </style> で、左右幅を詰めたい部分の<ul>を、以下のように書き換えます。 <ul class="kaiso"> 「20px」は適当に入れてみたので、お好みで修正してください。 これでどうでしょうか。
お礼
ありがとうございました。しかし、奥が深いですね・・やはり、ＣＳＳの勉強をしなくてはいけないようです！又、お願い致します。
関連するQ&A
- cssで作成する多階層リスト
こんにちは。 cssで ・縦並びのリストに対して、マウスをもっていくと横にどんどん下位階層のリストが表示されるようする ・下位リストにマウスがいっても上位リストの選択の色はそのままにしたい 以上のように作成したいのですが、 そのcssの記述がわかりません。 色々サイトで探しましたが見つからず。。。 どなたか教えてください。 ◆HTML <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>多階層</title> </head> <body> <br> <div id="MainDiv"> <div id="gnav"> <ul> <li><a href="#">テスト(1)</a> <ul> <li><a href="#">てすと(1)-1</a> <ul> <li><a href="#">ＴＥＳＴ(1)-1-1</a> <ul> <li><a href="#">テスト(1)-1-1-1</a> <ul> <li><a href="#">TEST(1)-1-1-1-1</a></li> <li><a href="#">TEST(1)-1-1-1-2</a></li> <li><a href="#">TEST(1)-1-1-1-3</a></li> <li><a href="#">TEST(1)-1-1-1-4</a></li> <li><a href="#">TEST(1)-1-1-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-1-2</a> <ul> <li><a href="#">TEST(1)-1-1-2-1</a></li> <li><a href="#">TEST(1)-1-1-2-2</a></li> <li><a href="#">TEST(1)-1-1-2-3</a></li> <li><a href="#">TEST(1)-1-1-2-4</a></li> <li><a href="#">TEST(1)-1-1-2-5</a></li> </ul> </li> </ul> </li> <li><a href="#">ＴＥＳＴ(1)-1-2</a> <ul> <li><a href="#">テスト(1)-1-2-1</a> <ul> <li><a href="#">TEST(1)-1-2-1-1</a></li> <li><a href="#">TEST(1)-1-2-1-2</a></li> <li><a href="#">TEST(1)-1-2-1-3</a></li> <li><a href="#">TEST(1)-1-2-1-4</a></li> <li><a href="#">TEST(1)-1-2-1-5</a></li> </ul> </li> <li><a href="#">テスト(1)-1-2-2</a> <ul> <li><a href="#">TEST(1)-1-2-2-1</a></li> <li><a href="#">TEST(1)-1-2-2-2</a></li> <li><a href="#">TEST(1)-1-2-2-3</a></li> <li><a href="#">TEST(1)-1-2-2-4</a></li> <li><a href="#">TEST(1)-1-2-2-5</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">てすと(1)-2</a></li> <li><a href="#">てすと(1)-3</a></li> <li><a href="#">てすと(1)-4</a></li> </ul> </li> <li><a href="#">テスト(2)</a> </li> </ul> </div> </div> </body> </html> ◆CSS body { font-size: 13px; font-family: "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", "MS UI Gothic", "ＭＳ ゴシック", "ＭＳ 明朝"; } #MainDiv { overflow: hidden; width: 1000px; margin: 0; } /* 全角カタカナ階層 */ #gnav { float: left; width: 150px; height: 200px; } #gnav ul { margin: 0; padding: 0; border-top: 1px #FFFFFF solid; list-style-type: none; } #gnav ul li { width: 150px; height: 24px; text-align: center; background: #c8d6e8; border-bottom: 1px #FFFFFF solid; } #gnav ul li a { display: block; width: 150px; height: 24px; color: #000000; font-size: 100%; line-height: 1.6; background: #6495ed; text-decoration: none; } /* ※．子メニュー以下にマウスがあるときも親メニューの色は変わったにしたい */ #gnav ul li:hover > a { background: #ffa500; } /* 全角ひらがな階層 */ #gnav ul li ul { display: none; list-style-type: none; } #gnav ul li:hover ul { display: block; position: relative; top: -25px; left: 152px; width: 150px; height: 25px; }
- 締切済み
- HTML
- MovableTypeのテンプレート カテゴリのリスト表示について
MovableTypeのテンプレートの編集について質問させていただきます。 カテゴリのリスト表示を <ul> <li>トップレベルカテゴリA</li> <li>トップレベルカテゴリB</li> <li>トップレベルカテゴリC</li> </ul> <ul> <li>カテゴリAの子１</li> <li>カテゴリAの子2</li> </ul> <ul> <li>カテゴリBの子１</li> <li>カテゴリBの子2</li> <li>カテゴリBの子3</li> </ul> <ul> <li>カテゴリAの子１の子A</li> <li>カテゴリAの子1の子B</li> </ul> というように、各階層のカテゴリごとに表示させようと思い挑戦しているのですが苦戦しています。 MTのタグの知識が足りずなかなかうまくいきません。皆さんのお力貸していただけるとうれしいです。 よろしくお願いいたします。
- 締切済み
- ブログ
- 【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
- [正規表現][入れ子]ネストされたリストをインデントに置換したい
[正規表現][入れ子]ネストされたリストをインデントに置換したい preg_replaceかpreg_replace_callbackを使って、 ネストされたリストタグを全角空白によるインデントに書き換えたく思っています。 （携帯表示するため） 1階層目のliならインデントひとつ。 2階層目のliならインデントふたつ。 ・ ・ ・ という具合にしたいのです。 以下は全角空白をわかりやすくするために□で置き換えました。 ---------------------------------------------------------------------------- 【現在のHTML】 文章1 文章2 <ul> <li>リストA</li> <li>リストB</li> <li>リストC</li> </ul> <ul> <li> <ul> <li>リストあ</li> <li>リストい</li> <li>リストう</li> </ul> </li> </ul> ---------------------------------------------------------------------------- 【置換完了後のブラウザ表示】 文章1 文章2 □リストA □リストB □リストC □□リストあ □□リストい □□リストう ---------------------------------------------------------------------------- 【置換完了後のHTMLのイメージ】 文章1 文章2 <div> <div>□リストA</div> <div>□リストB</div> <div>□リストC</div> </div> <div> <div> <div> <div>□□リストあ</div> <div>□□リストい</div> <div>□□リストう</div> </div> </div> </div> ---------------------------------------------------------------------------- どうぞ、よろしくお願い致します。
- ベストアンサー
- PHP
- 「※」印のリストをつくる方法
htmlコーディングをしています。 「※」印のリストを作成するには、どうすればいいのでしょうか？ 通常よくみる「・」や番号のリスト作成は分かるのですが 「※」についてが分かりません。 <ul><li>～</li></ul>←これらのタグを使用して解決したいと思っています。 （ulもしくは、ol） お分かりになる方、お教え頂けますでしょうか？ よろしくお願いいたします。
- ベストアンサー
- その他(業務ソフトウェア)
- 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
- リストの入れ子とインデント
お世話になっております。 リストを入れ子で作成すると、自動的にインデントが設定されますね。 例えば下記のようなリストだと、ワインの部分が少しインデントされて 引っ込みます。 <ul> <li>日本酒</li> <li>ビール</li> <li>ワイン</li> <ul> <li>赤ワイン</li> <li>白ワイン</li> <li>ロゼワイン</li> </ul> </ul> このリストを画像の右側に配置したとき、リストの行頭記号がインデント されずに全て揃ってしまうのです。 こんな感じです。ワインの部分がインデントされません。 ↓↓ ●日本酒 ●ビール ●ワイン ○赤ワイン ○白ワイン ○ロゼワイン imgタグの中にaling="left"と記述しても、スタイルシートを使っても 結果は同じでした。 ワインの部分の<li>をスタイルシートのmargin-leftを使っても 引っ込みません。 画像を左に、リストを画像の右側に配置して、行頭記号もインデントされるようにしたいのですが、どうすればいいでしょうか。 よろしくお願い申し上げます。
- 締切済み
- HTML
- EXCELでリストを作成して、そのリストを選択した値を複数の入力するよ
EXCELでリストを作成して、そのリストを選択した値を複数の入力するようにしたいが、どうしたらいいでしょうか？ 例えばA1にリストを作成、リスト中”A,B,C,D"が選択できるようにする。 ”A"を選択した場合B1のセルに”あ”が表示、同時にC1のセルに”ア”が表示。 ”B"を選択した場合B2のセルに”い”が表示、同時にC2のセルに”イ”が表示....
- ベストアンサー
- その他MS Office製品
- 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
- 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
補足
ありがとうございました。わざわざソースまで書いていただき、検証までしてくれたとは。 希望のイメージとおりにはなりましたが、欲を言えば ↑のソースで ・4の直下 a との間 ・aの直下 ア との間 ・ア直下 あ との間 は詰らないものでしょうか？ もう少しお願い致します。<m(__)m>