W3css-lists
提供:Dev Guides
W3.CSS-リスト
W3.CSSは、w3-ul上でさまざまなスタイルを使用して、さまざまなタイプのリストを表示するために使用できます。
Sr. No. | Class Name & Description |
---|---|
1 |
w3-ul 境界線のない基本的なリストを表します。 |
2 |
w3-striped ストリップされたリストを表示します。 |
3 |
w3-bordered 行にボーダーを付けてリストを描画します。 |
4 |
w3-border 境界線付きのリストを描画します。 |
5 |
w3-card リストをカードとして描画します。 |
6 |
w3-tiny 非常に小さなフォントでリストを描画します。 |
7 |
w3-small 小さなフォントでリストを描画します。 |
8 |
w3-large 大きなフォントでリストを描画します。 |
9 |
w3-xlarge 特大フォントでリストを描画します。 |
10 |
w3-xxlarge 非常に大きなフォントでリストを描画します。 |
11 |
w3-xxxlarge 非常に高い特大フォントでリストを描画します。 |
12 |
w3-jumbo ジャンボ大フォントでリストを描画します。 |
例
w3css_lists
<html>
<head>
<title>The W3.CSS Lists</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body class = "w3-container">
<h2>List Demo</h2>
<hr/>
<h3>Simple List</h3>
<ul class = "w3-ul">
<li>Mahesh Parashar</li>
<li>Rahul Sharma</li>
<li>Mohan Sood</li>
</ul>
<h3>Stripped List with borders</h3>
<ul class = "w3-ul w3-striped w3-bordered w3-border">
<li>Mahesh Parashar</li>
<li>Rahul Sharma</li>
<li>Mohan Sood</li>
</ul>
<h3>List as Card</h3>
<ul class = "w3-ul w3-card-4">
<li>Mahesh Parashar</li>
<li>Rahul Sharma</li>
<li>Mohan Sood</li>
</ul>
<h3>List with very small font</h3>
<ul class = "w3-ul w3-tiny">
<li>Mahesh Parashar</li>
<li>Rahul Sharma</li>
<li>Mohan Sood</li>
</ul>
</body>
</html>
結果
結果を確認します。