W3.CSS リスト
リストの表示
-
×
Mike
Web Designer
-
×
Jill
Support
-
×
Jane
Accountant
基本的なリスト
例
<ul class="w3-ul">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯
ボーダー付きリスト
例
<ul class="w3-ul w3-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯
List Header
例
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯
カードのようなリスト
例
<ul class="w3-ul w3-card-4">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯
リストの中央揃え
例
<ul class="w3-ul w3-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯
Colored List
例
<ul class="w3-ul w3-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯
色付きリスト
例
<ul class="w3-ul">
<li class="w3-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯
ホバー効果を持つリスト
w3-hoverable クラスは、マウスを乗せた時に各リスト項目に灰色の背景色を追加します：
例
<ul class="w3-ul w3-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯
ホバー色を指定したい場合は、各 <tr> 要素に w3-hover-classes を追加します：
クローズできるリスト
リスト項目を閉じる/非表示にするには、文字 "x" をクリックしてください：
例
<li>Jill
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
Try It Yourself ❯
パディング付きリスト
例
<ul class="w3-ul">
<li class="w3-padding-16">Jill</li>
<li
class="w3-padding-16">Eve</li>
<li class="w3-padding-16">Adam</li>
</ul>
Try It Yourself ❯
アバターリスト
-
x
Mike
Web Designer
-
x
Jill
Support
-
x
Jane
Accountant
例
<ul class="w3-ul w3-card-4">
<li class="w3-padding-16">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn w3-padding">x</span>
<img src="img_avatar2.png"
class="w3-left w3-circle" style="width:60px">
<span
class="w3-xlarge">Mike</span><br>
<span>Web
Designer</span>
</li>
</ul>
極小リスト
例
<ul class="w3-ul w3-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯
小さなリスト
例
<ul class="w3-ul w3-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯
大きなリスト
例
<ul class="w3-ul w3-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯
XLarge リスト
例
<ul class="w3-ul w3-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯
XXLarge リスト
例
<ul class="w3-ul w3-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯
XXXLarge リスト
例
<ul class="w3-ul w3-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯
Jumbo リスト
例
<ul class="w3-ul w3-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself ❯