CSSを使用して複雑なレイアウトを作成する方法

Jan 26, 2026
操作方法
Build complex CSS layouts

Webのレイアウトは常に制限されていますが、意味を考慮した形式で簡単にコンテンツを簡単に表示できるようにすることに本当に専念していませんでした。

「90年代」に戻って、Webが最初に保留したときに、グリッド上のコンテンツをレイアウトするために使用されたデザイナーが、ブラウザで同じ結果を得るための唯一の方法がテーブルを使用することでした。セルをマージすると複雑になりました ウェブサイトのレイアウト しかし、これはアクセシビリティとSEOで大混乱を鳴らしました。早送りと今日は、浮動小枠、柔軟な箱などでコンテンツを配置する方法のすべての方法があります。

CSS3は本当にWebの機能を前進させ、2014年以降 CSSグリッドレイアウト 。これは現在75パーセントブラウザのサポートを持っているので、それはそれを真剣に考慮した時が来た時点になっています。 帯状の基礎6フレームワーク ボードに乗って、そのグリッドに電力を供給するために使用しています。

このチュートリアルでは、完璧な方法を示す方法を示す雑誌スタイルの機能の作成に焦点を当てます。 レスポンシブウェブデザイン 中小スクリーンサイズのために。

ここでチュートリアルファイルをダウンロードしてください

01.はじめに

のスタートフォルダからファイル 'grid1.html'を開きます。 プロジェクトファイル 。 HTMLレイアウトには5つのDIVタグがあり、単に項目1-5としてCSSクラスとして名前が付けられています。これらはグリッドに配置されたコンテンツになります。これをラップするコンテナは、グリッドを定義します。これにより4つの列があります。 

 divクラス= "コンテナ"＆gt。

02.グリッドのCSSをチェックしてください

ヘッドセクションで見ることは、「コンテナ」が行の自動高さを持つグリッドとしてレイアウトされるように言われていることがわかります。列は、各セットをブラウザの25パーセントに設定されています。 。ブラウザでこれを確認して、各項目が自動的に次の利用可能なグリッド位置に割り当てられることがわかります。 

。コンテナ{
  表示：グリッド;
  grid-template-rows：auto;
  グリッドテンプレート列：繰り返し（4,25％）。

03.グリッドポジションを定義します

'grid2.html'ファイルを見てください。 'item1'と 'item2'を除く最初のファイルと同じです。 1つ目は1行目に配置され、行2の前に終了します。列は1で始まり、3で終了して2列になります。 2番目の列3から始まり、次の2列を取ります。残りの項目は次の利用可能なグリッドスロットを埋めます。 

 .item1 {
  グリッド行スタート：1;
  グリッド行エンド：2;
  グリッド列始動：1;
  grid-column-end：3;
}
.item2 {
  グリッド行スタート：1;
  グリッド行エンド：2;
  グリッド列始動：3;
  グリッド列終了：5;

04.グリッドテンプレートを使用してください

'grid3.html'を開き、HTMLの本文を見てください。ヘッダー、サイドバー、メインコンテンツセクションとフッターが付いているレイアウトがあることがわかります。これが置かれたときに何が起こるかを確認するには、コンテンツにテキストを追加できます。グリッドはテンプレート機能を使用してこれらのセクションをレイアウトにします。 

 divクラス= "コンテナ"＆gt。

05.テンプレートを定義します

コンテナのCSSを見てください。それはまたグリッドとして定義されます。トップ行は200ピクセルになりますが、中央は自動的に設定され、最後の行は100ピクセルになります。列は33セントワイドに設定され、残りをオートフィルするように設定されています。テンプレートには、ヘッダーが両方の列を埋めます。次の行は、最初の列のサイドバーと次の内容になります。フッターは両方に渡って行きます。 

。コンテナ{
  表示：グリッド;
  grid-template-rows：200px Auto 100px。
  グリッドテンプレート列：33％AUTO;
  グリッドテンプレート - エリア：
  「ヘッダーヘッダー」
  「サイドバーコンテンツ」
  「フッターフッター」

Build complex CSS layouts

グリッドテンプレート領域を使用して、グリッドテンプレート領域を使用して作成し、ヘッダーとフッターが2列にスパンし、サイドバーとWebページの内容がそれぞれ1列を取り上げます。

06.テンプレートをクラスにリンクします

クラスをテンプレートにリンクするには、ここに示すコードがこれを定義します。各グリッド領域に名前が付けられ、リンクが作成されます。コンテンツはここには表示されませんが、 'grid3.html'文書にあります。グリッドのレイアウトを見るためにブラウザでこれを見てください。 2つの列が定義されているため、テンプレートには各反転カンマの2つの領域が必要です。 

。ヘッダー{
  グリッドエリア：ヘッダ;
}
。サイドバー{
  グリッドエリア：サイドバー;
}
.footer {
  グリッドエリア：フッター;

07.それを答えるようにします

'grid3.html'を応答的にするために、メディアクエリが挿入され、最上段は200パーセントに保たれ、残りの行は自動的にサイズされます。列は1つだけありますが、全幅なので、テンプレートにはレイアウトを定義するために各反転カンマに1つのワードがあります。これらはHTMLをシフトせずに簡単に並べ替えることができます。 

 @mediaスクリーンと（最大幅：699px）{
  。コンテナー{
  表示：グリッド;
  grid-template-rows：200px Auto;
  グリッドテンプレート列：100％。
  グリッドテンプレート - 領域： "ヘッダ"サイドバー ""コンテンツ ""フッター ";
  }

Build complex CSS layouts

メディアクエリ内のグリッドレイアウトを単に再定義するだけで、すべての要素はほんの少しの調整でリフローすることができます

08.本物のレイアウトで作業します

[index.html]を開く - デザイン要素のCSSのいくつかを持つように、コンテンツのすべてのHTMLが既に作成されています。このグリッドをヘッドセクションのスタイルタグに追加します。そうすることで、各セクションのテンプレートを使用して3列グリッドを作成します。空のグリッドセクションのフルストップに注意してください。 

 .Container1 {
  幅：80％。
  マージン：0自動車;
  表示：グリッド;
  grid-template-rows：auto;
  グリッドテンプレート - 列：33.3％33.3％AUTO;
  Grid-Template-Area： "ヘッダヘッダヘッダ" "Standfirst Standfirst" "..。。第1条「フォーカスプールプルコート」「第2条第2条」。

09.テンプレートをリンクします

前のステップと同様に、ヘッダーはテンプレートとリンクします。ヘッダはグリッドの3列すべてにわたるように言われ、その後、スタンドフルストは2列の列を取り、左側に空の列を持ちます。ブラウザをチェックすると、残りのコンテンツが次の利用可能なスペースをオートフィルするため、その列が入力されます。ただし、それがすべて設定されている場合はこれを行いません。 

。ヘッダー{
  グリッドエリア：ヘッダ;
}
.standfirst {
  グリッドエリア：スタンドリースト。

10.次のエリアを追加します

これで最初の記事、プル引用符と焦点画像を設計に入れます。プル引用符と画像は同じ行の並んでいます。この段階で、第2条は、標準の隣にあるグリッド上の最初の利用可能なスペースを取得していません。 

 .ARTILLE1 {
  グリッドエリア：第1条;
}
.pullQuote {
  グリッドエリア：プルコート;
}
.FOCUS {
  グリッドエリア：焦点;
  テキスト整列：中央;

Build complex CSS layouts

最初のグリッドが終了すると、デザインはデスクトップディスプレイ上にぴったり合います。背景画像要素でよく適合させて

11.最初のグリッドを終了します

2番目の記事のCSSを追加することで、最初のグリッドをすべて正しく配置できます。ブラウザでこれを見ると、レイアウトが背景画像と連携し、デザイナーが大きな背景画像を中心にしている雑誌で見られる種類のレイアウトを作成します。 

 .ARTILLE2 {
    グリッドエリア：第2条;
    列ギャップ：65px;
    列数：2;

12.白い背景を加える

2番目のグリッドを起動する前に、2つのグリッドが必要な理由があるのは不思議です。その理由は、このグリッドが白い全幅の背景を持つことになるので、このCSSは2番目のグリッドをラップします。これは、このセクションにデザインの2ページ目の感覚を与えることです。 

。WhiteBG {
    パディング：100px 0;
    背景色：#ddd;

13. 2番目のグリッドを作ります

2番目のグリッドは最初のものよりも簡単です。行に自動高さを持つ3つの列があります。コンテンツはそれぞれ列を埋めるつもりですので、テンプレート領域を定義する必要がない。ただし、タブレット設計が追加されると、これは2列に切り替える必要があるため、リフローが必要であり、名前は重要です。 

 .Container2 {
    幅：80％。
    マージン：0自動車;
    表示：グリッド;
    grid-template-rows：auto;
    グリッドテンプレート - 列：33.3％33.3％AUTO;
    グリッドテンプレート - エリア： "IMG1 IMG2第3条";

Build complex CSS layouts

両方のグリッドが画面上に置かれた状態で、すべてが正しい順序であるため、デザインをスクロールできます。

14.列を追加します

2番目のグリッド内の各CSSクラスは、グリッドテンプレートで定義されているように、関連する列とリンクするように指示されます。記事のテキストの色は、このセクションの軽い背景に目立つように目立つように変更されています。フッターのみが完了するだけで、雑誌スタイルのレイアウトの設計はほぼ整っています。 

 .img1 {
  グリッドエリアIMG1;
}
.img2 {
    グリッドエリアIMG2;
}
.ARTILLE3 {
  グリッドエリア：第3条;
  カラー：＃333;

15.ページの足を完璧に完璧

仕上げの仕上げは画面を横切って全幅のDIVを配置します。これは黒色で埋められ、テキストはただ中心にあります。デザインのデスクトップバージョンはデスクトップ版を完成させますが、画面を1200ピクセルの下に移動し、サイトが壊れ始めます。 

 .footer {
    背景色：＃000;
    カラー：＃999;
    テキスト整列：中央;
    パディング：50px 20px 100px;

16.ミディアムスクリーンデザインを調整します

ブラウザの幅が1200ピクセル未満の場合、デザインの後にメディアクエリが表示されます。ステップ17と18のコードは、コメントがあるブラケットの内側に配置されます。これは、両方のグリッドのレイアウト構造を変更する場合です。 

 @media画面と（最大幅：1200px）{
  / *ここにコード* /

17.最初のグリッドをリフローします

最初のグリッドは、3つの列ではなくブラウザの全幅を埋めるように設定されています。このスクリーンサイズで背景画像とともに適合するので、セクションの順番がテンプレートに配置されます。 

 .Container1 {
  幅：100％。
  grid-template-rows：auto;
  グリッドテンプレート列：50％50％。
  Grid-Template-Area： "ヘッダーヘッダー" "Standfirst Standfirst" "artificate1" "PULLQUOTE PULLQUOTE" "ARITION2フォーカス";
  }
.ARTILLE2 {
  列数：1;

Build complex CSS layouts

タブレットサイズのデザインは、ページ上の両方のグリッドのリフローだけで整っています。これらのグリッドの調整は、小さな画面を再設計する最も簡単な方法の1つです。

18.レイアウトをテストします

2番目のグリッドは、ブラウザの全幅と2つの列を追加するようにサイズ変更されています。画像は、テキストの上の並びに並んで配置されているので、ディスプレイにきれいに収まるようにします。ブラウザを1200ピクセルの幅の下にサイズ変更することで、このレイアウトをブラウザにテストできます。 

 .Container2 {
  幅：100％。
  マージン：0自動車;
  grid-template-rows：auto;
  グリッドテンプレート列：50％50％。
  グリッドテンプレートエリア： "IMG1 IMG2" "第3条第3条";

19.携帯用のTweak Design

769px未満の幅を持つブラウザは、最後のステップで追加されたコードを取得します。ここで実行する必要があるのは、コンテンツをより小さなスペース内で正しく表示できるように、各グリッドに単一の列レイアウトがあることを確認します。 

 @mediaスクリーンと（最大幅：768px）{
  / *最終ステップコード* /

20.単一の列グリッドをチェックしてください

これで、最初のグリッドはブラウザの幅の100パーセントの単一の列に設定され、セクションの順序がテンプレート領域に追加されます。ページの最初の部分がモバイル画面にどのように取り組んでいるかを確認してください。 

 .Container1 {
  幅：100％。
  grid-template-rows：auto;
  グリッドテンプレート列：100％。
  グリッドテンプレート - エリア：「ヘッダ」「スタンドフルスト」「第1条」「プルコート」「焦点」「第2件」;

Build complex CSS layouts

グリッドに1つの列を持つように、モバイルスクリーンのために変更される必要があるほぼすべての列を言う

21.レイアウトを終了します

ここで、2番目のグリッドも単一の列を埋めるようにされ、セクションのレイアウトが定義されています。完成したデザインを保存して、CSSグリッドのフルレイアウト機能と、異なる幅のコンテンツを並べ替えるのが簡単なことを確認するために、異なるサイズの画面でそれを表示します。 

 .Container2 {
  幅：100％。
  マージン：0自動車;
  grid-template-rows：auto;
  グリッドテンプレート列：100％。
  グリッドテンプレート - 「IMG1」「IMG2」「第3項」;

この記事はもともとCreative Web Design Magazine Web Designerに公開されていました。購入 問題271 または 申し込む 。

関連記事：

  • 超高速CSSのための5つのヒント
  • CSSディスプレイプロパティを理解する
  • CSSシェイプを使用してピラミッドレイアウトを作成する方法

操作方法 - 最も人気のある記事

WebGL 3Dランディングページを作成する

操作方法 Jan 26, 2026

（画像クレジット：未来） WebGL 3Dランディングページを作成することは、あなたの聴衆..

CSSでSVGにアニメーションを追加する方法

操作方法 Jan 26, 2026

[画像：Webデザイナー] SVGSでアニメートすることになると、1つの大きなターンオフがJava..

現実的なファンタジーナイトを作成する

操作方法 Jan 26, 2026

このワークショップでは、騎士を使用して騎士を描く方法を説明します フォトショップ ..

塗料の影の色を混ぜる方法

操作方法 Jan 26, 2026

いくつかの人々は影のトリッキーのためのミキシングを見つける、多くの新しい色を混ぜようと..

映画館4Dで現実的な植物を作る

操作方法 Jan 26, 2026

あなたの最終的な使用に関係なく、人工の構造を中心としたほとんどのシーンは、植物や木の上..

Reactで簡単な音楽プレーヤーを構築する

操作方法 Jan 26, 2026

反応する ユーザーインターフェイスを構築するための人気のJavaScriptライブラリであり�..

カスタムマヤインタフェースを構築する

操作方法 Jan 26, 2026

現代のソフトウェアは、非常に強力ですべての包括的なものになる可能性があります。 Mayaは違う結果に到達するのに役立つツール、コマンド..

WordPressのWebサイトの多言語を作る方法

操作方法 Jan 26, 2026

インターネットで使用されている上位10の言語、英語 第1位 また、約9億5000万人のユ�..

カテゴリ