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>

結果

結果を確認します。

W3css-responsive-design

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

例

w3cssレスポンシブデザイン

結果

目次