W3.CSS組み込みの応答性
W3.CSSには、レイアウトを処理するためのレスポンシブなモバイルファーストグリッドシステムが含まれています。
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50px
休み
1/4
休み
100px
45px
休み
W3.CSSレスポンシブクラス
W3.CSSのグリッドシステムは応答性が高く、画面サイズに応じて列が自動的に再配置されます。
| クラス | 説明 |
|---|---|
| w3-半分 | ウィンドウの1/2を占める（中画面および大画面） |
| w3-3番目 | ウィンドウの1/3を占める（中画面および大画面） |
| w3-2 / 3 | ウィンドウの2/3を占める（中画面および大画面） |
| w3-クォーター | ウィンドウの1/4を占める（中画面および大画面） |
| w3-スリークォーター | ウィンドウの3/4を占める（中画面および大画面） |
| w3-rest | 列幅の残りを占有します |
| w3-col | 12列のレスポンシブグリッドで1つの列を定義します |
| w3-モバイル | セル（列）にモバイルファーストの応答性を追加します。 モバイルデバイスで要素をブロック要素として表示します。 |
上記のレスポンシブクラスは、完全にレスポンシブになるために、 w3行 クラス（またはw3行パディングクラス）内に配置する必要があります。
| クラス | 説明 |
|---|---|
| w3-行 | パディングなしのレスポンシブクラスのコンテナ |
| w3-行パディング | レスポンシブクラスのコンテナ、8pxの左右のパディング |
| w3-コンテンツ | 固定サイズ中心のコンテンツ用のコンテナ |
| w3-hide-small | 小さな画面（601px未満）のコンテンツを非表示にします |
| w3-hide-medium | 中画面のコンテンツを非表示にします |
| w3-非表示-大 | 大画面（992pxより大きい）のコンテンツを非表示にします |
| l1-l12 | 大画面のレスポンシブサイズ |
| m1-m12 | 中画面のレスポンシブサイズ |
| s1-s12 | 小さな画面のレスポンシブサイズ |
w3-halfクラス
w3-halfクラスの幅は、親要素の1/2です（style = "width：50％"）。
601ピクセル未満の画面では、100％にサイズ変更されます。
w3-半分
w3-半分
例
<div class="w3-row">
<div class="w3-half w3-container w3-green">
<h2>w3-half</h2>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
</div>
</div>
w3-3番目のクラス
w3-3番目のクラスの幅は、親要素の1/3です（style = "width：33.33％"）。
601ピクセル未満の画面では、100％にサイズ変更されます。
w3-3番目
w3-3番目
w3-3番目
例
<div class="w3-row">
<div class="w3-third w3-container w3-green">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
</div>
w3-2 / 3クラス
w3-twothirdクラスの幅は、親要素の2/3です（style = "width：66.66％"）。
601ピクセル未満の画面では、100％にサイズ変更されます。
w3-2 / 3
w3-3番目
例
<div class="w3-row">
<div class="w3-green w3-container
w3-twothird">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
w3-クォータークラス
w3-quarterクラスの幅は、親要素の1/4です（style = "width：25％"）。
601ピクセル未満の画面では、100％にサイズ変更されます。
w3-クォーター
w3-クォーター
w3-クォーター
w3-クォーター
例
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
w3-3 / 4クラス
w3-3 / 4クラスの幅は、親要素の3/4です（style = "width：75％"）。
601ピクセル未満の画面では、100％にサイズ変更されます。
w3-スリークォーター
w3-クォーター
例
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
組み合わせ
w3-クォーター
w3-半分
w3-クォーター
w3-クォーター
w3-クォーター
w3-半分
w3-半分
w3-クォーター
w3-クォーター
ネストされた行
例：w3-half内部w3-half
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div>
残りを使用する列
w3-colクラスは、12列のレスポンシブグリッドの1つの列を定義します。
w3-restクラスは、残りの幅を占有します。
私は150pxです
私は残りです
例
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>I
am 150px</p></div>
<div class="w3-rest
w3-green"><p>I am the rest</p></div>
</div>
パーセントを使用する列
CSSのwidthプロパティを使用して、幅をパーセントで設定することもできます。
20％
60％
20％
例
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div>
w3-contentクラス
w3-contentクラスは、固定サイズ中心のコンテンツのコンテナーを定義します。CSSのmax-widthプロパティを使用して、デフォルトの幅（980px）を上書きします。
例
<body class="w3-content" style="max-width:500px">
page content...
</body>
w3行とw3行のパディング
w3-row-rowクラスは、パディングのないコンテナーを定義しますが、 w3-row-paddingクラスは、各列に8pxの左右のパディングを追加します。
w3-行：
w3-3番目
w3-3番目
w3-3番目
w3-行パディング：
w3-3番目
w3-3番目
w3-3番目
w3-行：
w3-行パディング：
例
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col
s4"><img src="img_snowtops.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col
s4"><img src="img_snowtops.jpg"></div>
</div>
パッド入りの行を伸ばす
w3-stretchクラスは、要素から右マージンと左マージンを削除します。このクラスは、パディングされた行を伸ばすためによく使用されます。
w3-stretchの例：
w3-stretchを使用しない例：
例
<div class="w3-row-padding w3-section w3-stretch">
<div
class="w3-col s4">
<img src="img_nature_wide.jpg">
</div>
<div class="w3-col s4">
<img src="img_snow_wide.jpg">
</div>
<div class="w3-col s4">
<img
src="img_mountains_wide.jpg">
</div>
</div>
レスポンシブショー/非表示
The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.
Note: Resize the browser window to understand how it works:
Example
<div class="w3-container w3-hide-small w3-red">
<p>w3-hide-small will
be hidden on small screens (phones)</p>
</div>
<div
class="w3-container w3-hide-medium w3-green">
<p>w3-hide-medium will
be hidden on medium screens (tablets)</p>
</div>
<div
class="w3-container w3-hide-large w3-blue">
<p>w3-hide-large will be
hidden on large screens (laptops/desktop)</p>
</div>
The w3-mobile Class
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
Example
<a class="w3-button w3-mobile" href="#">Link</a>
Screen Resolutions
The built-in responsiveness of W3.CSS uses the DP size of a screen.
W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels DP.
Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.
Below is a list of typical device resolutions and reported DP sizes:
Iphone 4
Resolution
640 x 960
DP
320 x 480
Iphone 5
Resolution
640 x 1136
DP
320 x 528
Iphone 6
Resolution
750 x 1334
DP
375 x 667
Iphone 6s
Resolution
1080 x 1920
DP
414 x 736
Galaxy S6
Resolution
1440 x 2560
DP
360 x 640
Note 4
Resolution
1440 x 2560
DP
400 x 853
Nexus 6
Resolution
1440 x 2560
DP
411 x 731
iPad Mini
Resolution
768 x 1024
DP
768 x 1024
iPad
Resolution
1536 x 2048
DP
768 x 1024
Typical Laptop
Resolution
1366 x 768
DP
1366 x 768
Typical Desktop
Resolution
1920 x 1080
DP
1920 x 1080
12 Column Responsive Fluid Grid
W3.CSS also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!
This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.
You will learn a lot more about the fluid grid in a later chapter.