• 締切済み

HTMLリストの作り方

HTMLの<LI>で、 ● りんご ┣ごりら ┣らっぱ ┗ぱんつ のような構造のリストを簡単に作るcssはありませんか? わかるかたがいましたら教えてください。

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

単純に:before擬似要素とcontentプロパティを使う <ol> _<li>あ行 __<ol> ___<li>あ</li> ___<li>い</li> ___<li>う</li> __</ol> _</li> _<li>か行 __<ol> ___<li>か</li> ___<li>き</li> ___<li>く</li> __</ol> _</li> </ol> にて、 ol,ol li{list-style:none;line-height:1.4em;margin:0;padding:0;font-famiry: monospace;} ol li:before{content:"├ ";font-size:1.6em;} ol li:last-child:before{content:"└ ";} ol li ol li:before{content:"│ ├ ";} ol li ol li:last-child:before{content:"│ └ ";} ol li:last-child ol li:before{content:"  ├ ";} ol li:last-child ol li:last-child:before{content:"  └ ";} ※セレクタは、文書構造にしたがって書き直すこと。例えば div.AIUEO ol,ol li{list-style:none;line-height:1.4em;margin:0;padding:0;} div.AIUEO ol li:before{content:"├ ";font-size:1.6em;} ol li:last-child:before{content:"└ ";} div.AIUEO ol li ol li:before{content:"│ ├ ";} div.AIUEO ol li ol li:last-child:before{content:"│ └ ";} div.AIUEO ol li:last-child ol li:before{content:"  ├ ";} div.AIUEO ol li:last-child ol li:last-child:before{content:"  └ ";} ●も付けられますが、それは工夫してみましょう。 セレクタの書き方は 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) それに伴う継承は 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )

すると、全ての回答が全文表示されます。
  • eden3616
  • ベストアンサー率65% (267/405)
回答No.1
すると、全ての回答が全文表示されます。

関連するQ&A