リストのインデント

リストの行頭

list-style-position: inside;
マーカーがリスのト内側に表示され、リストの２行目以降が上がります。リスト全体の行頭が揃います。
list-style-position: outside;
マーカーがリストの外側に表示され、リストの２行目以降を揃えて表示します。（デフォルトはoutsideです。）
<ul><ol>タグ共通です。
方法は直接タグに記述するか、スタイルシートに記述します。

タグに直接記述　↓↓
<ul style="list-style-position: inside">
<ul style="list-style-position: outside">
<ol style="list-style-position: inside">
<ol style="list-style-position: outside">

スタイルシートに記述　↓↓

◆<head>と</head>の間に下記のタグを入れます。
<style type="text/css">
<!--
ul {
list-style-position: inside;
}
-->
</style>

サンプル−list-style-position: inside　全体の行頭が揃う

<ul style="list-style-position: inside">
<li>項目その１</li>
<li>項目その２</li>
<li>項目その３</li>
</ul>

ウェブ上での見え方　↓↓
  • 項目その１、リスト全体の行頭が揃う。（改行しても行頭は揃う）
  • 項目その２、リスト全体の行頭が揃う。（改行しても行頭は揃う）
  • 項目その３、リスト全体の行頭が揃う。（改行しても行頭は揃う）

inside　リストマークに画像を使用
<ul style="list-style-position: inside; list-style-image:url(sample.gif)">
<li>項目その１</li>
<li>項目その２</li>
<li>項目その３</li>
</ul>

ウェブ上での見え方　↓↓
  • 項目その１、リスト全体の行頭が揃う。（改行しても行頭は揃う）
  • 項目その２、リスト全体の行頭が揃う。（改行しても行頭は揃う）
  • 項目その３、リスト全体の行頭が揃う。（改行しても行頭は揃う）

サンプル−list-style-position: outside　リストの2行目から揃う

<ul style="list-style-position: outside">
<li>項目その１</li>
<li>項目その２</li>
<li>項目その３</li>
</ul>

ウェブ上での見え方　↓↓
  • 項目その１、リスト２行目から揃う。（改行も可）
  • 項目その２、リスト２行目から揃う。（改行も可）
  • 項目その３、リスト２行目から揃う。（改行も可）

outside　リストマークに画像を使用
<ul style="list-style-position: outside; list-style-image:url(sample.gif)">
<li>項目その１</li>
<li>項目その２</li>
<li>項目その３</li>
</ul>

ウェブ上での見え方　↓↓
  • 項目その１、リスト２行目から揃う。（改行も可）
  • 項目その２、リスト２行目から揃う。（改行も可）
  • 項目その３、リスト２行目から揃う。（改行も可）

上記のサンプルでは、あえて枠線をつけました。サンプルを見ると解ると思いますが、リストを作ると左に余白ができます。
この余白をなくする方法です。


関連項目・関連ページ
マーク付きリスト 番号付きリスト 定義型リスト リストの左余白をなくする方法 CSS・リストで作るメニュー


●当サイトのソースは、IE6.0＋のみ動作確認をしております。 それ以外のブラウザでは同じように表示されない場合がございます。ご了承下さい。


★skip ページtop