W3.CSSリスト
基本リスト
w3-ulクラスは、基本的なリストを表示するために使用されます。
- ジル
- イブ
- アダム
例
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
ボーダーリスト
w3-borderクラスは、リストの周囲に境界線を追加します。
- ジル
- イブ
- アダム
例
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
リストヘッダー
リストアイテム内に見出し要素を追加する方法の例：
名前
- ジル
- イブ
- アダム
例
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
カードとしてリストする
w3- card- numberクラスを使用して、リストをカードとして表示できます。
- ジル
- イブ
- アダム
例
<ul class="w3-ul w3-card-4" style="width:50%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
中央リスト
w3-centerクラスを使用して、リスト内のリストアイテムを中央に配置できます。
- ジル
- イブ
- アダム
例
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
カラーリスト
w3-カラークラスを使用して、リストに色を追加できます。
- ジル
- イブ
- アダム
例
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
カラーリストアイテム
w3-カラークラスを使用して、リストアイテムに色を追加できます。
- ジル
- イブ
- アダム
例
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
ホバー可能リスト
w3-hoverableクラスは、マウスオーバー時に各リストアイテムに灰色の背景色を追加します。
- ジル
- イブ
- アダム
例
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
特定のホバーカラーが必要な場合は、w3-ホバーカラー クラスのいずれかを各<li>要素に追加します。
- ジル
- イブ
- アダム
例
<ul class="w3-ul">
<li class="w3-hover-red">Jill</li>
<li class="w3-hover-blue">Eve</li>
<li class="w3-hover-green">Adam</li>
</ul>
クローズ可能なリストアイテム
「x」をクリックして、リストアイテムを閉じたり非表示にしたりします。
- ジル
- アダム
- イブ
例
<li class="w3-display-container">Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-right">×</span>
</li>
ヒント： HTML＆times; エンティティは、（文字「X」ではなく）閉じるボタンの優先アイコンです。
パディング付きリスト
w3-paddingクラスを使用して、リストアイテムにパディングを追加できます 。
- ジル
- イブ
- アダム
- ジル
- イブ
- アダム
例
<ul class="w3-ul">
<li class="w3-padding-small">Jill</li>
<li
class="w3-padding-small">Eve</li>
<li class="w3-padding-small">Adam</li>
</ul>
アバターリスト
例
<li class="w3-bar">
<span onclick="this.parentElement.style.display='none'"
class="w3-bar-item w3-button w3-xlarge w3-right">×</span>
<img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
<div class="w3-bar-item">
<span
class="w3-large">Mike</span><br>
<span>Web
Designer</span>
</div>
</li>
ヒント：W3.CSSバーとW3.CSSナビゲーションの章で、w3バークラスの詳細を学習します。
リストの幅
リストの幅はデフォルトで100％です。これを変更するには、widthプロパティを使用します。
例
<ul class="w3-ul" style="width:30%">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
30％幅：
- ジル
- アダム
50％幅：
- ジル
- アダム
80％幅：
- ジル
- アダム
小さなリスト
w3-tinyクラスを 使用して、小さなリストを表示します。
- ジル
- イブ
- アダム
例
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
小さなリスト
w3-smallクラスを 使用して、小さなリストを表示します。
- ジル
- イブ
- アダム
例
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
大きなリスト
w3-largeクラスを 使用して、大きなリストを表示します。
- ジル
- イブ
- アダム
例
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XLargeリスト
w3-xlargeクラスを使用して、特大のリストを表示します。
- ジル
- イブ
- アダム
例
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXLargeリスト
w3-xxlargeクラスを 使用して、XXLargeリストを表示します。
- ジル
- イブ
- アダム
例
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXXラージリスト
w3-xxxlargeクラスを 使用して、XXXLargeリストを表示します。
- ジル
- イブ
- アダム
例
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
ジャンボリスト
w3-jumboクラスを使用して、膨大な「ジャンボ」リストを表示します。
- ジル
- イブ
- アダム
例
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>