W3css-grids
W3.CSS-グリッド
W3.CSSは、12列の流体応答グリッドを提供します。
w3-rowおよびw3-colスタイルクラスを使用して、それぞれ行と列を定義します。
| Sr. No. | Class Name & Description |
|---|---|
| 1 |
w3-row レスポンシブ列に使用するパディングなしのコンテナーを指定します。 このクラスは、レスポンシブクラスが完全にレスポンシブであるために必須です。 |
| 2 |
w3-col サブクラスを持つ列を指定します |
w3-colには、さまざまなタイプの画面を対象としたいくつかのサブクラスがあります。
小画面デバイス用の列
以下は、小さな画面デバイス、通常はスマートフォン用の列レベルのスタイルのリストです。
Sr. No.
クラス名と説明
1
s1
幅が08.33％の12列のうち1列を定義します。
2
s2
16.66％の幅で12列のうち2列を定義します。
3
s3
幅が25.00％の12列のうち3列を定義します。
4
s4
33.33％の幅で12列のうち4列を定義します。
5
12列のうち12列を幅100％で定義します。 スモールスクリーンフォンのデフォルトクラス。
中画面デバイス用の列
以下は、中程度の画面のデバイス（通常はタブレット）の列レベルのスタイルのリストです。
Sr. No.
クラス名と説明
1
m1
幅が08.33％の12列のうち1列を定義します。
2
m2
16.66％の幅で12列のうち2列を定義します。
3
m3
幅が25.00％の12列のうち3列を定義します。
4
m4
33.33％の幅で12列のうち4列を定義します。
5
12列のうち12列を幅100％で定義します。 中型の携帯電話のデフォルトクラス。
大画面デバイス用の列
以下は、大画面デバイス（通常はラップトップ）の列レベルのスタイルのリストです。
Sr. No.
クラス名と説明
1
|1
幅が08.33％の12列のうち1列を定義します。
2
|2
16.66％の幅で12列のうち2列を定義します。
3
|3
幅が25.00％の12列のうち3列を定義します。
4
|4
33.33％の幅で12列のうち4列を定義します。
5
12列のうち12列を幅100％で定義します。 大画面デバイスのデフォルトクラス。
使用法
各サブクラスは、デバイスのタイプに基づいて、使用するグリッドの列数を決定します。 次のHTMLスニペットを考えてください。
HTML要素のclass属性でサブクラスが指定されていない場合、デバイスで使用されるデフォルトの列は12です。
例
w3css_grids
結果
結果を確認します。
