東京・大阪・名古屋・福岡・仙台・札幌で開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

6.6 リストのスタイルに関するプロパティ

リストのスタイルに関するプロパティ

6.6 リストのスタイルに関するプロパティ

リストとは、複数の項目を列挙したものです。list-style-typeプロパティは、そのリストの先頭に表示される記号の種類を定義するプロパティです。list-style-typeプロパティに設定できる値には、disc、circle、square、noneなどがあります。このプロパティはli要素などに適用できます。

list-style-typeプロパティの代表的な値には、以下のようなものがあります。

値の内容

disc

黒丸(デフォルト)

circle

白丸

square

四角

decimal

算用数字

decimal-leading-zero

先頭に0をつけた算用

lower-roman

ローマ数字の小文字

upper-roman

ローマ数字の大文字

lower-alpha または lower-latin

英文字の小文字

upper-alpha または upper-latin

英文字の大文字

表 6.6.1 : list-style-typeプロパティの値

スタイルを記述して実際の表示を確認しましょう。

①ソースフォルダ    :webpage/ch06
②ファイル名      :liststyle.html

➢ liststyle.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>list-style-type プロパティ</title>
<style>
	ul.square {
		list-style-type: square;
	}
	ol.upper {
		list-style-type: upper-alpha;
	}
</style>
</head>
<body>
<ul>
<li>リスト項目A</li>
<li>リスト項目B</li>
</ul>
<ul class="square">
<li>リスト項目A</li>
<li>リスト項目B</li>
</ul>
<ol>
<li>リスト項目1</li>
<li>リスト項目2</li>
</ol>
<ol class="upper">
<li>リスト項目1</li>
<li>リスト項目2</li>
</ol>
</body>
</html>
        

1つ目のul要素にはスタイルを指定していないため、ul要素の初期値のlist-style-type: disc;が適用され、黒丸が表示されます。2つ目のul要素にはlist-style-type: square;を指定しているので、四角が表示されます。

ulの変わりにolを使うと、先頭に番号がつきます。この番号は<li>が増えると自動的に「1,2,3」と割り振られていきます。

1つ目のol要素にはスタイルを指定していないため、ol要素の初期値のlist-style-type: decimail;が適用され、算用数字が表示されます。2つ目のol要素にはlist-style-type: upper-alpha;を指定しているので、英文字の大文字が表示されます。

NEXT>> 6.7 カーソル形状に関するプロパティ

HTMLとCSSの入門 目次

ご不明点はお問い合わせフォームからご連絡ください。

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.