W3.CSS-概要

W3.CSSとは何ですか？

W3.CSSは、https://www.w3schools.com/[w3schools.com]によって開発されたカスケードスタイルシート（CSS）です。より速く、美しく、応答性の高いWebサイトを作成するのに役立ちます。 Google Material Designからインスピレーションを得ています。

その顕著な特徴のいくつかは次のとおりです-

組み込みのレスポンシブデザイン
標準CSS
Google Material Designに触発
使用無料

レスポンシブデザイン

W3.CSSにはレスポンシブデザインが組み込まれているため、W3.CSSを使用して作成されたWebサイトはデバイスサイズに応じて再設計されます。
W3.CSSには、小規模、大規模、および中規模の画面サイズのレスポンシブクラスをサポートする12列のモバイルファースト流体グリッドがあります。
W3.CSSクラスは、Webサイトが任意の画面サイズに適合するように作成されます。
W3.CSSを使用して作成されたWebサイトは、PC、タブレット、およびモバイルデバイスと完全に互換性があります。

標準CSS

W3.CSSは標準CSSのみを使用し、非常に簡単に習得できます。
jQueryなどの外部JavaScriptライブラリへの依存関係はありません。

材料設計

W3.CSSは、Google Material Designから着想を得たものです。
紙のようなデザインをサポートします。
影と大胆な色をサポートしています。
色と濃淡は、さまざまなプラットフォームとデバイスで均一です。

そして何よりも重要なことは、絶対に無料で使用できることです。

W3.CSS-環境設定

W3.CSSの使用方法

W3.CSSを使用する2つの方法があります-

ローカルインストール-ローカルマシンにW3.CSSファイルをダウンロードして、HTMLコードに含めることができます。
* CDNベースのバージョン*-W3.CSSファイルをContent Delivery Network（CDN）から直接HTMLコードに含めることができます。

ローカルインストール

[[1]]
次に、ダウンロードしたw3.cssファイルをウェブサイトのディレクトリに置きます。/css。

例

これで、次のようにHTMLファイルに_css_ファイルを含めることができます-

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "css/w3.css">
   </head>

   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

それは次の結果を生成します-

CDNベースのバージョン

W3.CSSファイルは、コンテンツ配信ネットワーク（CDN）から直接HTMLコードに含めることができます。 W3Schools.comは、最新バージョンのコンテンツを提供します。

注-このチュートリアルでは、W3Schools.com CDNバージョンのライブラリを使用しています。

例

次に、W3Schools.com CDNのjQueryライブラリを使用して上記の例を書き直します。

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width =  device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>

   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

それは次の結果を生成します-

W3.CSS-コンテナー

HTML5には次のコンテナ要素があります-

<div> -HTMLコンテンツに汎用コンテナを提供します。
<header> -ヘッダーセクションを表します。
<footer> -フッターセクションを表します。
<article> -記事を表します。
<section> -さまざまなタイプのセクションの汎用コンテナを提供します。

W3.CSSは、上記のすべてのコンテナをスタイルするためのプライマリクラスとして w3-container を提供します。 W3.CSSには、 w3-border 、 w3-red 、 w3-teal 、 w3-padding-32 などの他のクラスもあり、コンテナーにさらにスタイリング属性を追加します。

例

次の例は、さまざまなコンテナをスタイルするためのw3-containerクラスの使用を示しています。

w3css_containers

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>

   <body>
      <header class = "w3-container w3-red">
         <h1>HTML5 Tutorial</h1>
      </header>

      <div class = "w3-container w3-border w3-teal">
         <p>HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a mark up language.</p>
      </div>

      <article class = "w3-container">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </article>

      <section class = "w3-container">
         <p>HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers.</p>
      </section>

      <footer class = "w3-container w3-red">
         <p>Copyright @finddevguides.COM</p>
      </footer>
   </body>
</html>

結果

結果を確認します。

W3.CSSは、コンテナに非表示/閉じる機能も提供します。次の例を参照してください-

w3css_hide_container

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>

   <body>
      <div class = "w3-container w3-border w3-teal">
         <span class = "w3-closebtn" onclick = "this.parentElement.style.display = 'none'">X</span>
         <p>Close container by clicking on the X in the upper right corner.</p>
      </div>
   </body>
</html>

結果

結果を確認します。

W3.CSS-コードの色付け

W3.CSSは、次の言語の構文強調表示のための優れたサポートを提供します-

HTML -HTMLコードを持つコンテナでクラスw3-code htmlHighを使用します。
CSS -CSSコードを持つコンテナでクラスw3-code cssHighを使用します。
JS -CSSコードを持つコンテナでクラスw3-code jsHighを使用します。

次のスクリプトを含めて、jsファイルへのリンクを作成して、構文の強調表示をサポートします-

<script src = "https://www.w3schools.com/lib/w3codecolors.js"></script>

w3css_color_coding

<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>

   <body>
      <header class = "w3-container w3-teal">
         <h2>HTML Syntax Highlighted</h2>
      </header>
      <div class = "w3-code htmlHigh">
         <html>
            <head>
               <title>The W3.CSS Example</title>
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <link rel="stylesheet" href="css/w3.css">
            </head>

            <body>
               <header class="w3-container w3-teal">
                  <h1>Hello World!</h1>
               </header>
            </body>
         </html>
      </div>

      <header class="w3-container w3-teal">
         <h2>CSS Syntax Highlighted</h2>
      </header>

      <div class = "w3-code cssHigh">
         .bold {
            font-weight:bold;
         }
         #boldLabel {
            font-weight:bold;
         }
         table, th, td {
            font-family:sans;
         }
      </div>

      <header class = "w3-container w3-teal">
         <h2>JS Syntax Highlighted</h2>
      </header>

      <div class = "w3-code cssHigh">
         <script type="text/javascript">
            function(message){
            }
            var message = "Hello, World!";
            alert(message);
         </script>
      </div>
      <script src="https://www.w3schools.com/lib/w3codecolors.js"></script>
   </body>
</html>

結果

結果を確認します。

W3.CSS-カード

W3.CSSには、コンテナを影付きの紙のようなカードとして表示するためのいくつかの特別なクラスがあります。

Sr. No.	Class Name & Description
1	w3-card HTMLコンテンツのコンテナを境界線でスタイルします
2	w3-card-2 2pxのボーダー付きシャドウを使用してHTMLコンテンツのコンテナをスタイルします
3	w3-card-4 4pxボーダーシャドウを使用してHTMLコンテンツのコンテナーをスタイルします。
4	w3-card-8 8pxのボーダー付きシャドウを使用して、HTMLコンテンツのコンテナをスタイルします
5	w3-card-12 12pxの境界線付きシャドウを使用して、HTMLコンテンツのコンテナをスタイルします

例

w3css_cards

<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <style>
         div {
            width : 200px;
            height : 200px;
         }
      </style>
   </head>

   <body>
      <header class = "w3-container w3-teal">
         <h2>Yellow Card Demo</h2>
      </header>
      <br/>

      <div class = "w3-card w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-2 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-4 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-8 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <br/>

      <header class = "w3-container w3-teal">
         <h2>White Card Demo</h2>
      </header>
      <br/>

      <div class = "w3-card w3-white">
         <p><b>TODO:</b> Learn W3.CSS</p>
      </div>
      <div class = "w3-card-8 w3-white">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <br/>

      <div class = "w3-card-4" style = "width:550px;">
         <header class = "w3-container w3-blue">
            <h1>HTML5 Tutorial</h1>
         </header>

         <div class = "w3-container" style = "width:550px;">
            <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
         </div>
      </div>
      <br/>

      <header class  =  "w3-container w3-teal">
         <h2>Image Card Demo</h2>
      </header>
      <br/>

      <div class = "w3-card-12" style = "width:255px; height: 230px;">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">
         <div class = "w3-container">
            <p>Learn HTML5</p>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

W3.CSS-レスポンシブデザイン

W3.CSSには、レスポンシブデザインを作成するためのいくつかの特別なクラスがあります。

Sr. No.	Class Name & Description
1	w3-half 中または大画面デバイスでウィンドウの1/2 ^ nd ^を占めるようにコンテナを設定します。画面が601ピクセルより小さい場合、コンテナのサイズを100％に変更します。
2	w3-third 中または大画面デバイスでウィンドウの1/3 ^ rd ^を占めるようにコンテナを設定します。画面が601ピクセルより小さい場合、コンテナのサイズを100％に変更します。
3	w3-quarter 中または大画面デバイスでウィンドウの1/4 ^を占めるようにコンテナを設定します。画面が601ピクセルより小さい場合、コンテナのサイズを100％に変更します。
4	w3-col 12列グリッドの列を指定します。
5	w3-row レスポンシブクラスに使用するパディングのないコンテナを指定します。このクラスは、レスポンシブクラスが完全にレスポンシブであるために必須です。

例

w3cssレスポンシブデザイン

<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>

   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <br/>

      <div class = "w3-row w3-border">
         <div class = "w3-container w3-half w3-red">
            <h2>w3-half</h2>
            <p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>

         <div class = "w3-container w3-half">
            <h2>w3-half</h2>
         </div>
      </div>
      <br/>

      <div class = "w3-row w3-border">
         <div class = "w3-container w3-third w3-red">
            <h2>w3-third</h2>
            <p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>

         <div class = "w3-container w3-third">
            <h2>w3-third</h2>
         </div>
      </div>
      <br/>

      <div class = "w3-row w3-border">
         <div class = "w3-container w3-quarter w3-red">
            <h2>w3-quarter</h2>
            <p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>

         <div class = "w3-container w3-quarter">
            <h2>w3-quarter</h2>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

W3.CSS-グリッド

W3.CSSは、12列の流体応答グリッドを提供します。

w3-rowおよびw3-colスタイルクラスを使用して、それぞれ行と列を定義します。

Sr. No.

Class Name & Description

1

w3-row

レスポンシブ列に使用するパディングなしのコンテナーを指定します。このクラスは、レスポンシブクラスが完全にレスポンシブであるために必須です。

2

w3-col

サブクラスを持つ列を指定します

w3-colには、さまざまなタイプの画面を対象としたいくつかのサブクラスがあります。

小画面デバイス用の列

以下は、小さな画面デバイス、通常はスマートフォン用の列レベルのスタイルのリストです。

Sr. No.

クラス名と説明

1

s1

幅が08.33％の12列のうち1列を定義します。

2

s2

16.66％の幅で12列のうち2列を定義します。

3

s3

幅が25.00％の12列のうち3列を定義します。

4

s4

33.33％の幅で12列のうち4列を定義します。

5

*s12*

12列のうち12列を幅100％で定義します。スモールスクリーンフォンのデフォルトクラス。

中画面デバイス用の列

以下は、中程度の画面のデバイス（通常はタブレット）の列レベルのスタイルのリストです。

Sr. No.

クラス名と説明

1

m1

幅が08.33％の12列のうち1列を定義します。

2

m2

16.66％の幅で12列のうち2列を定義します。

3

m3

幅が25.00％の12列のうち3列を定義します。

4

m4

33.33％の幅で12列のうち4列を定義します。

5

*m12*

12列のうち12列を幅100％で定義します。中型の携帯電話のデフォルトクラス。

大画面デバイス用の列

以下は、大画面デバイス（通常はラップトップ）の列レベルのスタイルのリストです。

Sr. No.

クラス名と説明

1

|1

幅が08.33％の12列のうち1列を定義します。

2

|2

16.66％の幅で12列のうち2列を定義します。

3

|3

幅が25.00％の12列のうち3列を定義します。

4

|4

33.33％の幅で12列のうち4列を定義します。

5

*| 12*

12列のうち12列を幅100％で定義します。大画面デバイスのデフォルトクラス。

使用法

各サブクラスは、デバイスのタイプに基づいて、使用するグリッドの列数を決定します。次のHTMLスニペットを考えてください。

<div class = "w3-row">
   <div class = "w3-col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
   </div>
</div>

HTML要素のclass属性でサブクラスが指定されていない場合、デバイスで使用されるデフォルトの列は12です。

例

w3css_grids

<html>
   <head>
      <title>The W3.CSS Grids</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>

   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <div class = "w3-row">
         <div class = "w3-col m1 w3-center w3-grey">1</div>
         <div class = "w3-col m1 w3-center">2</div>
         <div class = "w3-col m1 w3-center w3-grey">3</div>
         <div class = "w3-col m1 w3-center">4</div>

         <div class = "w3-col m1 w3-center w3-grey">5</div>
         <div class = "w3-col m1 w3-center">6</div>
         <div class = "w3-col m1 w3-center w3-grey">7</div>
         <div class = "w3-col m1 w3-center">8</div>

         <div class = "w3-col m1 w3-center w3-grey">9</div>
         <div class = "w3-col m1 w3-center">10</div>
         <div class = "w3-col m1 w3-center w3-grey">11</div>
         <div class = "w3-col m1 w3-center">12</div>
      </div>

      <div class = "w3-row">
         <div class = "w3-col w3-container m4 l3 w3-yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
         </div>

         <div class = "w3-col w3-container s4 m8 l9">
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

W3.CSS-フォーム

W3.CSSには、フォーム設計用の非常に美しく応答性の高いCSSがあります。次のCSSが使用されています-

Sr. No.	Class Name & Description
1	w3-group 境界線付きコンテナーを表します。ラベルと入力をグループ化するために使用できます。
2	w3-input 入力コントロールを美化します。
3	w3-label ラベルを美化します。
4	w3-checkbox w3-checkmark チェックボックス/ラジオボタンを美しくします。

例

w3css_forms

<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>

   <body>
      <form class = "w3-container w3-card-8">
         <div class = "w3-group">
            <input class = "w3-input" type = "text" style = "width:90%" required>
            <label class = "w3-label">User Name</label>
         </div>

         <div class = "w3-group">
            <input class = "w3-input" type = "text" style = "width:90%" required>
            <label class = "w3-label">Email</label>
         </div>

         <div class = "w3-group">
            <textarea class = "w3-input" style = "width:90%" required></textarea>
            <label class = "w3-label">Comments</label>
         </div>
         <div class = "w3-row">
            <div class = "w3-half">
               <label class = "w3-checkbox">
                  <input type = "checkbox" checked = "checked">
                  <div class = "w3-checkmark"></div> Married
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "checkbox">
                  <div class = "w3-checkmark"></div> Single
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "checkbox" disabled>
                  <div class = "w3-checkmark"></div> Don't know (Disabled)
               </label>
               <br>
               <br>
            </div>

            <div class = "w3-half">
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "male" checked>
                  <div class = "w3-checkmark"></div> Male
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "female">
                  <div class = "w3-checkmark"></div> Female
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "female" disabled>
                  <div class = "w3-checkmark"></div> Don't know (Disabled)
               </label>
            </div>
         </div>
      </form>
   </body>
</html>

結果

結果を確認します。

W3.CSS-ボタン

W3.CSSには、ボタンの外観をカスタマイズするための非常に美しく応答性の高いCSSがあります。次のCSSが使用されています-

Sr. No.

Class Name & Description

1

w3-btn

標準ボタンを表します。リンクをボタンとしてスタイルするためにも使用できます。

2

w3-btn-floating

デザインが円形のフローティングボタンを表します。

3

w3-btn-floating-large

大きなフローティングボタンを表します。

例

w3css_buttons

<html>
   <head>
      <title>The W3.CSS Forms</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>Standard Buttons</h2>
      <button class = "w3-btn">Click Me</button>
      <button class = "w3-btn w3-teal">Click Me</button>
      <button class = "w3-btn w3-disabled">I am disabled</button>

      <h2>Links as Buttons</h2>
      <a class = "w3-btn">Link</a>
      <a class = "w3-btn w3-teal">Link</a>
      <a class = "w3-btn w3-disabled">Disabled Link</a>

      <h2>Floating Buttons</h2>
      <a class = "w3-btn-floating">+</a>
      <a class = "w3-btn-floating w3-teal">+</a>
      <a class = "w3-btn-floating w3-disabled">+</a>

      <h2>Large Floating Buttons</h2>
      <a class = "w3-btn-floating-large">+</a>
      <a class = "w3-btn-floating-large w3-teal">+</a>
      <a class = "w3-btn-floating-large w3-disabled">+</a>
   </body>
</html>

結果

結果を確認します。

W3.CSS-ツールチップ

W3.CSSは、w3-tooltipクラスを使用して異なる種類のツールチップをサポートします。次の例を見てください。ここでは、divと画像にツールチップテキストを配置し、親divにw3-ツールチップを適用しました。

<div class = "w3-tooltip">
   <div class = "w3-text w3-container w3-teal" style = "width:255px;">
      <p>Learn HTML5 in simply easy way @finddevguides.com</p>
   </div>
   <div>
      <img src = "html5-mini-logo.jpg" alt = "html5">
   </div>
</div>

例

w3css_tooltips

<html>
   <head>
      <title>The W3.CSS Tooltips</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>Hover Demo</h2>
      <div class = "w3-tooltip">
         <div class = "w3-text w3-container w3-teal" style = "width:255px;">
            <p>Learn HTML5 in simply easy way @finddevguides.com</p>
         </div>

         <div>
            <img src = "html5-mini-logo.jpg" alt = "html5">
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

W3.CSS-モーダルダイアログ

W3.CSSを使用して、標準のJavaScriptアラートの代わりにカスタマイズ可能なモーダルダイアログボックスを表示できます。

w3-rowおよびw3-colスタイルクラスを使用して、それぞれ行と列を定義します。

Sr. No.

Class Name & Description

1

modal-dialog

ダイアログボックスを定義するメインの親ウィンドウを表します。

2

w3-modal-dialog

ダイアログコンテンツコンテナを表します。

3

w3-modal-content

ダイアログの内容を表します。

例

w3css_modal_dialog

<html>
   <head>
      <title>The W3.CSS Modal dialog</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>Modal dialog Demo</h2>
      <a class = "w3-btn w3-teal" href = "#model-dialog">Open a Modal dialog</a>
      <div id = "model-dialog" class = "w3-modal">
         <div class = "w3-modal-dialog">
            <div class = "w3-modal-content w3-card-8">
               <header class = "w3-container w3-teal">
                  <a href = "#" class = "w3-closebtn">×</a>
                  <h2>finddevguides</h2>
               </header>
               <div class = "w3-container">
                  <p>Hello World!</p>
               </div>
               <footer class = "w3-container w3-teal">
                  <p>@finddevguides.COM</p>
               </footer>
            </div>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

W3.CSS-テーブル

W3.CSSを使用して、w3-tableのさまざまなスタイルを使用して、さまざまなタイプのテーブルを表示できます。

Sr. No.	Class Name & Description
1	w3-table 境界線のない基本的なテーブルを表します。
2	w3-striped ストリップされたテーブルを表示します。
3	w3-bordered 行をまたぐ境界線を持つ表を描画します。
4	w3-border 罫線付きの表を描画します。
5	w3-card テーブルをカードとして描きます。
6	w3-responsive 画面が小さすぎてコンテンツを表示できない場合、レスポンシブテーブルを描画して水平スクロールバーを表示します。
7	w3-tiny Draws a table with very small font.
8	w3-small* 小さなフォントで表を描画します。
9	w3-large 大きなフォントで表を描画します。
10	w3-xlarge 特大のフォントで表を描画します。
11	w3-xxlarge 非常に大きなフォントで表を描画します。
12	w3-xxxlarge 非常に高い特大フォントで表を描画します。
13	w3-jumbo ジャンボラージフォントで表を描画します。

例

w3css_tables

<html>
   <head>
      <title>The W3.CSS Tables</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>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
      <table class = "w3-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>

         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>

      <h3>Stripped Table with borders</h3>
      <table class = "w3-table w3-striped w3-bordered w3-border">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      <hr/>

      <h3>Table as Card</h3>
      <table class = "w3-table w3-card-4">
         <thead>
            <tr>
            <th>Student</th>
            <th>Class</th>
            <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>

      <h3>Responsive table</h3>
      <div class = "w3-responsive">
         <table class = "w3-table w3-card-4">
            <thead>
               <tr>
                  <th>Student</th>
                  <th>Class</th>
                  <th>Data #1</th>
                  <th>Data #2</th>
                  <th>Data #3</th>
                  <th>Data #4</th>
                  <th>Data #5</th>
                  <th>Data #6</th>
                  <th>Data #7</th>
                  <th>Data #8</th>
                  <th>Data #9</th>
                  <th>Data #10</th>
               </tr>
            </thead>

            <tbody>
               <tr>
                  <td>Mahesh Parashar</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
               <tr>
                  <td>Rahul Sharma</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
               <tr>
                  <td>Mohan Sood</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
            </tbody>
         </table>
      </div>

      <h3>Table with very small font</h3>
      <table class = "w3-table w3-tiny">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
               </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

結果

結果を確認します。

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>

結果

結果を確認します。

W3.CSS-画像

W3.CSSは、w3-imageをメインクラスとして使用して、美しく興味深い方法で画像を表示するオプションを提供します。

Sr. No.	Class Name & Description
1	w3-image 境界線のない基本的なスタイル付き画像を表します。
2	w3-circle 円の中に画像を表示します
3	w3-title 画像の上にテキストを配置するために使用されます。
4	w3-card 画像をカードとして描画します。

例

w3css_images

<html>
   <head>
      <title>The W3.CSS Images</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>Images Demo</h2>
      <hr/>
      <h3>Simple Image</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5">
      </div>

      <h3>Circled Image</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
      </div>

      <h3>Text over image</h3>
      <div class = "w3-image"><img src = "html5-mini-logo.jpg" alt = "html5">
         <div class = "w3-title w3-text-black">Learn HTML5</div>
      </div>

      <h3>Image as a card</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-card-4">
      </div>
   </body>
</html>

結果

結果を確認します。

W3.CSS-アイコン

W3.CSSは、次の人気のあるアイコンライブラリをサポートしています-

フォントの素晴らしいアイコン
Googleマテリアルアイコン *ブートストラップアイコン

使用法

アイコンを使用するには、アイコンの名前をHTML <i>要素のクラスに入れます。アイコンのサイズを制御するには、次のクラスを使用できます-

Sr. No.	Class Name & Description
1	w3-tiny* 非常に小さなサイズのアイコンを描画します。
2	w3-small 小さなサイズのアイコンを描画します。
3	w3-large 大きなサイズのアイコンを描画します。
4	w3-xlarge 特大サイズのアイコンを描画します。
5	w3-xxlarge 非常に大きなサイズのアイコンを描画します。
6	w3-xxxlarge 非常に高い特大サイズのアイコンを描画します。

例

w3css_icons

<html>
   <head>
      <title>The W3.CSS Icons</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>

   <body class = "w3-container">
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud"></i>
      <i class = "fa fa-cloud w3-large"></i>
      <i class = "fa fa-cloud w3-xlarge"></i>
      <i class = "fa fa-cloud w3-xxlarge"></i>
      <i class = "fa fa-cloud w3-xxxlarge"></i>
      <i class = "fa fa-cloud w3-text-teal" style = "font-size:64px"></i>

      <h3>Google Material Design Icon Demo</h3>
      <i class = "material-icons w3-large">cloud</i>
      <i class = "material-icons">cloud</i>
      <i class = "material-icons w3-xlarge">cloud</i>
      <i class = "material-icons w3-xxlarge">cloud</i>
      <i class = "material-icons w3-xxxlarge">cloud</i>
      <i class = "material-icons w3-text-teal" style = "font-size:64px">cloud</i>

      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud"></i>
      <i class = "gclass = "glyphicon glyphicon-cloud w3-large"></i>
      <i class = "glyphicon glyphicon-cloud w3-xlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-text-teal" style = "font-size:64px"></i>
   </body>
</html>

結果

結果を確認します。

W3.CSS-色

W3.CSSは、豊富なカラークラスのセットをサポートしています。これらのカラークラスは、マーケティング、道路標識、および付箋で使用される色を考慮してインスピレーションと開発が行われています。

w3-赤
w3-ピンク
w3-紫
w3深紫
w3-インディゴ
w3-blue
w3-ライトブルー
w3-シアン
w3-ティール
w3-green
w3-ライトグリーン
w3-石灰
w3-カーキ
w3-イエロー
w3-アンバー
w3-オレンジ
w3-濃いオレンジ
w3-blue-grey
w3-ブラウン
w3-ライトグレー
w3-グレー
w3-ダークグレー *w3-black

色のテーマ

W3.CSSは、パブリックドメインテーマcssを使用してWebサイトにテーマを適用するための優れたサポートを提供します。いくつかの例を以下に示します-

Sr. No.

CSS Name & Description

1

w3-theme-indigo.css*

Indigoバリアントカラーを持つCSS

2

w3-theme-red.css

赤のバリアントカラーを持つCSS

テーマを使用するには、https://www.w3schools.com/w3css/w3css_downloads.aspにアクセスして、必要なCSSファイルをダウンロードします。

例

w3css_colors

<html>
   <head>
      <title>The W3.CSS Color Themes</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "css/w3-theme-red.css">
   </head>

   <body class = "w3-container">
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class = "w3-card-4">
         <div class = "w3-container w3-theme w3-card-2">
            <h1>Red Colored Theme</h1>
         </div>

         <div class = "w3-container w3-text-theme">
            <h2>w3-text-theme - Theme for Text</h2>
         </div>

         <ul class = "w3-ul w3-border-top">
            <li class = "w3-theme-l5" style = "position:relative">
            <a class = "w3-btn-floating-large w3-theme-action w3-right"
            style = "position:absolute;top:-28px;right:16px;">+</a>
            <p>Using w3-theme-l5/w3-theme-light style</p>
            </li>
            <li class = "w3-theme-l4"><p>Using w3-theme-l4 style</p></li>
            <li class = "w3-theme-l3"><p>Using w3-theme-l3 style</p></li>
            <li class = "w3-theme-l2"><p>Using w3-theme-l2 style</p></li>
            <li class = "w3-theme-l1"><p>Using w3-theme-l1 style</p></li>
            <li class = "w3-theme"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d1"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d2"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d3"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d4"><p>Using w3-theme style</p></li>
         </ul>
      </div>
   </body>
</html>

結果

結果を確認します。

W3.CSS-ナビゲーション

W3.CSSには、ナビゲーションバーまたはメニューをWebサイトにすばやく表示するためのいくつかの特別なクラスがあります。

Sr. No.

Class Name & Description

1

w3-topnav

リストを水平メニュー/ナビゲーションバーとしてスタイルします。

2

w3-sidenav

リストを垂直メニュー/ナビゲーションバーとしてスタイルします。

例

w3css_navigation

<html>
   <head>
      <title>The W3.CSS Navigation</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body class = "w3-container">
      <h2>Navigation Demo</h2>
      <hr/>
      <h3>Horizontal top navigation bar</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#">Home</a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>

      <h3>Using font awesome icons</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#"><i class="fa fa-home"></i></a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>

      <h3>Using material icons</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#"><i class="material-icons">home</i></a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>

      <h3>Using Side Navigation</h3>
      <nav class = "w3-sidenav w3-red w3-card-2" style="width:25%">
         <a href="#">Home</a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
   </body>
</html>

結果

結果を確認します。

W3.CSS-ユーティリティ

W3.CSSには、日々の設計ニーズに非常に役立ついくつかのユーティリティクラスがあります。

カラーユーティリティクラス-例：w3-red、w3-yellow
パディングユーティリティクラス-例：w3-padding-jumbo、w3-padding-16
* Marginユーティリティクラス*-例：w3-margin-8、w3-margin-64
境界ユーティリティクラス-例：w3-border-left、w3-border-right
サイズユーティリティクラス-例：w3-tiny、w3-small
サークルユーティリティクラス-例：w3-circle
センターユーティリティクラス-例：w3-center

例

w3css_utilities

<html>
   <head>
      <title>The W3.CSS Utilities</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>W3.CSS Utilities</h2>
      <hr/>
      <h3>Color Utilities Demo</h3>
      <div class = "w3-container w3-red">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>

      <h3>Padding Utilities Demo</h3>
      <div class = "w3-container w3-red w3-padding-jumbo">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green w3-padding-16">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>

      <h3>Margin Utilities Demo</h3>
      <div class = "w3-container w3-margin-64">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-margin-8">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>

      <h3>Border Utilities Demo</h3>
      <div class = "w3-container w3-red w3-border-left w3-border-right">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green w3-border">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>

      <h3>Size Utilities Demo</h3>
      <div class = "w3-container">
         <p class = "w3-small">Using w3-small font.</p>
         <p>Using Default (medium).</p>
         <p class = "w3-large">Using w3-large font.</p>
         <p class = "w3-xlarge">Using w3-xlarge font.</p>
      </div>

      <h3>Circle Utility Demo</h3>
      <div class = "w3-container">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
      </div>
      <h3>Center Utility Demo</h3>
      <div class = "w3-container w3-center w3-black w3-card-2">
         <img src = "html5-mini-logo.jpg" class = "w3-circle" alt = "html5">
      </div>
   </body>
</html>

結果

結果を確認します。

W3css-quick-guide

W3.CSS-概要

W3.CSSとは何ですか？

レスポンシブデザイン

標準CSS

材料設計

W3.CSS-環境設定

W3.CSSの使用方法

ローカルインストール

例

CDNベースのバージョン

例

W3.CSS-コンテナー

例

w3css_containers

結果

w3css_hide_container

結果

W3.CSS-コードの色付け

w3css_color_coding

結果

W3.CSS-カード

例

w3css_cards

結果

W3.CSS-レスポンシブデザイン

例

w3cssレスポンシブデザイン

結果

W3.CSS-グリッド

小画面デバイス用の列

中画面デバイス用の列

大画面デバイス用の列

使用法

例

w3css_grids

結果

W3.CSS-フォーム

例

w3css_forms

結果

W3.CSS-ボタン

例

w3css_buttons

結果

W3.CSS-ツールチップ

例

w3css_tooltips

結果

W3.CSS-モーダルダイアログ

例

w3css_modal_dialog

結果

W3.CSS-テーブル

例

w3css_tables

結果

W3.CSS-リスト

例

w3css_lists

結果

W3.CSS-画像

例

w3css_images

結果

W3.CSS-アイコン

使用法

例

w3css_icons

結果

W3.CSS-色

色のテーマ

例

w3css_colors

結果

W3.CSS-ナビゲーション

例

w3css_navigation

結果

W3.CSS-ユーティリティ