サイト内検索
...スタイルシート(css)...
スタイルシート・リスト
リスト項目の間隔
- リスト項目の間隔は、marginプロパティを指定します。
- ul 要素(ol 要素)に指定すると、リスト全体の余白の指定ができます。
- [使い方]
- .sample li{
margin-bottom: 15px;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| margin: | ; |
「数値+単位」（例・・100px）を指定します。
単位は、「px」または「%」を指定します。 auto（自動） |
| プロパティ名 | 値
（サンプル） |
説明 |
|---|---|---|
| margin-bottom: | 30px; | 下のマージン(余白)を指定します。 |
| margin-left: | 40px; | 左のマージン(余白)を指定します。 |
サンプル
[ｈｅａｄの中]
<style type="text/css"><!--
.sample1 li{
margin-bottom: 15px;
}
.sample2 li{
margin-bottom: auto;
}
-->
</style>
[ｂｏｄｙの中]
<ul><li>カサブランカ・ユリ科</li>
<li>モダンローズ・バラ科</li>
<li>胡蝶蘭・ラン科</li>
</ul>
<ul class="sample1">
<ul>
<li>カサブランカ・ユリ科</li>
<li>モダンローズ・バラ科</li>
<li>胡蝶蘭・ラン科</li>
</ul>
<ul class="sample2"> <ul>
<li>カサブランカ・ユリ科</li>
<li>モダンローズ・バラ科</li>
<li>胡蝶蘭・ラン科</li>
</ul>
[ブラウザ上]
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
