html リストのマークについて

質問

リストのマークについて質問です。

１、ulとolがありますがlist-style-typeを指定すると、この二つのタグに機能的違いは無くなるのでしょうか。

２、list-style-typeで指定すると、リストを増やせば自動で記号がつきますが、この自動的につく記号は決められたもの以外の、自由な文字や記号を指定することはできないでしょうか。

回答No.2

ORUKA1951 · ベストアンサー

ulとolは、順不同リストと序列リストです。意味がまったく異なります。
どのようにデザインするかとは切り離して、そのリストの項目の意味からマークアップは判断すべきです。
　⇒2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
　これは、HTMLを作成する最も基本的な部分です。どちらを使うべきかは、あなたでないとわかりません。

＞この自動的につく記号は決められたもの以外
　スタイルシートで用意されているのは
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
です。それぞれは調べてください。
　⇒'list-style-type'( http://www.w3.org/TR/CSS2/generate.html#lists )
CSS2にあった"hebrew", "cjk-ideographic", "hiragana", "katakana", "hiragana-iroha", "katakana-iroha"はCSS2.1で削除されました。

　スタイルシートで、画像を指定する場合ulだとlist-style-imageで指定できます。

　olのように、何回目かによって画像を変更していく場合は、:before(擬似クラス要素)と、contentプロパティ、countを組み合わせます。この場合は画像ではなく、何章何項のように加えることも良く行われています。
<div class="section">
　<h2>HTML<h2>
　<div class="section">
　　<h3>HTMLの歴史</h3>
　　<div class="section">
　　　<h4>CERN</h4>
　　　<h4>SGML</h4>
・・・という文書構造に対して
第１章 HTML
　第１章　1項 HTMLの歴史
　　第１章　1項 --1 CERN
　　第１章　1項 --2 SGML
なんて・・・もちろん画像でもOK

お礼

＞この自動的につく記号は決められたもの以外

この決められたものは
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
の事をいったつもりです。

後半のご説明は私の知識では追いつかなかったので、調べてみようと思います。

回答有難うございました。

補足

補足になってしまいますが、調べたところ
＞:before(擬似クラス要素)と、contentプロパティ、countを組み合わせます。

これが私の求めていた方法だと思いました。
的確な回答有難うございました。

回答No.1

tkmojo

【1】
まず、ulやolはhtml、list-style-typeはcssです。
そして、htmlは文書の構造を示すものでcssは装飾です。
ですので、list-style-typeで装飾を変更しても ulやolの意味が変わる事はありません。

ulは「並列列挙リスト」と呼ばれ、いわゆる箇条書きです。
olは「順序付きリスト」です。順番が入れ替わって成立しないようなリストはolに当たります。

例えば、料理の説明をするとして、材料のリストはul、手順のリストはolを使います。

【2】
自由な文字や記号を使用したい場合にはcssで背景画像を指定するのが一般的です。
その場合、list-style-typeは「none」と指定します。

お礼

回答有難うございます。
自由に決める指定はできないのですね。
画像による方法を検討します。

補足

材料と手順についての理解はできています。
ただ、それはマークアップする人が自分のために使い分ければいいのであって、私が聞きたいのは”機能的”な違いです。
olとulではlist-style-typeをしなけば自動的にそれぞれ違うマークがつきます。
しかしlist-style-typeを指定すれば、その記号も同じになりますし、項目が増えた時の動作（decimalなら１、２、・・・）も指定すれば同じになります。
それ以外のところにこの二つには機能的な違い、動作の違いはあるのでしょうか。