No.2ベストアンサー
- 回答日時:
ulとolは、順不同リストと序列リストです。
意味がまったく異なります。どのようにデザインするかとは切り離して、そのリストの項目の意味からマークアップは判断すべきです。
⇒2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
これは、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>
・・・という文書構造に対して
第1章 HTML
第1章 1項 HTMLの歴史
第1章 1項 --1 CERN
第1章 1項 --2 SGML
なんて・・・もちろん画像でもOK
この回答への補足
補足になってしまいますが、調べたところ
>:before(擬似クラス要素)と、contentプロパティ、countを組み合わせます。
これが私の求めていた方法だと思いました。
的確な回答有難うございました。
>この自動的につく記号は決められたもの以外
この決められたものは
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
の事をいったつもりです。
後半のご説明は私の知識では追いつかなかったので、調べてみようと思います。
回答有難うございました。
No.1
- 回答日時:
【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なら1、2、・・・)も指定すれば同じになります。
それ以外のところにこの二つには機能的な違い、動作の違いはあるのでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<div id="container">の使いか...
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
HTML属性での「""」 「''」違い
-
1サイト内にHTML5とXHTMLが混在...
-
h1に自分自身へのリンクを張...
-
inline-blockを上下中央揃えに...
-
<div>があれば</div>は必ずない...
-
文字の下線を画像に変えて表示...
-
<div>テキスト</div>
-
ヘッダーを左右に二分割する方...
-
divを横に並べる方法
-
「見出し画像+小見出し」と「見...
-
ヘッダーとフッターだけ背景を...
-
html5のブラウザの対応状況 ht...
-
line-height指定で発生する余白...
-
コンピューターの画像ブロック
-
XHTMLでループ処理のやり方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
html の divとtable の役割
-
<div id="container">の使いか...
-
1時間30分を簡単に表したいで...
-
min-heightとheightの違いについて
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
div要素が重なってします
-
divを横に並べる方法
-
スペースを使わず文字位置を揃...
-
<!-- #BeginLibraryItemとは
-
HTMLのJIS規格について
-
スライド部分のリンクが貼れな...
-
セクションをdivで囲むと見出し...
-
要素間、要素内に隙間が空く
-
hタグの右横に画像を表示
-
inline-blockをネストすると表...
-
divとpの使いわけ
-
グリッドレイアウトで"auto-fit...
おすすめ情報