1 行の CSS で 10 種類のレイアウトを

この記事では、強力な CSS の数行に焦点を当て、それらがどのように重い処理を行い、堅牢な最新のレイアウトの構築に役立つかについて説明します。

Una Kravets

最新の CSS レイアウトを使用すると、デベロッパーは数回のキー操作で、非常に意味のある堅牢なスタイル設定ルールを記述できます。上記の動画とこの投稿では、重い処理を行う 10 行の強力な CSS について説明します。

これらのデモを自分で試すには、上記のサイト埋め込みを確認するか、1linelayouts.com にアクセスしてください。

01. Super Centered: place-items: center

最初の「単一行」レイアウトでは、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% の minmax が 150px になり、2 番目のアイテム（この場合は main セクション）は、残りのスペースを 1 つの 1fr トラックとして占有します。

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

04. パンケーキ スタック: grid-template-rows: auto 1fr auto

Deconstructed Pancake とは異なり、この例では画面サイズが変更されても子を折り返しません。一般的にスティッキー フッターと呼ばれるこのレイアウトは、モバイル アプリケーション（フッターは通常ツールバー）とウェブサイト（シングルページ アプリケーションではこのグローバル レイアウトがよく使用される）の両方でよく使用されます。

コンポーネントに display: grid を追加すると、単一列のグリッドが作成されますが、メイン領域の高さはコンテンツの高さと同じになり、フッターがその下に配置されます。

フッターを下に固定するには、次のコードを追加します。

.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 です。最初のスペース区切りリストと 2 番目のスペース区切りリストの間のスラッシュは、行と列の区切りです。

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

前の例では、ヘッダーとフッターのコンテンツが自動サイズ調整されていましたが、ここでは、左右のサイドバーが子の固有サイズに基づいて自動サイズ調整されています。ただし、今回は縦方向（高さ）ではなく横方向（幅）のサイズです。

06. 12 スパン グリッド: grid-template-columns: repeat(12, 1fr)

次は、12 列のグリッドというもう 1 つの定番です。repeat() 関数を使用すると、CSS でグリッドをすばやく記述できます。repeat(12, 1fr); をグリッド テンプレート列に使用すると、それぞれ 1fr の 12 列が作成されます。

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

これで 12 列のトラック グリッドができたので、子をグリッドに配置できます。グリッド線を使用して配置する方法があります。たとえば、grid-column: 1 / 13 は 1 行目から 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（Repeat、Auto、MinMax）: 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% の幅を保持できるようにすることです。ただし、50% が 46ch より大きい（ビューポートが広い場合）か、23ch より小さい（ビューポートが狭い場合）になるまでは、50% の幅を保持します。親のサイズを拡大縮小すると、このカードの幅がクランプされた最大値まで増加し、クランプされた最小値まで減少することがわかります。中央揃えにするための追加のプロパティを適用したため、親要素の中央に配置されたままになります。これにより、テキストが広すぎたり（46ch を超える）、狭すぎたり（23ch 未満）することがなくなり、読みやすいレイアウトになります。

これは、レスポンシブ タイポグラフィを実装する優れた方法でもあります。たとえば、次のように記述します。font-size: clamp(1.5rem, 20vw, 3rem)この場合、見出しのフォントサイズは常に 1.5rem～3rem の範囲内ですが、20vw の実際の値に基づいて拡大縮小され、ビューポートの幅に収まります。

これは、最小値と最大値を使用して読みやすさを確保する優れた手法ですが、すべての最新ブラウザでサポートされているわけではないため、フォールバックを用意してテストを行うようにしてください。

10. アスペクト比の尊重: aspect-ratio: <width> / <height>

最後に、この最後のレイアウト ツールは、この中で最も試験運用版です。この機能は Chromium 84 で Chrome Canary に最近導入されました。Firefox でも実装に向けて積極的に取り組んでいますが、現在のところ安定版のブラウザには搭載されていません。

ただし、この問題は頻繁に発生するため、言及しておきます。これは、単に画像のアスペクト比を維持するだけです。

aspect-ratio プロパティを使用すると、カードのサイズを変更しても、緑色のビジュアル ブロックのアスペクト比は 16: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 を通して、このジャーニーをご覧いただきありがとうございました。詳しくは、動画の全編をご覧になり、デモをご自身でお試しください。