最新のWeb開発のチュートリアル
 

W3.CSS応答性流体グリッド


応答グリッド

W3.CSSは12列応答性流体グリッドをサポートしています。

効果を確認するために、ページのサイズを変更!

1
2
3
4
5
6
7
8
9
10
11
12

この部分は、大画面で12培地画面上の小さな画面、4上の列、および3を占有します。

この部分は、大画面で12培地画面上の小さな画面、8上の列、および9を占有します。

1
2
3
4
5
6
7
8
9
10
11
12

<div class="w3-row">
  <div class="w3-col m4 l3">
    <p>12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
  </div>
  <div class="w3-col m8 l9">
    <p>12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.</p>
  </div>
</div>
»それを自分で試してみてください

応答行

W3.CSSのグリッドシステムが応答して、列が画面サイズに応じて自動的に再配置されます:それは3つの列に編成内容とのより良いに見えるかもしれません大きな画面ではなく、小さな画面では、コンテンツであれば良いだろう項目は、互いの上に積層しました。

列は完全に反応するようにの内側に存在する必要があります。

クラス 説明
W3-行 応答列のパディングレスコンテナを定義します。
W3-行パディング 応答列のパッド入りのコンテナを定義します。
W3-COL サブクラスで列を定義します

W3-COLは、以下のサブのクラスがあります。

小さな画面(典型的なスマートフォン)用カラム:

クラス 説明
S1 小さな画面のために:1 12の列(08.33パーセント幅)を定義します
S2 小さな画面のために:2 12の列(16.66パーセント幅)を定義します
S3 小さな画面のために:3 12の列(25.00パーセント幅)を定義します
S4 小さな画面のために:4 12の列(33.33パーセント幅)を定義します
S5-S11
S12 12 12の列(:100%幅)を定義します。 小さな画面のデフォルト

メディアスクリーン用の列(典型的な錠):

クラス 説明
M1 メディア画面用:1 12の列(08.33パーセント幅)を定義します
平方メートル ミディアムスクリーン用:2 12の列(16.66パーセント幅)を定義します
立方メートル ミディアムスクリーン用:3 12の列(25.00パーセント幅)を定義します
M4 ミディアムスクリーン用:4 12の列(33.33パーセント幅)を定義します
M5-M11
M12 12 12の列(:100%幅)を定義します。 メディアの画面のデフォルト

大画面の列(典型的なラップトップ):

クラス 説明
L1 大画面のために:1 12の列(08.33パーセント幅)を定義します
L2 大画面のために:2 12の列(16.66パーセント幅)を定義します
L3 大画面のために:3 12の列(25.00パーセント幅)を定義します
L4 大画面のために:4 12の列(33.33パーセント幅)を定義します
L5-L11
L12 12 12の列(:100%幅)を定義します。 大画面のデフォルト)

クラスは、上記のより動的で柔軟なレイアウトを作成するために組み合わせることができます。

各クラスには、アップスケールなので、あなたが小規模、中規模および大画面のために同じ幅を設定したい場合は、あなただけの小さなクラスを指定する必要があります。 あなたは中規模および大画面上で同じ幅をしたい場合や、あなただけのメディアクラスを指定する必要があります。

あなたが唯一の媒体および/または大規模なクラスを使用する場合は、幅が常に小さな画面上で100%に変換します。

注:列の数は、常にそれぞれの行(6 + 6、3 + 6 + 3、9 + 3、など)のために12まで追加する必要があります!


2つの等しい列

すべての画面サイズ上の2つの等幅の列(50%/ 50%):

S6

S6

<div class="w3-row">
  <div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
  <div class="w3-col s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>
»それを自分で試してみてください

等しくない2つの列

すべての画面サイズに等しくない幅(25%/ 75%)の二つの列:

S3

S9

<div class="w3-row">
  <div class="w3-col s3 w3-green w3-center"><p>s6</p></div>
  <div class="w3-col s9 w3-dark-grey w3-center"><p>s6</p></div>
</div>
»それを自分で試してみてください

3つの等しい列

3つの等しい幅の列(33.3%/ 33.3%/ 33.3%)、すべての画面サイズに:

S4

S4

S4

<div class="w3-row">
  <div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
  <div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
  <div class="w3-col s4 w3-red w3-center"><p>s4</p></div>
</div>
»それを自分で試してみてください

三不等列

三、様々な幅の列(25%/ 50%/ 25%)タブレット、ラップトップおよびデスクトップ上。 携帯電話では、列は自動的に(100%幅)をスタックします。

立方メートル

M6

立方メートル

<div class="w3-row">
  <div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
  <div class="w3-col m6 w3-dark-grey w3-center"><p>m6</p></div>
  <div class="w3-col m3 w3-red w3-center"><p>m3</p></div>
</div>
»それを自分で試してみてください

注:この例では、あなたが学習し、W3四半期(M3)、W3-半分(M6)、W3四半期(M3)を使用するのと同じですW3.CSS応答章。


6列

タブレット、ラップトップおよびデスクトップ上の六等幅の列(16%ずつ)。 携帯電話では、列は自動的に(100%幅)をスタックします。

平方メートル

平方メートル

平方メートル

平方メートル

平方メートル

平方メートル

<div class="w3-row">
  <div class="w3-col m2 w3-green w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-red w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-blue w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-dark-grey w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-black w3-center"><p>m2</p></div>
  <div class="w3-col m2 w3-purple w3-center"><p>m2</p></div>
</div>
»それを自分で試してみてください

ミックス:モバイルとラップトップ

あなたは、動的で柔軟なレイアウトを作成するためのクラスを組み合わせることができます。 この例では、大画面上の83.34パーセント/ 16.66パーセント(L8、L4)の分割や小さな画面上で50%/ 50%(S6、S6)分割して2列のレイアウトを生成します:

L8 S6

L4 S6

<div class="w3-row">
  <div class="w3-col l8 s6 w3-pink w3-center"><p>l8 s6</p></div>
  <div class="w3-col l4 s6 w3-dark-grey w3-center"><p>l4 s6</p></div>
</div>
»それを自分で試してみてください

ミックス:モバイル、タブレット、ラップトップ

この例では、メディアの画面で大画面の25%/ 58.34パーセント/ 16.66パーセント(L3、L7、L2)の分割と3列レイアウト、50%/ 25%/ 25%(M6、M3、M3)の分割を生成し、小さな画面上で33.3%/ 33.3%/ 33.3%(S4、S4、S4)スプリット:

L3 M6 S4

L7立方メートルS4

L2立方メートルS4

<div class="w3-row">
  <div class="w3-col l9 m6 s4 w3-green w3-center"><p>l8 s6</p></div>
  <div class="w3-col l2 m3 s4 w3-dark-grey w3-center"><p>l4 s6</p></div>
  <div class="w3-col l1 m3 s4 w3-red w3-center"><p>l4 s6</p></div>
</div>
»それを自分で試してみてください

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>
»それを自分で試してみてください

パーセントを使用して

20%

60%

20%


45%

55%


15%

35%

10%

30%

10%

<div class="w3-row">
    <div class="w3-col w3-container w3-green" style="width:20%"><p>20%</p></div>
    <div class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
    <div class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>
»それを自分で試してみてください

W3-残りの部分を使用して、

150ピクセル

残り


75px

残り


100pxに

100pxに

残り


四半期

80px

残り

四半期


四半期

四半期

35%

残り

残りの部分を使用して実施例

<div class="w3-row">
    <div class="w3-col" style="width:150px"><p>150px</p></div>
    <div class="w3-rest"><p>rest</p></div>
</div>
»それを自分で試してみてください