この投稿では、堅牢な最新レイアウトの構築に役立つ、強力な CSS の行をいくつか紹介します。
公開日: 2020 年 7 月 7 日、最終更新日: 2025 年 12 月 15 日
最新の CSS レイアウトを使用すると、デベロッパーは数回のキーストロークで、非常に有意義で堅牢なスタイル設定ルールを記述できます。上記の講演と、それに続くこの投稿では、非常に重要な役割を果たす 10 行の強力な CSS について説明します。
これらのデモを自分で試したり、遊んだりするには、上記のサイトの埋め込みを確認するか、1linelayouts.com にアクセスしてください。
01. スーパー センター: place-items: center
最初の「1 行」レイアウトでは、CSS の世界で最大の謎である「中央揃え」を解決しましょう。place-items: center を使えば、思っているよりも簡単にできることを知っていただきたいです。
まず、display メソッドとして grid を指定し、同じ要素に place-items: center を記述します。place-items は、align-items と justify-items の両方を一度に設定するための省略形です。center に設定すると、align-items と justify-items の両方が center に設定されます。
.parent {
display: grid;
place-items: center;
}
これにより、固有のサイズに関係なく、コンテンツを親の完全に中央に配置できます。
02. パンケーキの分解: flex: <grow> <shrink> <baseWidth>
次は、分解されたパンケーキです。これは、マーケティング サイトでよく使用されるレイアウトです。たとえば、3 つのアイテムが並んだ行があり、通常は画像、タイトル、テキストで商品の特徴を説明します。モバイルでは、これらを適切に積み重ね、画面サイズを大きくするにつれて拡大するようにします。
この効果に Flexbox を使用すると、画面のサイズ変更時にこれらの要素の配置を調整するためのメディアクエリが不要になります。
flex の省略形は flex: <flex-grow> <flex-shrink> <flex-basis> を表します。
このため、ボックスを <flex-basis> サイズまで拡大し、小さいサイズに縮小するものの、追加のスペースを埋めるために拡大しない場合は、flex: 0 1 <flex-basis> と記述します。この例では、<flex-basis> は 150px であるため、次のようになります。
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
ボックスを次の行に折り返すときに、ボックスを拡大してスペースを埋めるようにするには、<flex-grow> を 1 に設定します。
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
画面サイズを拡大または縮小すると、これらの Flex アイテムは縮小または拡大します。
03. サイドバーの表示: grid-template-columns: minmax(<min>, <max>) …)
このデモでは、グリッド レイアウトに minmax 関数を利用しています。ここでは、サイドバーの最小サイズを 150px に設定していますが、画面が大きい場合は 25% まで拡大できるようにしています。サイドバーは、25% が 150px より小さくなるまで、常に親の水平方向のスペースの 25% を占有します。
これを grid-template-columns の値として追加し、値は minmax(150px, 25%) 1fr とします。最初の列のアイテム（この場合はサイドバー）は、25% で 150px の minmax を取得し、2 番目のアイテム（ここでは main セクション）は、残りのスペースを単一の 1fr トラックとして占有します。
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. パンケーキ スタック: grid-template-rows: auto 1fr auto
この例では、分解されたパンケーキとは異なり、画面サイズが変更されても子は折り返されません。一般に固定フッターと呼ばれるこのレイアウトは、ウェブサイトとアプリの両方でよく使用されます。モバイルアプリ（フッターは通常ツールバー）とウェブサイト（シングルページ アプリケーションではこのグローバル レイアウトがよく使用されます）で使用されます。
コンポーネントに display: grid を追加すると、1 列のグリッドが作成されますが、メイン領域の高さはコンテンツと同じになり、その下にフッターが表示されます。
フッターを最下部に固定するには、次のコードを追加します。
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
これにより、ヘッダーとフッターのコンテンツは自動的に子のサイズになり、残りのスペース（1fr）がメインエリアに適用されます。一方、auto サイズの行は子の最小コンテンツのサイズになり、コンテンツのサイズが大きくなると、行自体も調整のために大きくなります。
05. 従来の Holy Grail レイアウト: grid-template: auto 1fr auto / auto 1fr auto
この古典的なホーリーグレイル レイアウトには、ヘッダー、フッター、左サイドバー、右サイドバー、メイン コンテンツがあります。前のレイアウトと似ていますが、サイドバーが追加されています。
このグリッド全体を 1 行のコードで記述するには、grid-template プロパティを使用します。これにより、行と列の両方を同時に設定できます。
プロパティと値のペアは grid-template: auto 1fr auto / auto 1fr auto です。スペース区切りの 1 つ目と 2 つ目のリストの間にあるスラッシュは、行と列の区切りです。
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
ヘッダーとフッターのコンテンツが自動サイズ設定されていた最後の例と同様に、ここでは左右のサイドバーが子の固有サイズに基づいて自動的にサイズ設定されます。ただし、今回は縦方向のサイズ（高さ）ではなく、横方向のサイズ（幅）です。
06. 12 スパングリッド: grid-template-columns: repeat(12, 1fr)
次は、もう一つの定番である 12 スパンのグリッドです。repeat() 関数を使用すると、CSS でグリッドをすばやく記述できます。グリッド テンプレートの列に repeat(12, 1fr); を使用すると、それぞれ 1fr の 12 列が作成されます。
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
12 列のトラックグリッドができたので、子をグリッドに配置できます。その方法の 1 つは、グリッド線を使用して配置することです。たとえば、grid-column: 1 / 13 は最初の行から最後の行（13 行目）まで、12 列にわたって配置されます。grid-column: 1 / 5; は最初の 4 つにまたがります。
これを記述する別の方法として、span キーワードを使用する方法があります。span では、開始線を設定し、その開始点から何列にまたがるかを設定します。この場合、grid-column: 1 / span 12 は grid-column: 1 / 13 と同等、grid-column: 2 / span 6 は grid-column: 2 / 8 と同等になります。
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM（繰り返し、自動、最小最大）: grid-template-columns(auto-fit, minmax(<base>, 1fr))
この 7 つ目の例では、これまでに学習したコンセプトをいくつか組み合わせて、自動的に配置される柔軟な子要素を含むレスポンシブ レイアウトを作成します。これは便利ですね。ここで覚えておくべき重要な用語は、repeat、auto-(fit|fill)、minmax()' です。頭文字をとって RAM と覚えるとよいでしょう。
すべてをまとめると、次のようになります。
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
ここでも repeat を使用していますが、今回は明示的な数値ではなく auto-fit キーワードを使用しています。これにより、これらの子要素の自動配置が有効になります。これらの子には、最小値 150px と最大値 1fr も設定されています。つまり、画面が小さい場合は 1fr の幅全体を占有し、それぞれが 150px の幅に達すると、同じ行にフローするようになります。
auto-fit を使用すると、ボックスの水平方向のサイズが 150 ピクセルを超えると、残りのスペース全体を埋めるようにボックスが引き伸ばされます。ただし、これを auto-fill に変更すると、minmax 関数の基本サイズを超えても拡大されません。
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. ラインナップ: justify-content: space-between
次のレイアウトで示す主なポイントは justify-content: space-between です。これは、最初と最後の子要素を境界ボックスの端に配置し、残りのスペースを要素間に均等に分配します。これらのカードは Flexbox 表示モードに配置され、flex-direction: column を使用して方向が列に設定されます。
これにより、タイトル、説明、画像ブロックが親カード内の垂直列に配置されます。次に、justify-content: space-between を適用すると、最初（タイトル）と最後（画像ブロック）の要素が Flexbox の端に固定され、その間の説明テキストが各エンドポイントに等間隔で配置されます。
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. スタイルをクランプする: clamp(<min>, <actual>, <max>)
ここからは、レイアウトとレスポンシブ UI デザインに非常に興味深い影響を与える手法について説明します。このデモでは、width: clamp(<min>, <actual>, <max>) のように clamp を使用して幅を設定しています。
これにより、絶対的な最小サイズと最大サイズ、および実際のサイズが設定されます。値を使用すると、次のようになります。
.parent {
width: clamp(23ch, 60%, 46ch);
}
最小サイズは 23ch（23 文字単位）、最大サイズは 46ch（46 文字）です。文字幅単位は、要素のフォントサイズ（具体的には 0 グリフの幅）に基づいています。「実際の」サイズは 50% で、この要素の親の幅の 50% を表します。
ここで clamp() 関数が行っているのは、50% が 46ch より大きくなる（幅の広いビューポートの場合）か、23ch より小さくなる（幅の狭いビューポートの場合）まで、この要素が 50% の幅を維持できるようにすることです。親のサイズを拡大または縮小すると、このカードの幅がクランプされた最大値まで増加し、クランプされた最小値まで減少することがわかります。中央に配置するための追加のプロパティを適用しているため、親の中央に配置されたままになります。これにより、テキストが広すぎたり（46ch を超える）、狭すぎたり（23ch 未満）することがなくなり、レイアウトが読みやすくなります。
これは、レスポンシブ タイポグラフィを実装する優れた方法でもあります。たとえば、font-size: clamp(1.5rem, 20vw, 3rem) と記述できます。この場合、見出しのフォントサイズは常に 1.5rem～3rem の範囲内に収まりますが、20vw の実際の値に基づいて拡大または縮小され、ビューポートの幅に合わせられます。
これは、最小サイズと最大サイズの値で読みやすさを確保するための優れた手法です。
10. アスペクト比を維持: aspect-ratio: <width> / <height>
最後に、このレイアウトは、画像のアスペクト比を維持するという、よくある問題を解決します。
aspect-ratio プロパティを使用すると、カードのサイズを変更しても、緑色のビジュアル ブロックはこの 16 x 9 のアスペクト比を維持します。aspect-ratio: 16 / 9 でアスペクト比を維持しています。
.video {
aspect-ratio: 16 / 9;
}
このプロパティを使用せずに 16:9 のアスペクト比を維持するには、padding-top ハックを使用して、56.25% のパディングを指定し、幅に対する高さの比率を設定する必要があります。このハックを回避し、割合を計算する必要をなくすために、まもなくこのプロパティが導入される予定です。1 / 1 の比率で正方形を作成したり、2 / 1 で 2:1 の比率を作成したりできます。この画像を設定したサイズ比率で拡大縮小するために必要なものはすべて揃っています。
.square {
aspect-ratio: 1 / 1;
}
この機能は、特に動画や iframe に関して、私自身が何度も直面した多くのデベロッパーの課題を解決するため、知っておくと便利です。
まとめ
10 行の強力な CSS を紹介するこのシリーズを最後までご覧いただき、ありがとうございました。詳しくは、動画の全編をご覧ください。