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>

結果

結果を確認します。

W3css-lists

W3.CSS-リスト

例

w3css_lists

結果

目次