ホーム＞HTMLリファレンス（アルファベット検索）＞list-style-positionプロパティ
list-style-position プロパティ …リストの記号の位置を指定する
使用プロパティ
 |
list-style-position: 値; |
対象となる
要素 |
リストの項目 |
継承 |
する
|
値 |
inside、outside |
 |
      |
 解説
 list-style-position プロパティを使えば、リストの前に付くリストマーク（行頭記号）の表示位置を変更することができます。値に「inside」を指定すると、リストマークが文章の先頭に配置されます。また、「outside」を指定すると通常通り、文章の外側に表示されます。
リスト関連のプロパティをまとめて指定したい場合は、list-style プロパティを使用します。
|
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
ul.sample1 {
list-style-image: url(image.gif);
list-style-position: outside;
}
ul.sample2 {
list-style-image: url(image.gif);
list-style-position: inside;
}
</style>
</head>
<!--ページの本文-->
<body>
<p>リストマークの表示位置を通常通り表示します。</p>
<ul class="sample1">
<li>通常通り要素の外に<br>リストマークが表示されます。</li>
</ul>
<p>リストマークの表示位置を変更します。</p>
<ul class="sample2">
<li>要素の中に<br>リストマークが表示されます。</li>
</ul>
</body>
|
|
[ブラウザでの表示例]
| HOME PAGE ZERO ガイド |
|
リストマークの表示位置を通常通り表示します。
リストマークの表示位置を変更します。
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他
