W3.CSS

W3.CSSホーム W3.CSSイントロ W3.CSSカラー W3.CSSコンテナ W3.CSSパネル W3.CSSボーダー W3.CSSカード W3.CSSのデフォルト W3.CSSフォント W3.CSS Google W3.CSSテキスト W3.CSSラウンド W3.CSSパディング W3.CSSマージン W3.CSSディスプレイ W3.CSSボタン W3.CSSノート W3.CSSの見積もり W3.CSSアラート W3.CSSテーブル W3.CSSリスト W3.CSS画像 W3.CSS入力 W3.CSSバッジ W3.CSSタグ W3.CSSアイコン W3.CSSレスポンシブ W3.CSSレイアウト W3.CSSアニメーション W3.CSS効果 W3.CSSバー W3.CSSドロップダウン W3.CSSアコーディオン W3.CSSナビゲーション W3.CSSサイドバー W3.CSSタブ W3.CSSページ付け W3.CSSプログレスバー W3.CSSスライドショー W3.CSSモーダル W3.CSSツールチップ W3.CSSグリッド W3.CSSコード W3.CSSフィルター W3.CSSトレンド W3.CSSケース W3.CSSマテリアル W3.CSS検証 W3.CSSバージョン W3.CSSモバイル

W3.CSSカラー

W3.CSSカラークラス W3.CSSカラー素材 W3.CSSカラーフラットUI W3.CSSカラーメトロUI W3.CSSカラーWin8 W3.CSSカラーiOS W3.CSSカラーファッション W3.CSSカラーライブラリ W3.CSSカラースキーム W3.CSSカラーテーマ W3.CSSカラージェネレーター

Web構築

Webイントロ Web HTML Web CSS Web JavaScript Webレイアウト Webバンド Webケータリング Webレストラン Webアーキテクト

W3.CSSの例 W3.CSSデモ W3.CSSテンプレート

参考文献

W3.CSSリファレンス W3.CSSダウンロード

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から削除されます。