W3.CSS-クイックガイド

W3.CSSとは何ですか?

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

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

  • 組み込みのレスポンシブデザイン

  • 標準CSS

  • Googleマテリアルデザインに触発

  • 自由に使用できます

レスポンシブデザイン

  • W3.CSSにはレスポンシブデザインが組み込まれているため、W3.CSSを使用して作成されたWebサイトは、デバイスのサイズに応じて再設計されます。

  • W3.CSSには、小、大、中の画面サイズのレスポンシブクラスをサポートする1​​2列のモバイルファースト流体グリッドがあります。

  • 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-borderw3-redw3-tealw3-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>

結果

結果を確認します。