ホームページ作成 - リストのマークを変更する（全体）

ホームページ作成ＴＯＰ > リスト > リストのマークを変更する（全体）

リストのマークを変更する（全体）

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

sampleは白丸にします。

sample

項目１行目
項目２行目

ＨＴＭＬ　type="種類"

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

ＨＴＭＬの場合の種類は下記の様になります。

表示	種類	書き方
	黒丸	`<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>項目１行目</li>
<li>項目２行目</li>
</ul>

こうなります

ホームページ作成ＴＯＰ > リスト > リストのマークを変更する（全体） > このページのＴＯＰ　▲

スタイルシート　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>項目１行目</li>
<li>項目２行目</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>項目１行目</li>
        <li>項目２行目</li>
        </ul>

 </body>
</html>

こうなります