CSS グリッドとフレックスボックスを使用したレスポンシブ Web デザイン

レスポンシブ Web デザインは、さまざまな種類のデバイスや画面サイズで適切に動作するように Web サイトを開発する方法です。レスポンシブ デザインでは、デバイスごとにサイトの複数のバージョンを作成する必要がなく、柔軟なグリッドとレイアウト、メディア クエリ、流動的な画像を使用して、すべてのプラットフォームでユーザー エクスペリエンスを向上させます。

レスポンシブ Web デザインが重要な理由

世界中で携帯電話やタブレットを使用してインターネットを閲覧する人が増えているため、応答性の高い Web サイトを持つことはもはや選択肢ではなく、必須となっています。レスポンシブデザインにより、消費者は使用しているデバイスに関係なくコンテンツにシームレスにアクセスできるため、使いやすさが向上します。また、コンテンツが視覚的に一貫性があり、デバイス間で簡単に読み取れるようにすることで、ユーザー エクスペリエンスも向上します。これにより、フラストレーションが軽減され、インタラクションが促進されます。さらに、レスポンシブ デザインは Web サイトを将来にわたって使用できるため、大規模な再設計を行うことなく新しいデバイスに適応させることができます。

今日は、レスポンシブ Web デザインの基本を見て、特に 2 つの強力な CSS テクニック、Flexbox と CSS Grid に焦点を当てます。カラフルなボックスと数字を備えたシンプルな Web サイトを使用して、これらのレイアウトがさまざまな画面サイズにどのように適応するかを示します。

レスポンシブ Web デザインの簡単な歴史

レスポンシブ Web デザインは、インターネットの初期の頃から大きく変化しました。メディア クエリ。画面サイズ、解像度、方向などのデバイスの特性に基づいてスタイルを適用します。は 2000 年代初頭に導入され、Flexbox は 2012 年に発売され、CSS グリッドは 2017 年に採用されました。これらの革新により、デザイナーはさまざまなデバイス上で適応可能なレイアウトを作成できるようになり、ユーザーにより良いエクスペリエンスを提供できるようになりました。

CSS グリッドとフレックスボックスを使用したレスポンシブ レイアウトの作成

それでは、Flexbox と CSS グリッドがどのように機能するかを示す実際の例をいくつか見てみましょう。

レスポンシブグリッドレイアウト: カラーグリッド

CSSグリッドを使用して簡単なレイアウトを作成します。

グリッド レイアウトの HTML:

    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
    

HTML:

• HTML マークアップは、異なる番号と背景色を持つレスポンシブ コンテナ (グリッド コンテナ) とカラフルなボックス (グリッド アイテム) を作成します。ビューポート メタ タグを使用すると、さまざまなデバイス上でレイアウトを拡大縮小できます。

グリッド レイアウトの CSS:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f0f0f0;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    padding: 20px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS:

• グリッド レイアウトの CSS は、応答性を高めるためにさまざまなグリッド プロパティを使用します。表示: グリッド。宣言では、grid-container クラスの要素をグリッド コンテナとして設定するため、グリッドが提供するすべての機能を利用できるようになります。グリッド テンプレート列:repeat(auto-fit, minmax(100px, 1fr));プロパティは、グリッド内の列の構造を定義します。このプロパティは、利用可能なスペースに基づいて列の数を自動的に調整します。各列の最小幅は 100 ピクセル、最大は利用可能なスペースの 1 部分 (1fr) です。この設計により、グリッドをさまざまな画面サイズに適応させることができるため、グリッド項目が溢れたり、見苦しい隙間が生じたりすることがなくなります。ギャップ: 10px;プロパティは、グリッド項目に一貫した間隔を適用します。最後に、display: flex; を使用して Grid-Item 要素をスタックします。そして、justify-content: center; を使用してコンテンツを中央に配置します。そして、align-item: center。このように、各項目がバランスよく整理されています。

レスポンシブ Web デザインの例: グリッド レイアウト

このグリッド レイアウトは次のものを使用します:

1. 動的列数: グリッドはビューポートの幅に合わせて列数を自動的に調整します。項目の最小サイズは 100 ピクセルです。
2. 柔軟なサイズ設定: 自動調整により、必要に応じてボックスが再配置され、すべてがより整理された外観になります。
3. メディア クエリ: ここには実際には書かれていませんが、さまざまな画面サイズでグリッド要素がどのように動作するかは、レスポンシブ グリッド プロパティを使用したメディア クエリの概念を示しています。

レスポンシブ フレックスボックス レイアウト: カラー行

次に、Flexbox を使用して、色付きのボックスの単純な行を作成しましょう。

フレックスボックス レイアウトの HTML:

    
    
    
    


    

        
1
        
2
        
3
        
4
    

HTML:

• グリッドの例と同様に、ここの HTML では、色付きの数字を表示するフレックス項目ボックスを備えたフレックス コンテナが作成されます。

フレックスボックス レイアウトの CSS:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
    gap: 10px;
}

.flex-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    color: #fff;
    font-size: 2em;
    border-radius: 8px;
}

CSS:
ここの CSS は、Flexbox プロパティを使用して、さまざまな画面サイズに適応する応答性の高いレイアウトを作成します。ディスプレイ: フレックス; .flex-container 内の は、その子要素、または (フレックス項目)、Flexbox 機能を提供します。フレックスラップ: ラップ;プロパティを使用すると、コンテナの幅を超えた場合にアイテムを複数行にフローできます。 justify-content: center;プロパティはフレックス項目を主軸に沿って中央に配置するため、項目の数に関係なくバランスの取れたレイアウトになります。ギャップ: 10px;このプロパティにより、項目間に均一な間隔が導入され、全体的な構成が改善されます。各 .flex-item は、display: flex; を使用するフレックス コンテナでもあります。 justify-content: center; を使用して、内部コンテンツをさらに配置できるようにし、垂直方向と水平方向の両方で中央揃えにします。および align-item: center;。高さの固定寸法: 100px;幅: 100px;均一性を提供し、これらのプロパティの組み合わせにより、レイアウトに快適な外観を与えながら、さまざまなデバイスのニーズに適応します。

レスポンシブ Web デザインの例: フレックスボックス レイアウト

このフレックスボックス レイアウトは、いくつかのレスポンシブ デザイン特性を示しています。

1. フレックス ラップ: フレックス ラップ: ラップ;
プロパティは、ボックスが行に収まらない場合に次の行に移動し、さまざまなビューポート幅に適応します。
2. アイテムを中央揃え: 画面サイズに関係なくアイテムは中央に配置され、全体的なプレゼンテーションが向上します。
3. 固定サイズ: ボックスには特定のサイズがありますが、使用可能なスペースに基づいてラップおよび再調整され、レスポンシブなレイアウトが可能になります。

CSS グリッドとフレックスボックスの比較

CSS でのレイアウト設計に関しては、グリッドとフレックスボックスはどちらも優れた選択肢ですが、目的は異なります。 CSS グリッドは、行と列を含む複雑なグリッド構造を作成できる 2 次元レイアウト システムであり、Web アプリケーションやダッシュボードなど、両方の次元を正確に制御する必要があるレイアウトに最適です。一方、Flexbox は 1 次元のレイアウト モデルであり、単一の軸 (水平方向または垂直方向) に沿ってスペースを分散するのに最適であり、より単純なレイアウトや、ボタンやナビゲーション メニューなどの小さなコンポーネントに最適です。要素が両方の軸にわたって整列する必要がある包括的で構造化されたレイアウトにはグリッドを選択するかもしれませんが、コンテンツ サイズに対応する必要がある適応性のある流動的なレイアウトには Flexbox が最適です。最終的には、プロジェクトの具体的なニーズに応じて選択する必要があります。多くの場合、両方を組み合わせて補完的に使用すると、最良の結果が得られます。

結論

CSS グリッドとフレックスボックスを使用すると、どのデバイスでも見栄えの良い、適応性のあるレイアウトを作成できます。これらの例は、動的デザインを実装することがいかに簡単であるかを示しています。

今ではあなたの番です！これらのテクニックを試し、色やレイアウト設定を変更し、楽しくて反応の良いデザインをいかに簡単に作成できるかを確認してください。
「
ソース:
https://www.w3schools.com/css/css3_flexbox.asp
https://www.w3schools.com/css/css_grid.asp
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout
https://kinsta.com/blog/sensitive-web-design/#4-flexbox-layout
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/snippets/css/complete-guide-grid/
https://blog.logrocket.com/css-flexbox-vs-css-grid/#:~:text=行を操作するときに役立つ主要なレイアウト スタイル。