CSS レスポンシブレイアウトシステムの例コード

レスポンシブレイアウトシステムは、今日の一般的な CSS フレームワークではすでに非常に一般的です。主にコンテナクラスと、指定された数の行と列を持つグリッドシステムで構成され、フレームワークの骨組みを形成します。

これは、人気のあるフロントエンドフレームワークである Bootstrap と Bulma CSS に反映されています。 Bootstrap の .container、.row、.col; や Bulma CSS の .container、columns、column はすべてこのタイプのレイアウトシステムを表します。名前は異なりますが、原理は同じです。

Flex レイアウトの人気により、ほぼすべての最新のグリッドシステム実装では、この柔軟なレイアウト方法の使用が選択されています。

それでは、最小限の CSS レスポンシブレイアウトシステムを実装する方法を見てみましょう。

まずはコンテナから始めましょう。

実装コードの簡潔性を確保するため、この記事は SCSS で記述します。 SCSS に詳しくない場合でも心配しないでください。使用される知識のポイントはテキストで紹介されます。

容器

コンテナは主に、Web ページのメインコンテンツを囲むために使用されます。一般的な効果は、コンテンツを画面の中央に表示することです。

コンテナを指定するには .container を使用します。

まず、コンテナは水平方向に中央に配置されており、スタイル設定が比較的簡単です。

。容器 {
    左マージン: 自動;
    右マージン: 自動;
}

いわゆるレスポンシブコンテナーは、さまざまなブレークポイント、つまり現在のビューポートの幅に基づいて、コンテナーで使用される最大幅の値を決定します。

ここでは、Bootstrap のブレークポイントの定義を参照し、ビューポートの幅に応じて次のカテゴリに分類します。

[0, 576ピクセル)
[576ピクセル、768ピクセル)
[768ピクセル、992ピクセル)
[992ピクセル、1200ピクセル)
[1200ピクセル、+∞)

ブレークポイントの定義には、変数 $breakpoints を宣言します。

$ブレークポイント: (
    // 超小型画面 / 電話
    xs: 0,
    // 小型画面 / 電話
    小: 576ピクセル、
    // 中画面 / タブレット
    サイズ: 768px,
    // 大画面 / デスクトップ
    lg: 992ピクセル、
    // 特大画面 / ワイドデスクトップ
    XL: 1200ピクセル
);

$breakpoints は「リスト」と呼ばれ、SCSS によって提供されるデータ構造です。キー:値のペアで構成されます。上記の例のキーは、デバイスの有効範囲の開始点を示します。

コンテナには、デバイスごとに異なる最大幅の値が存在します。そこで、ここではコンテナの幅を表す別の変数 $container-max-widths を宣言します。

$コンテナの最大幅: (
    xs: なし、
    小: 540ピクセル、
    サイズ: 720px,
    lg: 960ピクセル、
    サイズ: 1140ピクセル
);

ここで、$container-max-widths もリストであり、ここでのキーは特定のデバイスでのコンテナーの最大幅を表します。たとえば、超大画面デバイスではコンテナの最大幅は 1140 ピクセルですが、通常の携帯電話ではコンテナの最大幅は設定されておらず、デフォルト値の none になります。

実装のアイデアができたので、実装を開始できます。

メディアクエリディレクティブ @media を使用すると、ビューポートの幅の範囲に応じて .container に異なる max-width 値を与えることができます。

@each $device、$breakpoints 内の $breakpoint {
    @media 画面のみと (min-width: $breakpoint) {
        。容器 {
            最大幅: map-get($container-max-widths, $device);
        }
    }
}

7 行のコードで完了です。

上記のコードについては以下で説明します。

@each...in 構文を使用してリストを走査し、毎回対応するキーと値を取り出して、現在の $device と $breakpoint を取得します。 Map-get は、リストを操作するために SCSS によって提供されるメソッドです。キーに従って値を取得します。たとえば、$device の値が xs の場合、map-get($container-max-widths, $device) の対応する値は none になります。$device の値が sm の場合、map-get($container-max-widths, $device) の対応する値は 540px になります。

@media only screen and (min-width: $breakpoint) { ... }に含まれるコードは、現在のデバイスのブレークポイントから適用される CSS スタイルを示します。ブレークポイントに 2 つのメディアクエリを同時に昇順で設定すると、後者のスタイルが前者のスタイルを上書きします。これが、異なるビューポートで異なる幅のコンテナーを実現するための基本原則です。

次に、取得した幅の値をコンテナの max-width プロパティに割り当てます。

ここまでで、レスポンシブなコンテナを作成しました。コードを見てみましょう。

$ブレークポイント: (
    // 超小型画面 / 電話
    xs: 0,
    // 小型画面 / 電話
    小: 576ピクセル、
    // 中画面 / タブレット
    サイズ: 768px,
    // 大画面 / デスクトップ
    lg: 992ピクセル、
    // 特大画面 / ワイドデスクトップ
    XL: 1200ピクセル
);
$コンテナの最大幅: (
    xs: なし、
    小: 540ピクセル、
    サイズ: 720px,
    lg: 960ピクセル、
    サイズ: 1140ピクセル
);
。容器 {
    左マージン: 自動;
    右マージン: 自動;
}
@each $device、$breakpoints 内の $breakpoint {
    @media 画面のみと (min-width: $breakpoint) {
        。容器 {
            最大幅: map-get($container-max-widths, $device);
        }
    }
}

効果を確認するにはここをクリックしてください。

次に、12列のグリッドレイアウトを紹介します。

12列グリッドレイアウト

まず、Flex レイアウトを使用して、最も単純な等幅レイアウトを記述します。

。行 {
    ディスプレイ: フレックス;
    
    .col {
        フレックス成長: 1;
        フレックス基準: 0;
    }
}

そうです、これが Flex レイアウトを使用して均一な幅のレイアウトを実装するためのコードのすべてです。間の空白行を無視すると、必要なコードは 7 行だけです。

ここでの原則は、すべてのフレックスアイテムの flex-basis を 0 に設定することです。つまり、これらのフレックスアイテムは拡大または縮小する前は幅がなく、長さは同じになります。このようにして、最終的に計算された主軸スペースは各 Flex アイテムに均等に分配され、同じ幅になります。

これまでに記述した単純なグリッドレイアウトには、次の 2 つの制限があります。

1. 幅が等しくないアイテムはレイアウトできません。
2. 行の折り返しはサポートされていません。

行の折り返しは簡単に行えます。Flex コンテナーに flex-wrap: wrap を追加するだけです。では、「幅が等しくないアイテム」のレイアウトはどのように処理すればよいのでしょうか?

等幅でないアイテムのレイアウトを実現するためのアイデアは、Flex アイテムの伸縮プロパティを無効にし、パーセンテージ幅を使用して幅を指定するというものです。

まず、Flex プロジェクトの flex 機能を無効にします。使用するプロパティは次のとおりです。

フレックス収縮: 0;
フレックス成長: 0;
フレックス基準: 0;

これら 3 つのプロパティを同等に記述するためのショートカットは次のとおりです。

flex: none;

次に、パーセンテージ幅を使用して幅を指定します。

最大 12 列のグリッドレイアウトを実装します。つまり、行は 12 列に分割され、各列の幅は全体の幅の約 8.33% になります。 .is-columns を使用して、アイテムが占める列の数を指定します。

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

このルールに従って、グリッドレイアウトコードを簡単に記述できます。

$列数: 12;

。行 {
    ディスプレイ: フレックス;
    
    .col {
        フレックス成長: 1;
        フレックス基準: 0;
        
        @for $i は 1 から 12 まで {
            &.is-#{$i} {
                フレックス: なし;
                幅: パーセンテージ($i / 12);
            }
        }
    }
}

ここでは、@for ディレクティブの@for $var from <start> through <end>構文を使用し、1 から 12 まで増加して、.is-* などの一連のクラス名を定義します。原則として、前述のように Flex アイテムの伸縮性プロパティを無効にし、パーセンテージ幅を割り当てます。どうですか、とても簡単ですよね？

次に、改行 ( .row.is-multiline ) と flex アイテムのオフセット ( .is-offset-* ) のサポートを追加します。

コードを見てみましょう:

$列数: 12;

。行 {
    ディスプレイ: フレックス;
    
    &.is-multiline {
        flex-wrap: ラップ;   
    }
    
    .col {
        フレックス成長: 1;
        フレックス基準: 0;
        
        @for $i は 1 から 12 まで {
            &.is-#{$i} {
                フレックス: なし;
                幅: パーセンテージ($i / 12);
            }
            &.is-offset-#{$i} {
                左余白: パーセンテージ($i / 12);
            }
        }
    }
}

.is-multiline は .row と組み合わせて使用され、flex-wrap: wrap の効果を実現します。アイテムのオフセットは margin-left で行われます。
プロパティの実装。

これで12列のグリッドレイアウトが完成しましたヾ(◍°∇°◍)ﾉﾞ

完全なコード

上記の 2 つのコード部分を組み合わせると、最小限のレスポンシブレイアウトシステムが得られます。O(∩_∩)O

$ブレークポイント: (
    // 超小型画面 / 電話
    xs: 0,
    // 小型画面 / 電話
    小: 576ピクセル、
    // 中画面 / タブレット
    サイズ: 768px,
    // 大画面 / デスクトップ
    lg: 992ピクセル、
    // 特大画面 / ワイドデスクトップ
    XL: 1200ピクセル
);
$コンテナの最大幅: (
    xs: なし、
    小: 540ピクセル、
    サイズ: 720px,
    lg: 960ピクセル、
    サイズ: 1140ピクセル
);
。容器 {
    左マージン: 自動;
    右マージン: 自動;
}
@each $device、$breakpoints 内の $breakpoint {
    @media 画面のみと (min-width: $breakpoint) {
        。容器 {
            最大幅: map-get($container-max-widths, $device);
        }
    }
}
$列数: 12;
。行 {
    ディスプレイ: フレックス;
    &.is-multiline {
        flex-wrap: ラップ;   
    }
    .col {
        フレックス成長: 1;
        フレックス基準: 0;
        @for $i は 1 から 12 まで {
            &.is-#{$i} {
                フレックス: なし;
                幅: パーセンテージ($i / 12);
            }
            &.is-offset-#{$i} {
                左余白: パーセンテージ($i / 12);
            }
        }
    }
}

効果はここで確認できます。

もちろん、より豊富な機能を任意に追加できますが、ここでは最も単純なコード実装のみを提供します。

要約する

上記は、エディターが紹介した CSS レスポンシブレイアウトシステムのサンプルコードです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<: 純粋な HTML タグにどれくらい精通していますか?

>>: docker cp ファイルをコピーしてコンテナに入る