応答クラス
W3.CSSはあなたのレイアウトを処理するために応答して、モバイル第1グリッドシステムが含まれています。
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-半分 | （中規模および大規模の画面上）ウィンドウの1/2を占めています |
| W3三分の | （中規模および大規模の画面上）ウィンドウの1/3を占めています |
| W3-twothird | （中規模および大規模の画面上）ウィンドウの2/3を占めています |
| W3-四半期 | （中規模および大規模の画面上）ウィンドウの1/4を占めています |
| W3-threequarter | （中規模および大規模の画面上）ウィンドウの3/4を占めています |
| W3-休息 | 行の残りの部分を定義します |
| W3-COL | （後の章でより）12列応答性流体グリッドで列を定義します |
応答行
応答のクラスは、完全に反応するようにW3-行の内側に配置する必要があります。
| クラス | 説明 |
|---|---|
| W3-行 | 応答クラスのためのパディングレスコンテナを定義します。 |
| W3-行パディング | 応答クラスのためのパッド入りのコンテナを定義します。 |
W3半クラス
W3-半分クラスの幅は、親要素（スタイル= "：50％幅"）の1/2です。
小さな*画面上では、100％に変更されます。
W3-半分
W3-半分
例
<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> »それを自分で試してみてください W3-第三クラス
W3-第三クラスの幅は、親要素（スタイル= "：33.33パーセント幅」）の1/3です。
小さな*画面上では、100％に変更されます。
W3三分の
W3三分の
W3三分の
W3-三分の一を用いて、実施例
<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> »それを自分で試してみてください W3-twothirdクラス
W3-twothirdクラスの幅は、親要素（スタイル= "：66.66パーセント幅」）の2/3です。
小さな*画面上では、100％に変更されます。
W3-twothird
W3三分の
W3-三分の一を用いて、実施例
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> »それを自分で試してみてください W3四半期のクラス
W3四半期クラスの幅は、親要素（スタイル= "：25％幅"）の1/4です。
小さな*画面上では、100％に変更されます。
W3-四半期
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-threequarterクラス
W3-threequarterクラスの幅は、親要素（スタイル= "75％幅"）の3/4です。
小さな*画面上では、100％に変更されます。
W3-四半期
W3-四半期
W3-threequarterを用いて、実施例
<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-半分W3-半分インサイド
<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> »それを自分で試してみてください レストを使用して列
私は150ピクセルです
私は残りの部分です
W3-残りの部分を使用して、実施例
<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> »それを自分で試してみてください パーセントを使用して列
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-コンテンツクラス
W3-コンテンツクラスは、固定サイズの中心にコンテンツのコンテナを定義します。
W3-行とW3-行パディングの違い
W3-行パディングクラスは、各列に8px左右のパディングを追加しながら、W3-行クラスは、パッド入りのレスコンテナを定義しています。
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_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> »それを自分で試してみてください 12列応答性流体グリッド
W3.CSSはまた、先進的な12列応答性流体グリッドをサポートしています。
効果を確認するために、ページのサイズを変更！
この部分は、大画面で12培地画面上の小さな画面、4上の列、および3を占有します。
この部分は、大画面で12培地画面上の小さな画面、8上の列、および9を占有します。
あなたは後の章で流体グリッドについての詳細を学びます。
*画面の解像度
W3.CSSの組み込みの応答性は、画面のDPサイズを使用しています。
W3.CSSは375のx 667ピクセルの小さな画面と750のx 1334ピクセルの解像度でiPhone 6を扱います。
小さな画面が601ピクセルDP未満であり、メディアの画面が993ピクセルDP未満です。
以下は典型的なデバイスの解像度の一覧で、DPのサイズを報告しました。
iphone 4
解決
640×960
DP
320×480
iPhone 5
解決
X 1136 640
DP
320×528
iphone 6
解決
X 1334 750
DP
375のx 667
iphone 6S
解決
X 1920 1080
DP
414のx 736
ギャラクシーS6
解決
X 2560 1440
DP
360×640
注4
解決
X 2560 1440
DP
400×853
ネクサス6
解決
X 2560 1440
DP
411のx 731
アイパッドミニ
解決
X 1024 768
DP
X 1024 768
iPadの
解決
X 2048 1536
DP
X 1024 728
一般的なノートPC
解決
1366 x 768
DP
1366 x 768
典型的なデスクトップ
解決
X 1080 1920
DP
X 1080 1920