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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。