検索
ホームページウェブフロントエンドCSSチュートリアルCSSグリッドレイアウトを使用するためにサイトを再設計します

CSSグリッドレイアウトを使用するためにサイトを再設計します

Jennifer Aniston
Jennifer Aniston
Feb 15, 2025 am 08:45 AM

CSSグリッドレイアウトを使用するためにサイトを再設計します

この記事では、レスポンシブマルチコラムWebサイトレイアウトを作成することにより、CSSグリッドが動作していることを確認します。

CSSグリッドは、最近のWeb開発の新しいホットなトレンドです。テーブルのレイアウトとフロートを忘れてください：ウェブサイトを設計する新しい方法はすでにここにあります！このテクノロジーは、複数のレイアウト領域を複数のCSSルールで定義する2次元グリッドを導入します。

グリッドは、960Gやブートストラップグリッドなどのサードパーティのフレームワークを作成できます。この機能はすべての主要なブラウザによってサポートされていますが、インターネットエクスプローラーは仕様の古いバージョンを実装しています。

グリッドレイアウトを初めて使用する場合は、CSSグリッドの初心者向けガイドをご覧ください。

キーテイクアウト

CSSグリッドレイアウトは、マルチコラムレイアウトの作成を簡素化し、フロートやディスプレイテーブルなどの古いテクニックの必要性を排除します。 CSSグリッドにより、グリッド領域を簡単に再配置およびサイズ変更できるようになり、ブートストラップのような従来のCSSフレームワークと比較して、より柔軟で直感的な設計方法になります。

CSSグリッドの実装では、グリッド、列と行のセットアップ、および単純なCSSルールを使用して指定されたグリッド領域に要素を配置するコンテナを表示します。

CSSグリッドは本質的に応答し、最小限のメディアクエリを使用して、さまざまな画面サイズのコンテンツの簡単な再編成を可能にします。 インターネットエクスプローラー、インラインブロック、メディアクエリを使用したフォールバックスタイルなど、CSSグリッドを完全にサポートしていないブラウザの場合、レイアウトがまだ効果的にレンダリングされることを保証します。

CSSグリッドとフレックスボックスを組み合わせて複雑な設計要件を処理し、CSSグリッドの最新のWebデザインにおける互換性と汎用性を紹介できます。
  • 何を構築するのか
  • それで、ヘッダー、メインコンテンツ領域、右側のサイドバー、スポンサーのリスト、フッターを備えた典型的なWebサイトレイアウトを作成するように求められました。
  • 別の開発者はすでにこのタスクを解決しようとしており、フロート、ディスプレイ：テーブル、およびいくつかのClearFixハックを含むソリューションを思いつきました。この既存のレイアウトを「初期」と呼びます。
    • Pen SP：CodepenのSitePoint（@SitePoint）のフロート付きマルチコラムレイアウトを参照してください。
  • 最近まで、フロートはそのようなレイアウトを作成するための最良の選択肢であると考えられていました。それ以前は、HTMLテーブルを利用する必要がありましたが、多くの欠点がありました。具体的には、このようなテーブルレイアウトは非常に剛性が高く、多くのタグ（テーブル、TR、TD、THなど）が必要であり、意味的には、これらのタグはレイアウトを設計するのではなく、テーブルデータを提示するために使用されます。

    しかし、CSSは進化し続けており、今ではCSSグリッドがあります。概念的には、古いテーブルレイアウトに似ていますが、より柔軟なレイアウトを備えたセマンティックHTML要素を使用できます。 グリッドの計画

    最初に

    最初に：ドキュメントの基本的なHTML構造を定義する必要があります。その前に、最初の例がどのように機能するかについて簡単に説明しましょう。次のメインブロックがあります：

      .Containerは、左と右に小さなマージンを持つグローバルなラッパーです。
    • .main-headerは、.logo（スペースの20％を占有し、左に浮かんでいる）と.main-menu（スペースの79％を占有​​し、右に浮かぶ）を含むヘッダーです。ヘッダーには、フロートをクリアするためのハッキーな修正も割り当てられています。
      • .content-area-wrapperは、メインの.content-area（左に浮かんでいるマージン用に予約されたスペースを引いた1レムの66.6％マイナス1レムを占める）と.sidebar（スペースの33.3％を占める）をラップし、右に浮かんでいます）。ラッパー自体には、clearfix。
    • も割り当てられています
      • .sponsors-wrapperには、スポンサーのロゴが含まれています。内部には、表示プロパティがテーブルに設定された.ponsorsセクションがあります。各スポンサーは、テーブルセルとして表示されます。
    • .footerは私たちのフッターであり、スペースの100％までのスパンです。
      • 新しいレイアウトは最初のレイアウトと非常によく似ていますが、1つの例外を除きます。Clearfixesが不要になるため、.main-Headerと.content-Area-wrapperラッパーは追加されません。これがHTML：
    • の新しいバージョンです
    体をグローバル.containerとして利用できることに注意してください。この場合、それは好みの問題です。全体として、6つの主要な領域があります

    ロゴ
    <span><span><span><div> class<span>="container"</span>>
  <span><span><span><header> class<span>="logo"</span>></header></span>
</span>    <span><span><span><h1 id="gt">></h1></span><span><span><a> href<span>="#"</span>></a></span>DemoSite<span><span></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><nav> class<span>="main-menu"</span>></nav></span>
</span>    <span><span><span><ul>></ul></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Our clients<span><span></span>></span><span><span></span>></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Products<span><span></span>></span><span><span></span>></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Contact<span><span></span>></span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><main> class<span>="content-area"</span>></main></span>
</span>    <span><span><span><h2 id="gt">></h2></span>Welcome!<span><span></span>></span>
</span>
    <span><span><span><p>></p></span>
</span>      Content
    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><aside> class<span>="sidebar"</span>></aside></span>
</span>    <span><span><span><h3 id="gt">></h3></span>Additional stuff<span><span></span>></span>
</span>
    <span><span><span><ul>></ul></span>
</span>      <span><span><span><li>></li></span>Items<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Are<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Listed<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Here<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Wow!<span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><section> class<span>="sponsors-wrapper"</span>></section></span>
</span>    <span><span><span><h2 id="gt">></h2></span>Our sponsors<span><span></span>></span>
</span>
    <span><span><span><section> class<span>="sponsors"</span>></section></span>
</span>      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958031899606.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958031899606.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958031899606.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958031899606.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958031899606.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>
  <span><span><span></span>></span>
</span>
  <span><span><span><footer> class<span>="footer"</span>></footer></span>
</span>    <span><span><span><p>></p></span>
</span>      <span title="©">© 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

    メニュー

      メインコンテンツ
      2. サイドバー
      3. スポンサー
      4. フッター
    5. 通常、モバイルファーストアプローチを実装することをお勧めします。つまり、モバイルレイアウトから開始してから、より大きな画面にスタイルを追加します。この場合、これは必要ありません。なぜなら、既に小画面デバイスの線形ビューに戻る初期レイアウトを適応させるからです。したがって、グリッドの実装に焦点を当てることから始めましょう。その後、応答性とフォールバックルールについて話します。したがって、スキームに戻り、グリッド列をどのように配置できるかを確認してください。
    それで、3つの列（赤で強調表示されている）と4列（青で強調表示されている）があることを提案します。ロゴのような一部の領域は1つの列のみを占有しますが、メインコンテンツのような他の領域は複数の列に及ぶでしょう。後で、レイアウトを簡単に変更したり、周囲のレイアウトを移動したり、新しいエリアを追加したりできます。

    スキームに続いて、各エリアに一意の名前を付けます。これらは、以下に定義されているレイアウトで使用されます：

    CSSグリッドレイアウトを使用するためにサイトを再設計しますディスプレイプロパティをグリッドに設定し、3つの列を定義し、メインコンテナの左右に小さなマージンを追加します。

    <span><span><span><div> class<span>="container"</span>>
  <span><span><span><header> class<span>="logo"</span>></header></span>
</span>    <span><span><span><h1 id="gt">></h1></span><span><span><a> href<span>="#"</span>></a></span>DemoSite<span><span></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><nav> class<span>="main-menu"</span>></nav></span>
</span>    <span><span><span><ul>></ul></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Our clients<span><span></span>></span><span><span></span>></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Products<span><span></span>></span><span><span></span>></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Contact<span><span></span>></span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><main> class<span>="content-area"</span>></main></span>
</span>    <span><span><span><h2 id="gt">></h2></span>Welcome!<span><span></span>></span>
</span>
    <span><span><span><p>></p></span>
</span>      Content
    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><aside> class<span>="sidebar"</span>></aside></span>
</span>    <span><span><span><h3 id="gt">></h3></span>Additional stuff<span><span></span>></span>
</span>
    <span><span><span><ul>></ul></span>
</span>      <span><span><span><li>></li></span>Items<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Are<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Listed<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Here<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Wow!<span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><section> class<span>="sponsors-wrapper"</span>></section></span>
</span>    <span><span><span><h2 id="gt">></h2></span>Our sponsors<span><span></span>></span>
</span>
    <span><span><span><section> class<span>="sponsors"</span>></section></span>
</span>      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032567395.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032567395.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032567395.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032567395.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032567395.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>
  <span><span><span></span>></span>
</span>
  <span><span><span><footer> class<span>="footer"</span>></footer></span>
</span>    <span><span><span><p>></p></span>
</span>      <span title="©">© 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

    ディスプレイ：グリッドはグリッドコンテナを定義し、子供に特別なフォーマットコンテキストを設定します。 FRは、「グリッドコンテナの自由空間の一部」を意味する特別なユニットです。 2 6 4は12、6 /12 = 0.5を与えます。それは、中央の列が空きスペースの50％を占めることを意味します。

    また、行と列の間に間隔を追加したい：

    <span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>
    これを行ったことで、個々の領域で作業できます。しかし、このセクションをまとめる前に、一般的なスタイルをすばやく追加しましょう。

    いいね！これで、最初のターゲットに進むことができます。これはヘッダーになります。 
    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
    ヘッダーの設計

    ヘッダーは、特定の高さを3レムに設定する必要がある最初の行を占有します。最初のレイアウトでは、これはヘッダーラッパーに高さプロパティを割り当てることで解決されます。

    また、ロゴとメニューは中央に垂直に整列されていることに注意してください。これは、ラインハイイトトリックを使用して達成されています。

    ただし、CSSグリッドを使用すると、物事はより簡単になります。CSSハッキングは必要ありません。

    最初の行を定義することから始めます：

    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

    ロゴは1つの列のみを占有する必要がありますが、メニューには2つの列に及ぶ必要があります。上記のグリッドエリア名を参照するGrid-Template-Areasプロパティの助けを借りて意図を表明できます。 

    <span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>
    ここで何が起こっているのですか？まあ、ロゴは一度だけ言うことで、1つだけを占めることを確認しています。メニューメニューは、メニューが2つの列の2つの列を占めることを意味します。中央と右の列です。このルールがどれほど簡単か！

    をご覧ください

    y軸のロゴを並べます：

    <span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>
    メニューは垂直に中央に置き、右に引っ張る必要があります：

    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>
    メニューはULタグとLIタグで構築されているため、マーカーを削除し、マージン/パディングを無効にし、メニューをフレックスコンテナに設定して、少しスタイルを整えましょう。

    それはほとんどそれです。結果を観察するために、便利なCSSグリッドハイライターツールを有効にしてFirefoxを使用します。 （利用可能な他のブラウザには同様のツールがあります。たとえば、Chrome用のグリッドマン。）このツールにアクセスするには、F12を押して、グリッドラベルが必要な.Container要素を選択します。 

    <span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>
    その後、CSSルールタブに進み、ディスプレイ：Gridプロパティを見つけます。グリッド値の横にある小さなアイコンを押すことにより、蛍光ペンを有効または無効にすることができます。 

    <span><span>.container</span> {
</span>  // ...
  <span>grid-template-areas:
</span>    <span>"logo menu menu";
</span><span>}
</span>

    ここに結果があります：

    <span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span>  <span>align-self: center;
</span><span>}
</span>

    蛍光ペンには、すべての行と列、およびそれらとエリアの名前の間のマージンが表示されます。レイアウトセクション内の出力をカスタマイズできます。これには、ページ上のすべてのグリッドもリストします。

    CSSグリッドレイアウトを使用するためにサイトを再設計します

    それで、ヘッダーを扱ったので、メインコンテンツ領域とサイドバーに進みましょう。

    メインコンテンツとサイドバー

    メインコンテンツ領域には2つの列に及ぶ必要がありますが、サイドバーは1つだけを占有する必要があります。行に関しては、その高さを自動的に設定したいと思います。それに応じて.containerグリッドを更新できます：

    サイドバーにパディングを追加して、視覚的なスペースをいくつか提供したいと思います。 
    <span><span><span><div> class<span>="container"</span>>
  <span><span><span><header> class<span>="logo"</span>></header></span>
</span>    <span><span><span><h1 id="gt">></h1></span><span><span><a> href<span>="#"</span>></a></span>DemoSite<span><span></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><nav> class<span>="main-menu"</span>></nav></span>
</span>    <span><span><span><ul>></ul></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Our clients<span><span></span>></span><span><span></span>></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Products<span><span></span>></span><span><span></span>></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Contact<span><span></span>></span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><main> class<span>="content-area"</span>></main></span>
</span>    <span><span><span><h2 id="gt">></h2></span>Welcome!<span><span></span>></span>
</span>
    <span><span><span><p>></p></span>
</span>      Content
    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><aside> class<span>="sidebar"</span>></aside></span>
</span>    <span><span><span><h3 id="gt">></h3></span>Additional stuff<span><span></span>></span>
</span>
    <span><span><span><ul>></ul></span>
</span>      <span><span><span><li>></li></span>Items<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Are<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Listed<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Here<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Wow!<span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><section> class<span>="sponsors-wrapper"</span>></section></span>
</span>    <span><span><span><h2 id="gt">></h2></span>Our sponsors<span><span></span>></span>
</span>
    <span><span><span><section> class<span>="sponsors"</span>></section></span>
</span>      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032783158.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032783158.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032783158.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032783158.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032783158.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>
  <span><span><span></span>></span>
</span>
  <span><span><span><footer> class<span>="footer"</span>></footer></span>
</span>    <span><span><span><p>></p></span>
</span>      <span title="©">© 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
</div></span>></span>
</span>
    Firefoxのグリッドツールで表示されているように、

    結果は次のとおりです 

    <span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

    スポンサー

    CSSグリッドレイアウトを使用するためにサイトを再設計しますスポンサーセクションには、幅と高さが等しい5つのアイテムを含める必要があります。各アイテムには、1つの画像があります

    最初のレイアウトでは、このブロックは表示：テーブルでスタイリングされていますが、依存しません。実際、スポンサーセクションは、CSSグリッドを適用するための優れた候補者かもしれません！

    まず、グリッドテンプレートエリアを調整して、スポンサーエリアを含めます。

    次に、.sponsorsセクションもグリッドに変えます：

    等しい幅の5つのアイテムが必要である限り、繰り返し（）関数を使用して列を定義できます。

    行に関しては、その高さを自動的に設定する必要があります。列間のギャップは1REMに等しくなければなりません：
    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>

    各アイテムのスタイル：
    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

    これが中間の結果です：
    <span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>

    <span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>

    この例は、問題なくグリッドをネストできることを示しています。別のソリューションはFlexBoxを使用することかもしれませんが、この場合、スポンサーはそれらに十分な幅がない場合にラップする場合があります。

    次に、画像を垂直にも水平にも中央に配置したいと思います。次のことを試してみるかもしれません：
    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>

    place-selfは、x軸とy軸の要素を調整します。それは自分自身を調整し、自分自身を正当化するための速記の財産です。

    CSSグリッドレイアウトを使用するためにサイトを再設計します画像は確かに整列されますが、残念ながら白い背景はなくなりました。これは、各.ponsorが画像の寸法に等しい幅と高さを持っているためです。

    ここでは別のアプローチが必要であり、可能な解決策の1つはFlexBoxを採用することです。 

    <span><span>.container</span> {
</span>  // ...
  <span>grid-template-rows: 3rem;
</span><span>}
</span>
    今、すべてが適切に表示され、グリッドがflexboxでうまく再生されることがわかります：

    フッター

    最後のセクションはフッターで、実際に最も簡単なセクションです。私たちがしなければならないのは、それを3つの列すべてに渡すことだけです：

    <span><span><span><div> class<span>="container"</span>>
  <span><span><span><header> class<span>="logo"</span>></header></span>
</span>    <span><span><span><h1 id="gt">></h1></span><span><span><a> href<span>="#"</span>></a></span>DemoSite<span><span></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><nav> class<span>="main-menu"</span>></nav></span>
</span>    <span><span><span><ul>></ul></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Our clients<span><span></span>></span><span><span></span>></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Products<span><span></span>></span><span><span></span>></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Contact<span><span></span>></span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><main> class<span>="content-area"</span>></main></span>
</span>    <span><span><span><h2 id="gt">></h2></span>Welcome!<span><span></span>></span>
</span>
    <span><span><span><p>></p></span>
</span>      Content
    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><aside> class<span>="sidebar"</span>></aside></span>
</span>    <span><span><span><h3 id="gt">></h3></span>Additional stuff<span><span></span>></span>
</span>
    <span><span><span><ul>></ul></span>
</span>      <span><span><span><li>></li></span>Items<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Are<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Listed<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Here<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Wow!<span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><section> class<span>="sponsors-wrapper"</span>></section></span>
</span>    <span><span><span><h2 id="gt">></h2></span>Our sponsors<span><span></span>></span>
</span>
    <span><span><span><section> class<span>="sponsors"</span>></section></span>
</span>      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958033321473.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958033321473.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958033321473.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958033321473.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958033321473.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSSグリッドレイアウトを使用するためにサイトを再設計します" > src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>
  <span><span><span></span>></span>
</span>
  <span><span><span><footer> class<span>="footer"</span>></footer></span>
</span>    <span><span><span><p>></p></span>
</span>      <span title="©">© 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

    基本的に、レイアウトは終了します！ただし、まだ完了していません。サイトも応答する必要があります。それでは、次のセクションでこのタスクに注意してみましょう。

    レイアウトを応答する

    CSSグリッドを所定の位置に配置すると、領域をすばやく再配置できるため、実際には応答性を導入するのは非常に簡単です。

    大きな画面

    大きな画面から始めましょう（この記事では、Bootstrap 4で定義されているのと同じブレークポイントに固執します）。メインコンテナの水平マージンと個々のスポンサー間のギャップを減らしたいと思います。

    中画面
    <span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

    中画面では、メインコンテンツ領域とサイドバーを3つすべての列を占有したいと思います。

    また、フォントのサイズを減らして、スポンサーが別の下に表示されるように積み重ねてみましょう。列間のギャップはゼロでなければなりません（実際には列が1つしかないため）。代わりに、行の間にギャップを設定します：

    <span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
    これは、レイアウトが中程度の画面でどのように見えるかです：

    <span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

    小さな画面

    CSSグリッドレイアウトを使用するためにサイトを再設計します小さな画面では、各領域を別の行に表示します。つまり、今は1つの列のみがあります。

    この場合はメニューを右に引っ張らないでください。また、列間のギャップも必要ありません。

    ジョブが完了しました：

    <span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>

    さまざまな画面のグリッドアイテムを簡単に再配置することもできます。小さな画面にメニューを下に置きたいとします（訪問者がページで素材を読み終えた後にスクロールする必要がないようにします）。それを行うには、グリッドテンプレートエリアを調整するだけです：
    <span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>

    メディアクエリなしで行う

    CSSグリッドレイアウトを使用するためにサイトを再設計しますメディアクエリなしでスポンサーをブロックすることができることに言及する価値があります。これは、Auto-FitプロパティとMinMax関数の助けを借りて可能です。それらを動作させているのを見るには、このような.ponsorsのスタイルを微調整してください：

    繰り返し関数は、すでに知っているように、必要に応じて列を何度も繰り返します。 
    <span><span>.logo</span> {
</span>  // ...
  <span>height: 100%;
</span>  <span>line-height: 3rem;
</span><span>}
</span>
    自動充填とは、「できるだけ多くの列で行を埋める」ということです。列に十分なスペースがない場合は、次の行に配置されます。

    minmaxを使用すると、列の幅の最小値と最大値を指定できます。この場合、各列は自由空間の1回の割合にまたがる必要がありますが、200ピクセル以上。

    これは、小さな画面で列がそれぞれ最大200pxに縮小される可能性があることを意味します。まだ十分なスペースがない場合は、1つまたは複数の列が別のラインに移動されます。上記のCSSルールを適用した結果は次のとおりです

    CSSグリッドレイアウトを使用するためにサイトを再設計します

    フォールバック

    残念ながら、CSSグリッドはまだすべてのブラウザーで完全には完全にサポートされていないため、どのようなものが古いバージョンの仕様を実装しているかを推測する場合があります。ええ、インターネットエクスプローラー10と11です。これらのブラウザでデモを開くと、グリッドがまったく機能せず、領域が単に積み重ねられていることがわかります。

    もちろん、サイトはまだ使用可能であるため、これは世界の終わりではありませんが、少なくともいくつかのフォールバックルールを追加しましょう。良いニュースは、要素が浮かんでおり、グリッドが割り当てられている場合、グリッドが優先されることです。また、ディスプレイ、垂直アライメント、およびその他のプロパティもグリッドアイテムに影響を与えないため、その事実を利用してみましょう。 CSSグリッドレイアウトを使用するためにサイトを再設計します積み重ねられたメニューは見た目がいいですが、サイドバーはおそらくメインコンテンツの隣に配置する必要があります。 Display：inline-block：

    を使用してこれを実現できます

    グリッドをサポートするすべてのブラウザでは、これらのプロパティは効果がありませんが、IEでは予想どおりに適用されます。微調整する必要があるもう1つのプロパティは幅です。

    しかし、これらのスタイルを追加して、グリッドレイアウトは、グリッドアイテムでは

    >
    class="container">
    class="logo">

    >

     href="#">DemoSite>> >
      >
  • class="main-menu__item">
    • href="#">Our clients>>
  • class="main-menu__item">
    •  href="#">Products>>
  • class="main-menu__item">
    •  href="#">Contact>> > >
    class="content-area">

    >

    Welcome!>

    >

         Content > >

    >

    Additional stuff>
      >
  • >
    • Items>
  • >
    • Are>
  • >
    • Listed>
  • >
    • Here>
  • >
    • Wow!>     > >
    class="sponsors-wrapper">

    >

    Our sponsors>
    class="sponsors">
    class="sponsor">
         CSSグリッドレイアウトを使用するためにサイトを再設計します src="https://via.placeholder.com/150x150"> >
    class="sponsor">
         CSSグリッドレイアウトを使用するためにサイトを再設計します src="https://via.placeholder.com/200x150"> >
    class="sponsor">
         CSSグリッドレイアウトを使用するためにサイトを再設計します src="https://via.placeholder.com/100x200"> >
    class="sponsor">
         CSSグリッドレイアウトを使用するためにサイトを再設計します src="https://via.placeholder.com/100x100"> >
    class="sponsor">
         CSSグリッドレイアウトを使用するためにサイトを再設計します src="https://via.placeholder.com/200x200"> > > >
    class="footer">

    >

         © 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved. > >
>

次に、スポンサーのアイテムの世話をして、各ブロックに最大のマージンを追加しましょう。 

<span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>
グリッドがサポートされているときに最高マージンは必要ありませんので、@supportsクエリ内でそれを無効にします：

最後に、IEの応答性を追加しましょう。メインコンテンツ、サイドバーを伸ばし、各スポンサーを小さな画面で全幅に伸ばします。 

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>
グリッドをサポートするブラウザのスポンサーの幅を修正することを忘れないでください：

<span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>
今すぐインターネットエクスプローラーのレイアウトの外観は次のとおりです 

<span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>

Codepen：

で最終結果を表示できます 
<span><span>.main-header</span> {
</span>  <span>height: 3rem;
</span><span>}
</span>
CodePenのSitePoint（@SitePoint）によるグリッド付きマルチコラムレイアウトを参照してください。

結論

この記事では、CSSグリッドが動作しているのを見て、既存のフロートベースのレイアウトを再設計するためにそれを利用しました。これら2つのソリューションを比較すると、「グリッド」ソリューションのHTMLおよびCSSコードが小さく（もちろん、フォールバックをカウントしない）、よりシンプルで表現力があることがわかります。 Grid-Template-Areasプロパティの助けを借りて、個々の領域がどのようにレイアウトされているかを簡単に理解することができ、それらをすばやく再配置したり、サイズを調整したりできます。それに加えて、ClearFixのようなさまざまなハッキーなトリックに頼る必要はありません。

したがって、ご覧のとおり、CSSグリッドはフロートの優れた代替品であり、生産対応です。インターネットエクスプローラーにいくつかのフォールバックルールを提供する必要があるかもしれません（仕様の古いバージョンを実装しています）が、ご覧のとおり、それらはあまり複雑ではなく、一般的には、逆方向の互換性がなくてもサイトはまだ使用できます。すべて。

すでにCSSグリッドを使用してWebサイトを作成しようとしましたか？あなたの印象は何ですか？コメントであなたの考えを共有してください！

CSSグリッドレトロフィット

に関するよくある質問

WebデザインにおけるCSSグリッドレトロフィットの重要性は何ですか？

CSSグリッドレトロフィットは、開発者が簡単に複雑なレイアウトを作成できるようにするWebデザインの強力なツールです。これは2次元システムであり、主に1次元システムであるFlexBoxとは異なり、列と行の両方を処理できることを意味します。これにより、さまざまな画面サイズと解像度に適応するレスポンシブなデザインを作成するための汎用性の高いツールになります。また、サイズが不明または動的であっても、コンテナ内のアイテム間でスペースを整列および配布するプロセスを簡素化します。

CSSグリッドレトロフィットは、他のグリッドシステムと比較してどのように比較されますか？レトロフィットは、柔軟性と使いやすさのために、他のグリッドシステムから際立っています。大規模なコーディングや計算を必要とする他のシステムとは異なり、CSSグリッドレトロフィットにより、開発者は最小限のコードで複雑なレイアウトを作成できます。また、要素の配置とアライメントをより強化するため、多くの開発者にとって好ましい選択肢になります。

モバイルレスポンシブデザインにCSSグリッドレトロフィットを使用できますか？モバイルレスポンシブデザインを作成するための優れたツールです。これにより、開発者はメディアクエリを使用して、さまざまな画面サイズのさまざまなグリッドレイアウトを定義できます。これは、デスクトップビュー用の複雑なレイアウトと、同じCSSドキュメント内のすべてのモバイルビュー用のよりシンプルでより合理化されたレイアウトを作成できることを意味します。 >

CSSグリッドレトロフィットは、Chrome、Firefox、Safari、Edgeなどのほとんどの最新のブラウザーと互換性があります。ただし、古いブラウザやバージョンでは期待どおりに機能しない場合があります。複数のブラウザでデザインをテストして、意図したとおりに機能するようにすることをお勧めします。

プロジェクトでCSSグリッドレトロフィットの使用を開始するにはどうすればよいですか？

CSSグリッドレトロフィットの使用を開始するには、コンテナ要素をディスプレイ付きグリッドとして定義する必要があります。グリッド。次に、グリッドテンプレートコラムとグリッドテンプレート列を使用して列と行のサイズを定義し、グリッドコラムとグリッドローを使用してその子要素をグリッドに配置できます。他のレイアウトメソッドを使用したグリッドレトロフィット？

はい、CSSグリッドレトロフィットは、より複雑なデザインのためにFlexBoxなどの他のレイアウト方法と組み合わせることができます。これは、部分的に柔軟で部分的に固定されたレイアウトを作成する場合に特に便利です。レトロフィットには、レイアウト管理を容易にするために名前付きグリッド領域を使用し、FRユニットを柔軟なグリッドトラックに使用し、グリッドレイアウトを視覚化およびデバッグするためのブラウザの開発者ツールでグリッドインスペクターを使用することが含まれます。要素？

CSSグリッドレトロフィットにより、要素がオーバーラップできます。これは、一意のレイアウトを作成するための強力なツールになります。 Z-Indexプロパティを使用して、重複する要素の積み重ね順序を制御できます。

垂直レイアウトにCSSグリッドレトロフィットを使用できますか？つまり、両方の列と行を処理できます。これにより、水平レイアウトと垂直レイアウトの両方を作成するための多用途のツールになります。ブラウザの互換性の問題、重複する要素の処理、多くのグリッド領域で複雑なレイアウトの管理。ただし、練習とグリッドプロパティを十分に理解することで、これらの課題を克服することができます。

以上がCSSグリッドレイアウトを使用するためにサイトを再設計しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
関連記事
CSSグリッドとは何ですか？CSSグリッドとは何ですか？Apr 30, 2025 pm 03:21 PM

CSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。

CSS Flexboxとは何ですか？CSS Flexboxとは何ですか？Apr 30, 2025 pm 03:20 PM

記事では、レスポンシブデザインにおけるスペースの効率的なアラインメントと分布のためのレイアウト方法であるCSS FlexBoxについて説明します。 FlexBoxの使用量を説明し、CSSグリッドと比較し、ブラウザのサポートを詳細に説明します。

CSSを使用してWebサイトを応答するにはどうすればよいですか？CSSを使用してWebサイトを応答するにはどうすればよいですか？Apr 30, 2025 pm 03:19 PM

この記事では、ビューポートメタタグ、柔軟なグリッド、流体メディア、メディアクエリ、相対ユニットなど、CSSを使用してレスポンシブWebサイトを作成するための手法について説明します。また、CSSグリッドとフレックスボックスを使用してカバーし、CSSフレームワークを推奨しています

CSSボックスサイズのプロパティは何をしますか？CSSボックスサイズのプロパティは何をしますか？Apr 30, 2025 pm 03:18 PM

この記事では、要素の寸法の計算方法を制御するCSSボックスサイズのプロパティについて説明します。コンテンツボックス、ボーダーボックス、パディングボックスなどの値と、レイアウト設計とフォームアライメントへの影響について説明します。

CSSを使用してアニメーション化するにはどうすればよいですか？CSSを使用してアニメーション化するにはどうすればよいですか？Apr 30, 2025 pm 03:17 PM

記事では、CSS、キープロパティ、およびJavaScriptとの組み合わせを使用してアニメーションの作成について説明します。主な問題は、ブラウザの互換性です。

CSSを使用してプロジェクトに3D変換を追加できますか？CSSを使用してプロジェクトに3D変換を追加できますか？Apr 30, 2025 pm 03:16 PM

記事では、3D変換、主要なプロパティ、ブラウザの互換性、およびWebプロジェクトのパフォーマンスに関する考慮事項にCSSを使用して説明します。

CSSに勾配を追加するにはどうすればよいですか？CSSに勾配を追加するにはどうすればよいですか？Apr 30, 2025 pm 03:15 PM

この記事では、CSSグラデーション（線形、放射状、繰り返し）を使用して、ウェブサイトのビジュアルを強化し、深さ、フォーカス、および現代の美学を追加します。

CSSの擬似要素とは何ですか？CSSの擬似要素とは何ですか？Apr 30, 2025 pm 03:14 PM

記事では、CSSの擬似要素、HTMLスタイリングの強化における使用、および擬似クラスとの違いについて説明します。実用的な例を提供します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

Windows11 KB5054979の新しいものと更新の問題を修正する方法
3週間前ByDDD
KB5055523を修正する方法Windows 11にインストールできませんか？
3週間前ByDDD
Inzoi：学校と大学への応募方法
4週間前ByDDD
KB5055518を修正する方法Windows 10にインストールできませんか？
3週間前ByDDD
Atomfallのサイトオフィスキーを見つける場所
4週間前ByDDD
もっと見る

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7872
15
Java チュートリアル
1649
14
CakePHP チュートリアル
1408
52
Laravel チュートリアル
1301
25
PHP チュートリアル
1245
29
もっと見る