■list-style-position（P.137）
■list-style（P.138）
参照項目
記述例 <head>
<style type="text/css">
<!--li {<!--list-style-image:
url(image/entry.gif);line-height:30px}
-->
</style>
</head>
<ul><li>M-1.Catch22</li>
<li>M-2.PLAYMATE AT HANOI</li>
<li>M-3.S</li>
<li>M-4.CORCLE/LINE~HARD CORE PEACE</li>
<li>M-5.Hey Joe</li>
<li>M6.MIRROR BALLS</li>
</ul>
リストマークの画像を指定する
リスト要素 継承あり
役割・機能
適用 継承の有無
list-style-image
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：画像ファイルのURI 文
書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定
書 式
表示例
リストマークに使用する画像を、「url(画像ファイルのパス)」という形で 指定します。
解説
セレクタ{ list-style-image: 値 }
記述例 <head>
<style
type="text/css"><!--li {type="text/css"><!--list-style-position: inside}-->
</style>
</head>
<h3>好きな作家</h3>
<ul>
<li>ライナー・チムニクはポーランドの絵本作家で、その絵は子 供向けのきれいな絵というより、簡潔な文章にマッチした簡潔な絵 です。『熊とにんげん』は彼が24歳のときの作品。</li>
<li>ジョン・アップダイクは長いこと好きな作家の一人です。な ぜだか、彼のポートレート絵葉書まで持ってる。なんか、ミーハー なファンな感じですね。ちなみに、43歳のときの写真だそうです。
まあ、ハンサムなのかなって普通に思うくらいの顔立ち。</li>
</ul>
リストマークの表示位置を指定する
リスト要素 継承あり
役割・機能
適用 継承の有無
list-style-position
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：以下のキーワード
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定 書 式
表示例
リストマークの表示位置をinside（テキストの枠内）、outside（テキス トの枠外）で指定します。
解説
セレクタ{ list-style-position: 値 }
inside：テキスト枠内に入れる outside：テキスト枠外に表示する
■list-style-image（P.136）
■list-style（P.138）
参照項目
記述例 <head>
<style
type="text/css"><!--li {type="text/css"><!--list-style:url(image/entry.gif) outside}-->
</style>
</head>
<h3>好きな作家</h3>
<ul>
<li>ライナー・チムニクはポーランドの絵本作家で、その絵は子 供向けのきれいな絵というより、簡潔な文章にマッチした簡潔な絵 です。『熊とにんげん』は彼が24歳のときの作品。</li>
<li>ジョン・アップダイクは長いこと好きな作家の一人です。な ぜだか、彼のポートレート絵葉書まで持ってる。なんか、ミーハー なファンな感じですね。ちなみに、43歳のときの写真だそうです。
まあ、ハンサムなのかなって普通に思うくらいの顔立ち。</li>
</ul>
リストマークの設定をまとめて行う
リスト要素 継承あり
役割・機能
適用 継承の有無
list-style
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：list-style-image、list-style-positionのそれぞれで指定可能 な値
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定
書 式
表示例
リストマークのスタイル設定をまとめて行います。値は半角スペースで 区切って指定します。この場合、値の順序は問われません。
解説
■list-style-image（P.136）
■list-style-position（P.137）
参照項目
セレクタ{ list-style: 値 }
記述例 <table border="1" bordercolor="#0099cc"
style="width:300px;table-layout:fixed">
<tr>
<td>タイトル</td>
<td>発売日</td>
<td>種類</td>
</tr>
<tr>
<td>MUSICAL FROM CHAOS</td>
<td>2000.6.25</td>
<td>DVD</td>… 以下略 表の表示方法を指定する
table要素 継承なし
役割・機能
適用 継承の有無
table-layout
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：以下のキーワード
auto：自動 fixed：固定値を使用する
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定 書 式
表示例
表の表示方法を指定します。固定値を指定すると（合わせてwidthの 指定が必要です）、中身の量に関らず、指定された幅で表示されます。
widthの指定を組み合わせて「fixed」とすることで、表の中身全部を 読み込む前にブラウザがレイアウトを始めることができます。
解説
■border-collapse（P.140）
■border-spacing（P.141）
参照項目
セレクタ{ table-layout: 値 }
記述例 <table border="1" bordercolor="#0099cc"
style="border-collapse:collapse">
<tr>
<td>タイトル</td>
<td>発売日</td>
<td>種類</td>
</tr>
<tr>
<td>MUSICAL FROM CHAOS</td>
<td>2000.6.25</td>
<td>DVD</td>… 以下略 セルの枠線の表示を指定する
table要素 継承あり
役割・機能
適用 継承の有無
border-collapse
Win･････MacWin･･･････････････････5.5/657 Mac･････････7 Win･････7/8.5 Mac･･･････1/2指定可能な値：以下のキーワード
collapse：セルの枠線を重ねる separate：セルの枠線を重ねない
文 書 構 造
表 示・ 配 置
リ ス ト・ 表・ フ レ ー ム
リン ク・ 画 像・ フォ ー ム
テ キ スト
・罫 線 の設 定
背 景 の 設 定
配 置 の 指 定
リ ス ト・ 表 の 設 定
書 式
表示例
セルの枠線の表示を指定します。
解説
セレクタ{ border-collapse: 値 }
■table-layout（P.139）
■border-spacing（P.141）
参照項目