ホームページ作成(リストを作りたい)
無料!発信中!メール情報誌!

ホームページ作成しよう!
HTML〜スタイルシート

ホームページ作成TOP > リスト > リストのマークを変更する(全体)
リストのマークを変更する(全体)

箇条書等に使用されるリストの『マーク』を、一括して変更する方法です。

sampleは白丸にします。

sample
  • 項目1行目
  • 項目2行目
HTML type="種類"

リストマークを、一括して変更するには、全体を表す<ul>type="種類"を設定する事で、そのリスト全体のマークが変更されます。

HTMLの場合の種類は下記の様になります。

表示種類書き方
ホームページ作成(リスト黒丸)黒丸<ul type="disk">〜</ul>
ホームページ作成(リスト白丸)白丸<ul type="circle">〜</ul>
ホームページ作成(リスト四角)四角<ul type="square">〜</ul>
ホームページ作成(リスト数字)数字<ol>〜</ol>
ホームページ作成(リストローマ数字)ローマ数字(小文字)<ol type="i">〜</ol>
ホームページ作成(リストローマ数字)ローマ数字(大文字)<ol type="i">〜</ol>
ホームページ作成(リストアルファベット)アルファベット数字(小文字)<ol type="a">〜</ol>
ホームページ作成(リストアルファベット)アルファベット数字(大文字)<ol type="a">〜</ol>
書き方は

<ul type="circle">
<li>項目1行目</li>
<li>項目2行目</li>
</ul>
こうなります
IE7
IE
Firefox
Opera

ホームページ作成TOP > リスト > リストのマークを変更する(全体) > このページのTOP ▲

スタイルシート list-style:種類

リストのマークを一括でスタイルシートにて変更するには、全体を表す<ul>list-style:種類を設定する事で、そのリスト全体のマークが変更されます。

スタイルシートの場合の種類は下記の様になります。

表示種類書き方
ホームページ作成(リスト黒丸)黒丸list-style:disk
ホームページ作成(リスト白丸)白丸list-style:circle
ホームページ作成(リスト四角)四角list-style:square
ホームページ作成(リスト数字)数字list-style:decimal
ホームページ作成(リストローマ数字)ローマ数字(小文字)list-style:lower-roman
ホームページ作成(リストローマ数字)ローマ数字(大文字)list-style:upper-roman
ホームページ作成(リストアルファベット)アルファベット数字(小文字)list-style:lower-alpha
ホームページ作成(リストアルファベット)アルファベット数字(大文字)list-style:upper-alpha
ホームページ作成(リストなし)なしlist-style:none
ホームページ作成(リスト画像)画像list-style:url(画像)
要素に直接書く
書き方は

<ul style="list-style:circle">
<li>項目1行目</li>
<li>項目2行目</li>
</ul>
headに書く
書き方は

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

        ul   { list-style:circle;}

 -->
 </style>
 </head>
 <body>

        <ul>
        <li>項目1行目</li>
        <li>項目2行目</li>
        </ul>

 </body>
</html>
こうなります
IE7
IE
Firefox
Opera

ホームページ作成TOP > リスト > リストのマークを変更する(全体) > このページのTOP ▲