w3-row:
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
rest
1/4
rest
100px
45px
rest
W3.CSS のグリッドシステムはレスポンシブで、カラムは画面サイズに応じて自動的に再配置されます：
| クラス | 説明 |
|---|---|
| w3-half | window の 1/2 を占有する (中型および大型画面の場合) |
| w3-third | window の 1/3 を占有する (中型および大型画面の場合) |
| w3-twothird | window の 2/3 を占有する (中型および大型画面の場合) |
| w3-quarter | window の 1/4 を占有する (中型および大型画面の場合) |
| w3-threequarter | window の 3/4 を占有する (中型および大型画面の場合) |
| w3-rest | 行の残りの部分を定義する |
| w3-col | 12 カラム・レスポンシブ流動グリッドでカラムを定義する (詳細は後の章で) |
レスポンシブ・クラスは、完全なレスポンシブにするためには w3-row 内に配置する必要があります。
| クラス | 説明 |
|---|---|
| w3-row | レスポンシブ・クラス用のパディングなしコンテナを定義する。 |
| w3-row-padding | レスポンシブ・クラス用のパディング付きコンテナを定義する。 |
w3-half クラスの幅は、親要素の 1/2 です（style="width:50%"）。
小型画面では、100% にサイズが変更されます。
<div class="w3-row">
<div class="w3-green w3-container w3-half">
<h2>w3-half</h2>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
</div>
</div>
Try It Yourself ❯
w3-third クラスの幅は、親要素の 1/3 です（style="width:33.33%"）。
小型画面では、100% にサイズが変更されます。
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
Try It Yourself ❯
w3-twothird クラスの幅は、親要素の 2/3 です（style="width:66.66%"）。
小型画面では、100% にサイズが変更されます。
<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>
Try It Yourself ❯
w3-quarter クラスの幅は、親要素の 1/4 です（style="width:25%"）。
小型画面では、100% にサイズが変更されます。
<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>
Try It Yourself ❯
w3-threequarter クラスの幅は、親要素の 3/4 です（style="width:75%"）。
小型画面では、100% にサイズが変更されます。
<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>
Try It Yourself ❯
<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>
Try It Yourself ❯
w3-rest class will use what's left of the grid column.
I am 150px
I am the rest
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest
w3-green"><p>rest</p></div>
</div>
Try It Yourself ❯
You can also use the CSS width property to determine a specific width of the columns.
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>
Try It Yourself ❯
w3-content クラスは、固定サイズの中央揃えコンテンツ用のコンテナを定義します。 デフォルトの幅（980px）をオーバーライドするには、CSS の max-width プロパティを使用します。
w3-row クラスはパディングなしのコンテナを定義する一方で、w3-row-padding クラスは、各カラムに左右 8px のパディングを追加します：
w3-row:
w3-row-padding:
<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_fjords.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_fjords.jpg"></div>
</div>
Try It Yourself ❯
w3-hide-small、w3-hide-medium、w3-hide-large クラスは、指定の画面サイズ上の要素を非表示にします。
注: どのように動作するかを理解するために、ブラウザウィンドウのサイズを変更してください：
<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>
Try It Yourself ❯
W3.CSS の組み込みのレスポンシブは、画面の DP サイズを使用しています。
W3.CSS は、解像度が 750 x 1334 ピクセルの iPhone6 を 375 x 667 ピクセルの小型画面と同じよとみなします。
小型画面は、601 ピクセル DP 未満で、中型画面は、993 ピクセル DP 未満です。
以下は、典型的なデバイスの解像度と、報告された DP サイズのリストです：
Resolution
640 x 960
DP
320 x 480
Resolution
640 x 1136
DP
320 x 528
Resolution
750 x 1334
DP
375 x 667
Resolution
1080 x 1920
DP
414 x 736
Resolution
1440 x 2560
DP
360 x 640
Resolution
1440 x 2560
DP
400 x 853
Resolution
1440 x 2560
DP
411 x 731
Resolution
768 x 1024
DP
768 x 1024
Resolution
1536 x 2048
DP
728 x 1024
Resolution
1366 x 768
DP
1366 x 768
Resolution
1920 x 1080
DP
1920 x 1080
W3.CSS はまた、高度な 12 カラム・レスポンシブ流動グリッドもサポートしています。
効果を確認するために、ページのサイズを変更してください !
この部分は、小型画面では 12 カラム、中型画面では 4 カラム、大型画面では 3 カラムを占有します。
この部分は、小型画面では 12 カラム、中型画面では 8 カラム、大型画面では 9 カラムを占有します。
流動グリッドに関しては、後の章で詳細を学習します。