W3.CSS-クイックガイド

W3.CSSとは何ですか？

W3.CSSは、w3schools.comによって開発されたカスケードスタイルシート（CSS）です。より速く、美しく、レスポンシブなWebサイトを作成するのに役立ちます。これは、Googleマテリアルデザインから着想を得ています。

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

組み込みのレスポンシブデザイン
標準CSS
Googleマテリアルデザインに触発
自由に使用できます

レスポンシブデザイン

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

標準CSS

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

マテリアルデザイン

W3.CSSは、Googleマテリアルデザインから着想を得ています。
紙のようなデザインに対応しています。
影と大胆な色をサポートします。
色と色合いは、さまざまなプラットフォームやデバイス間で均一のままです。

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

W3.CSSの使い方は？

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

Local Installation −ローカルマシンにW3.CSSファイルをダウンロードして、HTMLコードに含めることができます。
CDN Based Version − W3.CSSファイルをコンテンツ配信ネットワーク（CDN）から直接HTMLコードに含めることができます。

ローカルインストール

に移動 https://www.w3schools.com/w3css/w3css_downloads.asp 利用可能な最新バージョンをダウンロードします。
次に、ダウンロードしたw3.cssファイルをWebサイトのディレクトリ（/ cssなど）に配置します。

例

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

<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は、最新バージョンのコンテンツを提供しています。

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

例

ここで、W3Schools.comCDNの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>

次の結果が得られます-

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.htm

<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 @TutorialsPoint.COM</p>
      </footer>
   </body>
</html>

結果

結果を確認します。

W3.CSSは、非表示/クローズ機能を備えたコンテナーも提供します。次の例を参照してください-

w3css_hide_container.htm

<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は、次の言語の構文強調表示に優れたサポートを提供します-

HTML −HTMLコードを持つコンテナでクラスw3-codehtmlHighを使用します。
CSS −CSSコードを持つコンテナでクラスw3-codecssHighを使用します。
JS −CSSコードを持つコンテナでクラスw3-codejsHighを使用します。

構文の強調表示をサポートするには、jsファイルへのリンクを作成するために次のスクリプトを含める必要があります-

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

w3css_color_coding.htm

<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には、コンテナを影付きの紙のようなカードとして表示するための特別なクラスがいくつかあります。

シニア番号	クラス名と説明
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.htm

<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には、レスポンシブデザインを作成するための特別なクラスがいくつかあります。

シニア番号	クラス名と説明
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_responsive_design.htm

<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は、12列の流体応答グリッドを提供します。

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

シニア番号	クラス名と説明
1	w3-row レスポンシブ列に使用するパディングのないコンテナーを指定します。このクラスは、レスポンシブクラスが完全にレスポンシブであるために必須です。
2	w3-col サブクラスを持つ列を指定します

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

小画面デバイスの列

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

シニア番号	クラス名と説明
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 幅が100％の12列のうち12列を定義します。小画面電話のデフォルトクラス。

中画面デバイスの列

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

シニア番号	クラス名と説明
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 幅が100％の12列のうち12列を定義します。中画面電話のデフォルトクラス。

大画面デバイスの列

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

シニア番号	クラス名と説明
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 幅が100％の12列のうち12列を定義します。大画面デバイスのデフォルトクラス。

使用法

各サブクラスは、デバイスのタイプに基づいて、使用されるグリッドの列数を決定します。次の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.htm

<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には、フォームデザイン用の非常に美しく応答性の高いCSSがあります。次のCSSが使用されます-

シニア番号	クラス名と説明
1	w3-group 境界のあるコンテナを表します。ラベルと入力をグループ化するために使用できます。
2	w3-input 入力コントロールを美しくします。
3	w3-label ラベルを美しくします。
4	w3-checkbox w3-checkmark チェックボックス/ラジオボタンを美しくします。

例

w3css_forms.htm

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

シニア番号	クラス名と説明
1	w3-btn 標準ボタンを表します。リンクをボタンとしてスタイル設定するためにも使用できます。
2	w3-btn-floating デザインが円形のフローティングボタンを表します。
3	w3-btn-floating-large 大きなフローティングボタンを表します。

例

w3css_buttons.htm

<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-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 @TutorialsPoint.com</p>
   </div>
   <div>
      <img src = "html5-mini-logo.jpg" alt = "html5">
   </div>
</div>

例

w3css_tooltips.htm

<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 @TutorialsPoint.com</p>
         </div>
         
         <div>
            <img src = "html5-mini-logo.jpg" alt = "html5">
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

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

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

シニア番号	クラス名と説明
1	modal-dialog ダイアログボックスを定義するためのメインの親ウィンドウを表します。
2	w3-modal-dialog ダイアログコンテンツコンテナを表します。
3	w3-modal-content ダイアログの内容を表します。

例

w3css_modal_dialog.htm

<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>TutorialsPoint</h2>
               </header>
               <div class = "w3-container">
                  <p>Hello World!</p>
               </div>
               <footer class = "w3-container w3-teal">
                  <p>@TutorialsPoint.COM</p>
               </footer>
            </div>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

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

シニア番号	クラス名と説明
1	w3-table 境界線のない基本的なテーブルを表します。
2	w3-striped 削除されたテーブルを表示します。
3	w3-bordered 行をまたがる境界線を持つテーブルを描画します。
4	w3-border 境界線のあるテーブルを描画します。
5	w3-card テーブルをカードとして描画します。
6	w3-responsive 画面が小さすぎてコンテンツを表示できない場合に、レスポンシブテーブルを描画して水平スクロールバーを表示します。
7	w3-tiny 非常に小さいフォントでテーブルを描画します。
8	w3-small 小さいフォントで表を描画します。
9	w3-large 大きなフォントでテーブルを描画します。
10	w3-xlarge 特大フォントで表を描きます。
11	w3-xxlarge 非常に大きなフォントでテーブルを描画します。
12	w3-xxxlarge 非常に高い特大フォントでテーブルを描画します。
13	w3-jumbo ジャンボラージフォントでテーブルを描画します。

例

w3css_tables.htm

<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-ulでさまざまなスタイルを使用してさまざまなタイプのリストを表示できます。

シニア番号	クラス名と説明
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.htm

<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-imageを使用して、美しく興味深い方法で画像を表示するオプションを提供します。

シニア番号	クラス名と説明
1	w3-image 境界線のない基本的なスタイルの画像を表します。
2	w3-circle 円の中に画像を表示します
3	w3-title 画像の上にテキストを配置するために使用されます。
4	w3-card カードとして画像を描画します。

例

w3css_images.htm

<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は、次の人気のあるアイコンライブラリをサポートしています-

FontAwesomeアイコン
Googleマテリアルアイコン
ブートストラップアイコン

使用法

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

シニア番号	クラス名と説明
1	w3-tiny 非常に小さいサイズのアイコンを描画します。
2	w3-small 小さいサイズのアイコンを描画します。
3	w3-large 大きなサイズのアイコンを描画します。
4	w3-xlarge 特大サイズのアイコンを描画します。
5	w3-xxlarge 非常に大きなサイズのアイコンを描画します。
6	w3-xxxlarge 非常に高い特大サイズのアイコンを描画します。

例

w3css_icons.htm

<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-red
w3-pink
w3-purple
w3-deep-purple
w3-indigo
w3-blue
w3-light-blue
w3-cyan
w3-teal
w3-green
w3-light-green
w3-lime
w3-khaki
w3-yellow
w3-amber
w3-orange
w3-deep-orange
w3-blue-grey
w3-brown
w3-light-grey
w3-grey
w3-dark-grey
w3-black

カラーテーマ

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

シニア番号	CSSの名前と説明
1	w3-theme-indigo.css インディゴのバリエーションカラーを持つCSS
2	w3-theme-red.css 赤のバリアントカラーを持つCSS

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

例

w3css_colors.htm

<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には、Webサイトにナビゲーションバーまたはメニューをすばやく表示するための特別なクラスがいくつかあります。

シニア番号	クラス名と説明
1	w3-topnav リストを水平メニュー/ナビゲーションバーとしてスタイル設定します。
2	w3-sidenav リストを垂直メニュー/ナビゲーションバーとしてスタイル設定します。

例

w3css_navigation.htm

<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には、日常の設計ニーズに非常に役立ついくつかのユーティリティクラスがあります。

Color utility classes −例：w3-赤、w3-黄色
Padding utility classes −例：w3-padding-jumbo、w3-padding-16
Margin utility classes −例：w3-margin-8、w3-margin-64
Border utility class −例：w3-border-left、w3-border-right
Size utility classes −例：w3-tiny、w3-small
Circle utility class −例：w3-circle
Center utility class −例：w3-center

例

w3css_utilities.htm

<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>

結果

結果を確認します。