ホーム＞コース別ガイド一覧＞リストの行頭の記号を変更しましょう！
リストの行頭の記号を変更しましょう！（list-style-type プロパティ） |
 
|
使用プロパティ セレクタ { list-style-type: 長さ; }
CSS一覧プロパティ辞典 … list-style-type プロパティ
list-style-type プロパティを使うと、リストの行頭に付く記号を変更できます。値は、下の「list-style-typeプロパティの値」で説明しています。また、list-style-type プロパティにはさまざまな値が用意されていますが、どのブラウザも完全には対応していません。詳しくは CSS 一覧プロパティ辞典の list-style-type プロパティ プロパティをご覧ください。
[list-style-typeプロパティの値]
| 値(読み) |
値の効果 |
表示例 |
none
(ナン) |
行頭に付く記号を表示しない |
- リスト
|
disc
(ディスク) |
塗りつぶされた丸 |
- リスト
|
circle
(サークル) |
中が白い丸 |
- リスト
|
square
(スクエア) |
塗りつぶされた四角 |
- リスト
|
decimal
(デシマル) |
数字 |
- リスト
|
decimal-leading-zero
(デシマル リーディング ゼロ) |
頭に0
を付けた数字 |
01. リスト |
lower-roman
(ローワー ローマン) |
小文字のローマ数字 |
- リスト
|
upper-roman
(アッパー ローマン) |
大文字のローマ数字 |
- リスト
|
lower-alpha
(ローワー アルファ) |
小文字のアルファベット |
- リスト
|
upper-alpha
(アッパー アルファ) |
大文字のアルファベット |
- リスト
|
lower-latin
(ローワー ラテン) |
小文字のラテン語
lower-alphaと同じ |
- リスト
|
upper-latin
(アッパー ラテン) |
大文字のラテン語
upper-latinと同じ |
- リスト
|
lower-greek
(ローワー グリーク) |
小文字のギリシア文字 |
α. リスト |
hebrew
(へブルー) |
ヘブライ文字の数字 |
 . リスト
|
georgian
(ジョージアン) |
グルジア文字の数字 |
 . リスト
|
armenian
(アルメニアン) |
アルメニア文字の数字 |
 . リスト
|
cjk-ideographic
(シージェイケイ イデオグラフィック) |
漢数字 |
一. リスト |
hiragana
(ヒラガナ) |
ひらがな |
あ. リスト |
katakana
(カタカナ) |
カタカナ |
ア. リスト |
hiragana-iroha
(ヒラガナ イロハ) |
ひらがなのいろは順 |
い. リスト |
katakana-iroha
(カタカナ イロハ) |
カタカナのいろは順 |
イ. リスト |
ol 要素の行頭に付く記号を list-style-type プロパティを使用し変更しましょう！list-style-type プロパティの値を「upper-alpha」として、元の「1、2、3…」というリストの番号を「A、B、C…」という大文字のアルファベットにします。記述例の赤い文字は ol 要素に list-style-type プロパティを指定しています。また青い文字は実際に番号付きのリストを作成しています。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
body { background-color: moccasin;}
h1 {
background-color: orange;
text-align: center;
}
ol {
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするためのワンポイントを紹介します！</p>
<p>おいしい<b>チャーハン</b>の作り方</p>
<img src="sample.jpg" alt="チャーハン">
<ol>
<li>強火でフライパンを少し暖めます。</li>
<li>大さじ一杯の油を入れ、ひき肉を炒めます。</li>
<li>塩コショウでひき肉に下味をつけます。</li>
<li>ごはんを入れ、フライパンに入れましょう。</li>
<li>etc…</li>
</ol>
</body>
</html> |
|
使用例の表示
[list-style-typeプロパティ適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするためのワンポイントを紹介します！
おいしいチャーハンの作り方
- 強火でフライパンを少し暖めます。
- 大さじ一杯の油を入れ、ひき肉を炒めます。
- 塩コショウでひき肉に下味をつけます。
- ごはんを入れ、フライパンに入れましょう。
- etc…
|
|
 |
[list-style-typeプロパティ適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするためのワンポイントを紹介します！
おいしいチャーハンの作り方
- 強火でフライパンを少し暖めます。
- 大さじ一杯の油を入れ、ひき肉を炒めます。
- 塩コショウでひき肉に下味をつけます。
- ごはんを入れ、フライパンに入れましょう。
- etc…
|
|
このように「1、2、3…」というリストの番号が「A、B、C…」という大文字のアルファベットによるリストとなります！
