W3.CSSレイアウト
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
W3.CSSレイアウトクラス
W3.CSSバージョン2.90 / 2.91では、「列のような」レイアウト用に次のクラスが導入されました。
クラス | 説明 |
---|---|
w3-セル行 | セル(列)のコンテナー。 |
w3セル | レイアウトセル(列)。 |
w3-セルトップ | セル(列)の上部にコンテンツを配置します。 |
w3-セル-ミドル | セル(列)の垂直方向の中央にコンテンツを配置します。 |
w3-セルボトム | セル(列)の下部にコンテンツを配置します。 |
w3-モバイル | セル(列)にモバイルファーストの応答性を追加します。 モバイルデバイスで要素をブロック要素として表示します。 |
レイアウトクラスは、非推奨のレイアウトクラスを置き換えます。
新しいレイアウトクラッサーは、より用途が広く、使いやすくなっています。
非推奨のレイアウトクラスは、このページの下部にリストされています。
HTMLブロック要素
元々、HTMLブロック要素(<div>要素など)は垂直ブロックとして表示されます。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
例
<div class="w3-container w3-red">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green">
<p>Hello W3.CSS Layout.</p>
</div>
レイアウトセル
w3-cellクラスは、ブロック要素を再定義して(テーブルセルのように)水平に表示します。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
例
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
レイアウトコンテナ
w3-cell-rowは、セル(列)のコンテナーです。
w3セル行コンテナの幅は、含まれるすべてのセルの合計幅を定義します。
デフォルトの幅は100%です。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
例
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
セルコンテナの幅を変更すると、含まれているセルの合計幅が狭くなります。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
例
<div class="w3-cell-row"
style="width:75%">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
レイアウトセルは自動調整
w3セルクラスには、非常に優れた自動調整標準が組み込まれています。並べた要素は、必要な幅に自動的に調整されます。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。こんにちはW3.CSSレイアウト。
例
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout. Hello W3.CSS Layout.</p>
</div>
レイアウトセルは同じ高さに調整されます
並べて配置されたw3セル要素も、同じ高さに自動的に自動調整されます。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
例
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
レスポンシブレイアウト
w3-mobileクラスは、任意のHTML要素にモバイルファーストの応答性を追加します。
w3セルと併用すると、レイアウト列が小画面/携帯電話では縦に、中/大画面では横に表示されます。
中画面および大画面の場合:
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
小さな画面の場合:
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
例
<div class="w3-container w3-red
w3-cell w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-mobile">
<p>Hello W3.CSS Layout.</p>
</div>
<div
class="w3-container w3-blue w3-cell w3-mobile">
<p>Hello
W3.CSS Layout.</p>
</div>
簡単な位置合わせ
w3セルクラスを使用すると、テキストの整列が非常に簡単になります。
3つの異なるアライメントクラスがあります。
- w3-cell-top(デフォルト)
- w3-セル-ミドル
- w3-セルボトム
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
例
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
w3-cell-rowクラスは、ページ幅に合うように要素を拡張します。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
こんにちはW3.CSSレイアウト。
例
<div class="w3-cell-row">
<div class="w3-container w3-red w3-cell">
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-green w3-cell
w3-cell-middle">
<p>Hello W3.CSS Layout.</p>
</div>
<div class="w3-container w3-blue w3-cell
w3-cell-bottom">
<p>Hello W3.CSS Layout.</p>
</div>
</div>
非推奨のW3.CSSテーブルレイアウトクラス
w3-layout-container | 代わりにw3-cell-rowを使用してください。 |
w3-レイアウト行 | |
w3-レイアウトセル | 代わりにw3-cellを使用してください。 |
w3-レイアウト-トップ | 代わりにw3-cell-topを使用してください。 |
w3-レイアウト-中央 | 代わりにw3-cell-middleを使用してください。 |
w3-レイアウト-下部 | 代わりにw3-cell-bottomを使用してください。 |
w3-layout-col | 代わりにw3-mobileを使用してください。 |
非推奨のクラスは、バージョン4.0でW3.CSSから削除されます。