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で質問しましょう!
似たような質問が見つかりました
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- Excel(エクセル) 別シートの表の値を参照したい 2 2022/03/30 15:11
- Visual Basic(VBA) VBAでの共有パスにつきまして 1 2023/03/04 17:24
- WordPress(ワードプレス) Wordpressの記事URLを自由に決めたい 3 2022/06/02 12:05
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- Visual Basic(VBA) VBA シート上にドロップダウンリストを作り、予め指定値をセットしたいのですが 1 2023/03/25 15:15
- 大学・短大 C言語線形リストの問題です 3 2022/12/22 00:45
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
HTML属性での「""」 「''」違い
-
オシャレな区切り線はありませ...
-
div要素が重なってします
-
ブログのサイドバーが下にくる
-
htmlの見出しタグ(<h1>)の次...
-
DD,DT,DDを横並び。paddingとma...
-
背景画像に全体または部分的に...
-
複数のボタンを等間隔に、かつ...
-
XHTMLでループ処理のやり方
-
インラインフレームのページ内...
-
footerのclear:bothが効きません
-
divの中に外部のHTMLを埋め込む
-
モバイルサイト用のタブ型メニュー
-
divとpの使いわけ
-
HTML5の終端タグ「 />」について
-
inline-blockをネストすると表...
-
横並びdivで一部の初期高さがず...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
min-heightとheightの違いについて
-
HTML5 iframe の代わり
-
divの中に外部のHTMLを埋め込む
-
3カラムレイアウトで「常に残り...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
-
reuterのScraypingで不思議な現...
-
htmlの見出しタグ(<h1>)の次...
-
1サイト内にHTML5とXHTMLが混在...
-
inline-blockをネストすると表...
-
html5でheaderの中にnav
-
<!-- #BeginLibraryItemとは
おすすめ情報