• ベストアンサー

ulとol

http://www.tagindex.com/stylesheet/list/list_style_type.html を見てもよくわからないのですが ulとolは何が違うのでしょうか? 数字を使って 1.リスト項目 2.リスト項目 3.リスト項目 としたい場合、 ulとolのどちらを使えばいいですか?

  • CSS
  • 回答数4
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
noname#206842
noname#206842
回答No.4

まさかとは思いますが?・・・ <ul> <li>1.・・・・</li> <li>2.・・・・</li> </ul> などと記述しているのでは?・・・ <ol>は、番号付リスト項目 <ul>は、ただのリスト項目 に、使用するタグです。 仮に:100から番号を振る場合は、<ol start=100"></ol>という、記述になります。

その他の回答 (3)

  • tkmojo
  • ベストアンサー率50% (105/207)
回答No.3

1.リスト項目 2.リスト項目 3.リスト項目 数字を付けるリストというだけでは判断が出来ません。 list-style-type:decimal;を指定すれば、ulでもolでも連番付きの箇条書きが出来ます。 書かれた内容が、順番を変えても成立するかどうかが判断の基準です。 例えば、料理の手順を紹介してみましょう。 1.食材をみじん切りにします 2.切ったものを炒めます 3.盛り付けて完成 こういう場合は順番を変えると意味がつながらないのでolを使います。 次に、ECサイトでの禁止事項などを箇条書きにしてみましょう。 1.虚偽内容を記入する行為や他人に成りすましての注文 2.商品の受け取り拒否等、配送を阻害する行為 3.初期不良以外の返品 この場合は、連番はふってあるものの順番を入れ替えても成立する内容なのでulを使います。

  • 4017B
  • ベストアンサー率73% (1306/1777)
回答No.2

え~っとコレは本来のタグの意味で分けて使います。 ・OL : Ordered List … 順番通りに並んだリスト項目 ・UL : Unordered List … 順番に並んで無いリスト項目 ~以上の様な意味が本来は有ります。 つまり <OL> はリスト項目の並び順番に意味が有るリストの時に使い。<UL> はリスト項目が順不同でも問題無い、雑多な項目を同列に併記する場合などに使います。従ってリスト項目に数字やアルファベット等で「順番」を表示させたい場合は、<OL> の方を使います。 以下の様な記述で、数字の「1」から順番にリスト項目が並んだ状態で表示されます。 <ol> <li>リスト項目</li> <li>リスト項目</li> <li>リスト項目</li> <ol> もしも数字以外、あるいは「1」以外からリスト項目を始めたい場合は… <ol type="a" start="3"> <li>リスト項目</li> <li>リスト項目</li> <li>リスト項目</li> <ol> ~と記述する事で c. リスト項目 d. リスト項目 e. リスト項目 ~みたいに表示されます。type で指定できる要素は 1、a、A、i、I の4種類。start には開始の順番を指定出来ます。無効な数値、或いは無指定だった場合には常に「数字/1から開始」となります。まあ色々と試してみてください。 P.S. <UL> は順番指定が出来ないので、全てのリスト項目に同じ印が表示されます。やはり type で印の種類を変える事が出来ますが、start は設定出来ません。 しかしながらCSSを使えば <OL>、<UL> の違いに関係無く、自由に数字や丸印などを使う事が出来ます。従って現状、見た目の表示上では事実上、2つの差は全く無いと言って差支えが無いのですが…。 まあ人間側がwebコンテンツを作る上で便宜上、メンテナンスのし易さとかコードの可読性を高めるために、適宜使い分けると言った感じでしょうか?まあ前述の原理原則に従って記述して置けば、第三者に仕事を受け継ぐ時などに面倒が少なくて済みます。

回答No.1

>ulとolのどちらを使えばいいですか? olですね。 ・リスト項目 ・リスト項目 ・リスト項目 こんな箇条書きの時、順番がぐちゃぐちゃでもOKなリストがulです。

関連するQ&A

  • list-styleはolでもulでも使うのですか

    CSSのlist-styleプロパティは、<ol>でも<ul>でも変わりなく使うのですか? 宜しくお願いします。

    • ベストアンサー
    • CSS
  • UL OL タグのインデントについて

    UL OLタグでリストを作った時、通常下記のように表示ますが、 リスト  ・項目1  ・項目2  ・項目3 これを リスト ・項目1 ・項目2 ・項目3 のように<li>でくくったものをインデントさせないで表示することは可能でしょうか?

    • ベストアンサー
    • HTML
  • UL OL タグの使い方

    「以下」もわからずに <BR>以下としていますが、 以下と1.順序付きリスト...の間が開かないようにしたいのですが 良い方法はありますか? --------以下見え方 ----- ・順不同リストULタグ  以下 <-------------- ここに隙間をなくしたい。  1.順序付きリストolタグ 2.同じく --------ソース---------- <UL> <LI>順不同リストULタグ <BR>以下 <OL> <LI>順序付きリストolタグ <LI>同じく </OL> </UL>

    • ベストアンサー
    • HTML
  • 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
  • ul,olの画像の位置

    下のように書いたときに画像とaaaaの高さの位置関係を調整する方法を教えてください。 画像サイズは20px×20pxです。 <style type="text/css"> <!-- body { font-size:medium; line-height:120%; } ul { list-style-image:url("gazou.jpg"); } //--> </style> </head> <body> <ul> <li>aaaa</li> </ul> </body>

    • ベストアンサー
    • HTML
  • <ul><ol>箇条書き内容のリンク化は出来ますか

    htmlの箇条書き<ul><ol>の<li>の各項目に、別のページへのリンクをつける事は出来るでしょうか。 いくつかリンクを並べる際にも、ulやolは使う物なのでしょうか。 馬鹿な事を言ってましたら済みません、 宜しくお願いします。

    • ベストアンサー
    • HTML
  • <ul>は必要ですか?

    CSSを使ってなるべくHTMLのソースを減らそうと思い悪戦苦闘中です。 ■が画像だと仮定して書きます。 ■項目1 ■項目2 ■項目4 ■項目5 ■項目6 ■項目7 というような表示ができるようにしたいのですが、 CSSファイルに ul { list-style-image: url(img/mark.gif); vertical-align: middle; } と指定してHTMLには <ul> <li>項目1</li> <li>項目2</li> <li>項目4</li> <li>項目5</li> <li>項目6</li> <li>項目7</li> </ul> と書きました。そうすると表示が   ■項目1   ■項目2   ■項目4   ■項目5   ■項目6   ■項目7 と頭にスペースが入ってしまいます。(リスト項目なので当たり前なのかも知れないですが…) これをスペースをなくしたいのです。 そこで、<li>だけならどうだろうと思い、CSSを下記のように書き直し試したところスペースがなく表示出来ました。 li { list-style-image: url(img/mark.gif); vertical-align: middle; } <ul></ul>は必要でしょうか? それとも他に方法があればご教授下さい。私には上の方法しか思いつきませんでした。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • <ul>と<li>リストマークを消すのはどちら?

    CSSの質問です。 <ul>と<li>でリストマークを消すために list-style-type:noneとするのは<ul>と<li>のどちらに設定するのが正しいですか? どちらに設定してもリストマーク消えますけど。 どちらに設定したら規格上違反とかありますか?

    • ベストアンサー
    • CSS
  • ulとulの間が空いてしまう

    http://www.ana.co.jp/asw/index.jsp こういったメニューが作りたいのですが <ul class="menu"> <li> <li> ... <ul> <ul class="menu"> <li> <li> ... <ul> こうやってやるとulとulの間に隙間が出来ます。 marginもpaddingも0です。 どうやったらいいでしょうか? CSSは下記です。 ul.menu { width: 750px; margin: 0px; padding: 0px; list-style-type: none; line-height:normal; } ul.menu li { line-height:normal; margin: 0px; padding: 0px; float:left; } 宜しくお願いします!

  • jQueryでulを動かしたい。

    javascript初心者です。 jQueryを使ってみようとしています。 ページを開くと、リストが左にゆっくり動くようにしたいのです。 cssは ul { position: absolute; margin-top: 0; margin-left: 490px; padding-left: 15px; height: 40px; list-style-type: none; } でページを開くとmargin-leftを460pxにゆっくり動かしたいのです。 調べてみるとanimateが使えそうなので、 window.onload = function(){   $("#contents ul").animate("marginLeft","460px"); } にしてみましたが、動きません・・・。 教えていただけるとありがたいです。 お願いしますm(__)m