サイト内検索
...スタイルシート(css)...
スタイルシート・リスト
横並び（回り込み）を指定
- 横並び（回り込みさせる）には、floatプロパティを指定します。
- li 要素に設定すると、リストマークとテキストの間隔の指定ができます。
- [使い方]
- .sample{
float: left;
width: 150px;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| float： | left； | 後に続くリスト項目を右側に回り込ませます。 |
| right; | 後に続くリスト項目を右側に回り込ませます。 | |
| none; | 指定なし |
回り込みの解除
- 回り込みを解除させるには、clearを指定します。
- [使い方]
- <p style="clear:left;">ーーー解除ーーー</p>
| プロパティ名 | 値 | 説明 |
|---|---|---|
| clear: | left; | リスト項目の右側にある回り込みを解除します。 |
| right; | リスト項目の左側にある回り込みを解除します。 | |
| both; | どちらの回り込みも解除します。 | |
| none; | 指定なし（標準値) |
サンプル
[ｈｅａｄの中]
<style type="text/css"><!--
.sample1{
float: left;
width: 160px;
margin-right: 2px;
padding: 2px;
border: 2px #999999 dotted;
background-color: #ffff8e;
text-align: center;
}
-->
</style>
[ｂｏｄｙの中]
<ul><li class="sample1">カサブランカ・ユリ科</li>
<li class="sample1">モダンローズ・バラ科</li>
<li class="sample1">胡蝶蘭・ラン科</li>
</ul>
<p style="clear:left;">ーーー回り込みを解除ーーー</p>
<ul>
<li>カサブランカ・ユリ科</li>
<li>モダンローズ・バラ科</li>
<li>胡蝶蘭・ラン科</li>
</ul>
[ブラウザ上]
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
ーーー回り込みを解除ーーー
- カサブランカ・ユリ科
- モダンローズ・バラ科
- 胡蝶蘭・ラン科
