list-style-position
Home>CSS>プロパティリファレンス>list-style-position
list-style-positionプロパティの役割
list-style-positionプロパティは、リストの各項目の先頭に表示されるマークの表示位置を指定します。
list-style-positionプロパティに設定できる値
| inside | マークをリスト項目の内側に表示する。 |
| outside | マークをリスト項目の外側に表示する。初期値。 |
list-style-positionプロパティの使い方
<ul style="list-style-position:inside">
<li>list-style-position:insideを指定すると、リスト項目の先頭に表示されるマークを、リスト項目の内側に表示する。</li>
<li>これにより、マークに回り込むようにテキストが表示される</li>
</ul>
- list-style-position:insideを指定すると、リスト項目の先頭に表示されるマークを、リスト項目の内側に表示する。
- これにより、マークに回り込むようにテキストが表示される
上記のサンプルでは、リスト項目の先頭に表示されるマークが、各リスト項目内に表示されるため、項目内で改行した場合に、マークと同じ位置から文章が表示されます。
outsideに指定すると、リスト項目よりも外側にマークが表示されるため、文字がインデントされたように表示されます。
関連リンク
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る（クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-8-21
〔Amazonの書籍紹介ページを開きます〕
|
実践的内容のCSS＋XHTMLの解説書。よくわからずにCSSを使っていた、というような初心者にとくにお奨めです。若干雑なつくりが気になりますが、ウェブ制作者のノウハウも知ることができます。 |
|
内容が正確で説明が丁寧なXHTMLとCSSの解説書。異なるブラウザ間での互換性の保持やアクセシビリティを考慮したつくりにも触れています。ボリュームがあり辞典的な使い方ができます。 |
|
HTML文書をつくる上で辞典の存在は欠かせません。ウェブ上で調べればいいと思う人もいるかもしれませんが、やはり傍らにおいてすぐに調べられるようにしておくと作業は早くなります。中級者向け。 |
|
ウェブデザイン、ウェブサイト作成の初心者～中級者向けの本。丁寧なつくりでHTMLの要素、CSSのプロパティ解説ページにおいても関連ページの表記を細かく行っています。 |
|
CSS、Flash、XHTML、Ajax等、ウェブデザインの全容を確認・勉強できる、ウェブデザイン初心者のための本。実際のコーディングに関しての説明は少なく、HTMLなどの知識は別途勉強する必要があります。 |
|
実際に一つのウェブサイトをつくる過程を経験しながらHTMLやCSSを理解していくスタイルをとっている本。初心者向けで非常にわかりやすい構成です。 |
|
中級者以降向け。独学でDreamweaver を使ってきた人など、実は便利な機能があることや正しい使い方を知らない、という人に向いています。本書はCS3を想定してかかれていますが、それ以外のバージョンであっても読むことはできます。 |
|
ウェブサイトの制作に沿った形で参照できるDreamweaver の解説本。逆引きリファレンスのような感覚で、知りたい箇所から読んで理解することができる、非常に分かりやすい本。初心者～中級者向け。 |
|
ウェブ制作の必携ツール・・・といったら大袈裟かもしれませんが、HTMLとCSSを一通り覚えたら、Dreamweaver を使って制作した方が圧倒的に楽になります。バージョンアップするごとに確実に使い勝手は向上しています。 |