listの練習

テキストエディタを使ってプロパティを設定してみましょう。
設定した値はlist-mihon.cssにコメントアウトとして記載してありますので、わからないときは確認してください。

リストのマークの種類や位置について

  1. 順番のあるリスト<ol>の<li>ですううぅぅぅぅぅぅぅぅぅ
  2. 順番のあるリスト<ol>の<li>です
  3. 順番のあるリスト<ol>の<li>です
1.#list1 ulに{list-style-type: none;}を設定
→ulの●がなくなる
2.#list1 ulに{list-style-image: url("list-image.png");}を設定
→ulの前に画像が表示される
3.#list1 ulに{list-style-position: inside;}を設定
→画像がリストの内側に入る。このとき改行している項目の内側に食い込むので文字が見にくいかも…
4.#list1 olに{list-style: upper-roman url("list-image.png") inside;}を設定
→ショートハンドでの記述。画像が優先されるため、upper-romanは表示されない。
5.4で指定した画像のファイル名を"list-image2.png"に変更
→画像が存在しないので無視され、upper-romanが適用される

擬似要素と組み合わせると様々な装飾が可能になります。是非色々と遊んでみて下さい。

  1. 順番のあるリスト<ol>の<li>です
  2. 順番のあるリスト<ol>の<li>です
  3. 順番のあるリスト<ol>の<li>です

list-style-type:の種類

塗りつぶされた円形

  • disc
  • disc
  • disc

中空円

  • circle
  • circle
  • circle

塗りつぶされた四角形

  • square
  • square
  • square

1から始まる数値

  1. decimal
  2. decimal
  3. decimal

先頭がゼロ埋めされた数値

  1. decimal-leading-zero
  2. decimal-leading-zero
  3. decimal-leading-zero

ローマ数字(小文字)

  1. lower-roman
  2. lower-roman
  3. lower-roman

ローマ数字(大文字)

  1. upper-roman
  2. upper-roman
  3. upper-roman

古代ギリシャ文字(小文字)

  1. lower-greek
  2. lower-greek
  3. lower-greek

ASCII文字(小文字)

  1. lower-alpha
  2. lower-alpha
  3. lower-alpha

ASCII文字(小文字)

  1. lower-latin
  2. lower-latin
  3. lower-latin

ASCII文字(大文字)

  1. upper-alpha
  2. upper-alpha
  3. upper-alpha

ASCII文字(大文字)

  1. upper-latin
  2. upper-latin
  3. upper-latin

ひらがなの辞書順

  1. hiragana
  2. hiragana
  3. hiragana

カタカナの辞書順

  1. katakana
  2. katakana
  3. katakana

ひらがなのいろは順

  1. hiragana-iroha
  2. hiragana-iroha
  3. hiragana-iroha

カタカナのいろは順

  1. katakana-iroha
  2. katakana-iroha
  3. katakana-iroha

日本語の日常的な数値

  1. japanese-informal 
  2. japanese-informal 
  3. japanese-informal 

十二支

  1. cjk-earthly-branch
  2. cjk-earthly-branch
  3. cjk-earthly-branch

十干

  1. cjk-heavenly-stem
  2. cjk-heavenly-stem
  3. cjk-heavenly-stem

任意の文字

  1. "★"
  2. "★"
  3. "★"

韓国語のハングルの数値

  1. korean-hangul-formal
  2. korean-hangul-formal
  3. korean-hangul-formal

韓国語の漢数字

  1. korean-hanja-informal
  2. korean-hanja-informal
  3. korean-hanja-informal

日常的な繁体字中国語の数値

  1. cjk-idasseographic
  2. cjk-ideographic
  3. cjk-ideographic

公的な簡体字中国語の数値

  1. simp-chinese-formal
  2. simp-chinese-formal
  3. simp-chinese-formal

日常的な簡体字中国語の数値

  1. simp-chinese-informal
  2. simp-chinese-informal
  3. simp-chinese-informal

公的な繁体字中国語の数値

  1. trad-chinese-formal
  2. trad-chinese-formal
  3. trad-chinese-formal

日常的な繁体字中国語の数値

  1. trad-chinese-informal
  2. trad-chinese-informal
  3. trad-chinese-informal

アラビア－インド数字

  1. arabic-indic
  2. arabic-indic
  3. arabic-indic

伝統的なヘブライ語の数値

  1. hebrew
  2. hebrew
  3. hebrew

伝統的なアルメニア語の数値

  1. armenian
  2. armenian
  3. armenian

アルメニア語の小文字の数値

  1. lower-armenian
  2. lower-armenian
  3. lower-armenian

伝統的なジョージア語の数値

  1. georgian
  2. georgian
  3. georgian

ベンガル語の数値

  1. bengali
  2. bengali
  3. bengali

デーヴァナーガリーの数値

  1. devanagari
  2. devanagari
  3. devanagari

グジャラート語の数値

  1. gujarati
  2. gujarati
  3. gujarati

グルムキー語の数値

  1. gurmukhi
  2. gurmukhi
  3. gurmukhi

カンナダ語の数値

  1. kannada
  2. kannada
  3. kannada

ラオス語の数値

  1. lao
  2. lao
  3. lao

マラヤーラム語の数値

  1. malayalam
  2. malayalam
  3. malayalam

モンゴル語の数値

  1. mongolian
  2. mongolian
  3. mongolian

カンボジア/クメール語の数値

  1. khmer
  2. khmer
  3. khmer

ミャンマー(ビルマ語)の数値

  1. myanmar
  2. myanmar
  3. myanmar

オリヤー語の数値

  1. oriya
  2. oriya
  3. oriya

ペルシャ語の数値

  1. persian
  2. persian
  3. persian

タミル語の数値

  1. tamil
  2. tamil
  3. tamil

テルグ語の数値

  1. telugu
  2. telugu
  3. telugu

タイ語の数値

  1. thai
  2. thai
  3. thai

チベット語の数値

  1. tibetan
  2. tibetan
  3. tibetan

他にもたくさんあるのですが、ブラウザ独自拡張のものが多いようです。
後半に掲載したものはあまり使う機会はなさそうですが、必ずいくつかのブラウザで表示できるか確認して下さい。