箇条書きの装飾【list-style-type】:CSS入門

ブログが作りたい!CSS入門 > 箇条書きの装飾【list-style-type】:CSS入門

箇条書きの装飾【list-style-type】:CSS入門

箇条書きの装飾【list-style-type】:CSS入門

CSS入門(11)

今回は、箇条書きタグ(<ul>、<li>)の装飾を行います。「list-style-type」を使えば、いろいろな種類のリストマークが利用できます。

お話は、次の順番で進みます。

▲ページの先頭に戻る

リストマークを変えてみる

1:前回までの状態

(01)

はじめに、前回までの状態を確認しておきましょう。<table>タグ内の背景色の変更を通して、継承、子孫セレクタという書き方を覚えました。

ブラウザで表示

CSSコードは、次のようになります。

▲ページの先頭に戻る

2:箇条書きを装飾する

(02)

今回は、「list-style-type」を使って、箇条書きのリストマークの装飾を行います。(黒丸になっている箇所です)

箇条書きのリストマーク

(03)

けっこう、いろいろなマークが用意されていますが、実際によく使うのは、次の3つくらいかもしれません。この3つを試してみましょう。

  • 黒丸(初期値)
  • アラビア数字
  • なし

(04)

黒丸は、もともと箇条書き(<li>タグ)に設定されている初期値です。指定する方法は、「list-style-type」に、「disc」と書きます。

ul li { list-style-type: disc; }

初期値なら覚える必要がないと思うかもしれませんが、そうとも限りません。

list-style-typeにdisc

(05)

次は、アラビア数字(1、2、3、4、5・・・)です。指定する方法は、「list-style-type」に、「decimal」と書きます。

ul li { list-style-type: decimal; }

箇条書きの順番を書き直すとき、手書きだと数字を書き直さなければいけませんが、「decimal」を使うと自動的に振り直されるので楽です。

list-style-typeにdecimal

(06)

最後に、何も表示しない場合です。指定する方法は、「list-style-type」に、「none」と書きます。

ul li { list-style-type: none; }

list-style-typeにnone

▲ページの先頭に戻る

3:decimalにしておく

(07)

変更しないのもつまらないので、とりあえず、decimalにしておきます。追加書きしておきましょう。

▲ページの先頭に戻る

「list-style-type」一覧

「list-style-type」で使えるリストマークの一覧です。

いろいろございますが、css1の9種類だけを利用する方がよろしいようです。どうやら、css2の方は、次のような傾向があります。

  • ほぼ、IE6、7が対応していない。
  • 日本語のものは、css2.1で削除されるとか。

1:css1(9種)

none

  • なし
  • なし
  • なし

disc

  • 黒丸
  • 黒丸
  • 黒丸

circle

  • 白丸
  • 白丸
  • 白丸

square

  • 黒色の四角
  • 黒色の四角
  • 黒色の四角

decimal

  • アラビア数字
  • アラビア数字
  • アラビア数字

lower-roman

  • ローマ数字(小文字)
  • ローマ数字(小文字)
  • ローマ数字(小文字)

upper-roman

  • ローマ数字(大文字)
  • ローマ数字(大文字)
  • ローマ数字(大文字)

lower-alpha

  • アルファベット(小文字)
  • アルファベット(小文字)
  • アルファベット(小文字)

upper-alpha

  • アルファベット(大文字)
  • アルファベット(大文字)
  • アルファベット(大文字)

▲ページの先頭に戻る

2:css2(12種)

lower-latin

  • lower-alphaと同じ
  • lower-alphaと同じ
  • lower-alphaと同じ

upper-latin

  • upper-alphaと同じ
  • upper-alphaと同じ
  • upper-alphaと同じ

decimal-leading-zero

  • ゼロ(0)付きアラビア数字
  • ゼロ(0)付きアラビア数字
  • ゼロ(0)付きアラビア数字

hebrew

  • ヘブライ数字
  • ヘブライ数字
  • ヘブライ数字

georgian

  • グルシア数字
  • グルシア数字
  • グルシア数字

georgian

  • グルシア数字
  • グルシア数字
  • グルシア数字

armenian

  • アルメニア数字
  • アルメニア数字
  • アルメニア数字

cjk-ideographic

  • 漢数字
  • 漢数字
  • 漢数字

hiragana

  • ひらがな
  • ひらがな
  • ひらがな

katakana

  • カタカナ
  • カタカナ
  • カタカナ

hiragana-iroha

  • いろはにほへと
  • いろはにほへと
  • いろはにほへと

katakana-iroha

  • イロハニホヘト
  • イロハニホヘト
  • イロハニホヘト

lower-greek

  • ギリシャ数字(小文字)
  • ギリシャ数字(小文字)
  • ギリシャ数字(小文字)

ブラウザ対応状況などのお話については、W3Gさんを参考にさせていただきました。ありがとうございました。

▲ページの先頭に戻る

次回予告

次回は、箇条書きのリストマークの箇所に画像を使う【list-style-image】について書いています。

▲ページの先頭に戻る

関連記事

CSSに関連する記事を、ご紹介します。

1:カスタマイズ前

2:CSSの基本的なこと

3:色の指定

4:罫線の指定

5:間隔(余白)の指定

6:継承と子孫セレクタ

7:箇条書き(リスト)

8:文字(フォント)の指定

9:idセレクタ、classセレクタ

10:文章を読みやすくする

11:文字の中央揃え(センタリング)

12:レイアウト

13:tableの中央揃え(センタリング)

14:CSSで飾る

15:まとめ

▲ページの先頭に戻る

作成日:2008/04/19 更新日:2008/04/19

« 「継承と子孫セレクタとは?」|「箇条書きに画像【list-style-image】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/273-5aaa9bf1
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて