- 締切済み
HTMLリストの作り方
HTMLの<LI>で、 ● りんご ┣ごりら ┣らっぱ ┗ぱんつ のような構造のリストを簡単に作るcssはありませんか？ わかるかたがいましたら教えてください。
- oshiete329
- お礼率77% (200/258)
- CSS
- 回答数2
- ありがとう数10
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
単純に: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)
ツリー表示するだけなら・・・・ http://coliss.com/articles/build-websites/operation/css/css-parent-child-vertical-list-menu.html 展開できるツリー表示となるとjQueryやJavascriptとの組み合わせになるかと。http://www.ne.jp/asahi/hatakeyama/design/csslayout/ajaxtest/index13.html アコーディオンメニューであればCSSのみで実装出来ます。 http://weboook.blog22.fc2.com/blog-entry-361.html http://hack.aipo.com/archives/1071/ http://9-bb.com/css%E3%81%A0%E3%81%91%E3%81%A7%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8C%E9%96%8B%E3%81%84%E3%81%9F%E3%82%8A%E9%96%89%E3%81%98%E3%81%9F%E3%82%8A%E3%81%99%E3%82%8B%E3%82%A2%E3%82%B3%E3%83%BC/
関連するQ&A
- 単語単位で改行を拒否する方法。
なにかのタグで挟んでおくとその間では改行表示されないようなタグがあったと思うのですが、思い出せません。 例えば 「りんご ごりら らっぱ ぱらそる」 のようなテキストがあった場合、ブラウザーの幅を見る側が変えても改行が単語のなかでおこなわれないようにしたいのです。 表示 ×「りんご ごりら らっぱ ぱら そる」 ○「りんご ごりら らっぱ ぱらそる」
- 締切済み
- HTML
- HTMLのリストについて教えてください。
HTMLのリストについて教えてください。 ワード文章をドリームウィーバーで作成しておりますが、番号のついた文章の中にまた、番号付の文章を入れるため、olでくくったliの文章の中にolでまたliの文章を組むことにより、番号をふったものを作成できましたが、バリデートでチェックするとエラーとなり、ol内にol を使用できないとコメントがありました。他の方法が思いつかないのですが教えていただけないでしょうか。 <ol> <li>見出し文章</li> <li>見出し文章</li> <ol> <li>詳細な内容</li> <li>詳細な内容</li> </ol> <li>見出し文章</li> <li>見出し文章</li> </ol>
- ベストアンサー
- ホームページ作成ソフト
- リストの高さを揃えたい
リスト2行を左右に並べて設置したいと思い、テーブルのセルの中にそれぞれ記述しました。 左のセルには5行、右のセルには4行あります。 右側が1行少ないことで、左右で高さが異なってしまいます。（図があります） どうも、右側のリスト全体がセルの中央に配置されている感じがします。 左右で高さを揃えたいのですが、その方法を教えてください。 HTMLとCSSは以下のとおりです （HTML） <table> <tr> <td class="sample"><ul> <li>ABC</li> <li>DEF</li> <li>GHI</li> <li>JKL</li> <li>MNO</li> </ul> </td> <td class="sample"><ul> <li>PQR</li> <li>STU</li> <li>VWX</li> <li>YZA</li> </ul> </td> </tr> </table> （CSS） .sample{ text-align: left; valign: top; padding: 0px; border: none; }
- ベストアンサー
- CSS
- HTMLのリストについて
サイトのプライバシーポリシーのページを作成しています。 実際の質問事項は半ばあたりですのでよろしくお願いします。 １．個人情報の取得について 当社は、偽りその他不正の手段によらず適正に個人情報を取得致します。 ２．個人情報の利用について 当社は、個人情報を以下の利用目的の達成に必要な範囲内で、利用致します。 のような文章をHTML化するときはどのようなコーディングが最適でしょうか。 <ol> <li>個人情報の取得について<br> 当社は、偽りその他不正の手段によらず適正に個人情報を取得致します。</li> <li>個人情報の利用について<br> 当社は、個人情報を以下の利用目的の達成に必要な範囲内で、利用致します。</li> </ol> が思いつきます。 ただ、今回はこの文章の前に はじめに 株式会社○○○以下、「当社」）は、各種サービスのご提供にあたり、云々 という文章があり以下のようになっています。 はじめに 株式会社○○○以下、「当社」）は、各種サービスのご提供にあたり、云々 １．個人情報の取得について 当社は、偽りその他不正の手段によらず適正に個人情報を取得致します。 ２．個人情報の利用について 当社は、個人情報を以下の利用目的の達成に必要な範囲内で、利用致します。 となっています。 この場合最適なHTMLの書き方はどのようなものになるでしょうか？ 出来ればコーディーング例と理由を教えてください。 私は、 cssでolに対して ol{list-style:none;} で行頭番号を消して <ol> <li>はじめに<br> 株式会社○○○以下、「当社」）は、各種サービスのご提供にあたり、云々</li> <li>1.個人情報の取得について<br> 当社は、偽りその他不正の手段によらず適正に個人情報を取得致します。</li> <li>2.個人情報の利用について<br> 当社は、個人情報を以下の利用目的の達成に必要な範囲内で、利用致します。</li> </ol> が素直かと思います。 しかし、reset.cssを導入したらli要素に番号が付かないので <li>1. <li>2. などと本末転倒の輩がいるので..... というような批判をみたことがあります。 <li>1. などと書くのは「頭が頭痛で」見たいなものなんでしょうか なので現状は定義済みリストを使って <dl> <dt>はじめに</dt> <dd>株式会社○○○以下、「当社」）は、各種サービスのご提供にあたり、云々</dd> <dt>1.個人情報の取得について</dt> <dd>当社は、偽りその他不正の手段によらず適正に個人情報を取得致します。</dd> <dt>2.個人情報の利用について</dt> <dd>当社は、個人情報を以下の利用目的の達成に必要な範囲内で、利用致します。</dd> </ol> のようにしています。 皆様のご意見よろしくお願いします。 今のところはHTML4.01strictで作っていますが HTML5だと別になるのでしょうか
- ベストアンサー
- HTML
- リスト（ul / li）タグの左インデントの解除
HTML、CSSの初心者です。 リスト（ul / li）タグの左インデントの解除の仕方がわかりません。 IE系とMozila系でインデント解除の方法を教えていただけないでしょうか。 ◆現在の書き方 ----------------- ・HTML <ul id="navi"> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> </ul> ----- ・CSS #navi ul {list-style: none; margin: 0; padding: 0;} #navi li {list-style: none; float: left; margin: 0; padding: 0;} ----------------- よろしくお願いいたします。
- 締切済み
- HTML
- リストを作りたいです
CSSを使ってリストを作っています。 <ul> <li>～～～</li> <li>～～～</li> <li>～～～</li> </ul> という感じにしています。 これを、リストの中にリストがあるようにしたいのですが、どうすればいいでしょうか？ ●花 □バラ □桜 □梅 ●果物 □イチゴ □バナナ □すいか ●乗り物 □バス □新幹線 □飛行機 ↑こういった表示にしたいと思っています。 よろしくお願いします。
- ベストアンサー
- HTML
- 「しりとり→りんご→ごりら→らっぱ→ぱ……」？？
職場の同僚としりとりの話題になったときに、ふと沸き起こった小さな疑問です。 しりとりをする時、「しりとり」の「り」から始めると「りんご→ごりら→らっぱ」までは定石として続くことが多いですよね。 ですが「らっぱ」の「ぱ」からは、かなり多くのパターンがあるのではないかと思うのです。 そこでお聞きしたいのですが、しりとりで「りんご→ごりら→らっぱ」と繋がった後に、皆様ならどのように答えるでしょうか？ できましたら直感の回答をそのまま答えていただけましたら嬉しいです。よろしくお願いいたします。
- 締切済み
- アンケート
- HTMLのulタグで表示される「・」を消したい
ネットで調べて下記二通りを試しましたが消せませんでした。 １．HTMLで<ul class="doterase">とし、CSSで .doterase li { list-style: none; } とした。HTMLでClass="doterase"としているのにCSSで.doteraseと先頭に「.」を追加した理由は 判りません。 ２．HTMLでulタグに <ul style="list-style: none;">としても同じでした。 HTML,CSSのコードは下記のとおりです。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>日本の将来る</title> <meta name="discriptio" content="八十路の提言"> <link rel="stylesheet" href="homestyle.css"> </head> <body> <h1><center>日本の将来</center></h1> <h2><center>八十路の提言</center></h2> </body> <ul > <li> <a href="https://google.co.jp">aaaa</a> </li> <li> <a href="https://google.co.jp">bbbb</a> </li> <li> <a href="https://google.co.jp">cccc</a> </li> </ul> <div style="border: 3px none;"> 枠線を実線で装飾１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１１ </div> </html> CSS @charset "UTF-8" ; body { background-color : #adcc33; font-size: 40px; width: 200; height:200; position: relative; /* 日本の将来に期待する */ top: 10px; /* 上から10px */ p { font-size: 40px; } <style> .doterase li { list-style: none; } </style> <ul class="doterase"> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> li { color: #000000; font-size:30px } 参考書を理解しないままコピペでつくっています。HTML/CSSは最近始めたばかりなので超初心者です。よろしくお願いいたします。Windows11なのでHTML,CSS.共最新バージョンだと思います。 なお、これと同じ内容で他のQ&Aサイトに投稿しましたが質問の仕方が拙かったようで内容の訂正でなく取り消し後再質問したら回答がなくなったためこちらに質問しています。
- ベストアンサー
- HTML
- HTML 5 にて、リストを縦横に並べたい
HTML5にて、リストを以下のように並べたいのですが、方法を教えていただけないでしょうか。 よろしくお願いいたします。 【ブロック 1】 【ブロック 3】 【ブロック5】 ・AAAAAA ・KKKKKKK ・UUUUUUU ・BBBBBB ・LLLLLLL ・VVVVVVV ・CCCCCC ・MMMMMM ・WWWWWW ・DDDDDDD ・NNNNNNN ・XXXXXXX ・EEEEEEE ・OOOOOOO ・YYYYYYYY 【ブロック2】 【ブロック 4】 【ブロック 6】 ・FFFFFF ・PPPPPPPP ・4444444 ・GGGGGG ・QQQQQQQQ ・ZZZZZZZZ ・HHHHHHH ・RRRRRRRR ・１１１１１１ ・IIIIIIIIIIIIIIII ・SSSSSSSS ・２２２２２２ ・JJJJJJJJ ・TTTTTTTTT ・３３３３３３ ここで、例えば、ブロック1 は、以下のようになっています。 <ul> <li>AAAA</li> <li>BBBBB</li> <li>CCCCC</li> <li>DDDDD</li> <li>EEEEEE</li> </ul>
- ベストアンサー
- HTML
- 【VBA】セルに含まれない値を追加していく
VBA初心者です あるリストの、指定の列の重複しない値のリストを作成したいのですが 具体的には A B C 1 大阪 りんご 10 2 東京 りんご 20 3 東京 りんご 30 4 名古屋 ごりら 40 5 福岡 ごりら 50 6 大阪 らっぱ 60 指定のセル内（E1：E10）にA列の重複しないリスト （この例だと、大阪、東京、名古屋、福岡） を作成したいのです いくつか試してみたけれどうまくいきません どのようなVBAを作成すればよいでしょうか よろしくお願いいたします
- ベストアンサー
- その他MS Office製品
