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

この投稿では、負担の大きい作業を行い、堅牢でモダンなレイアウトを構築するための優れた CSS 行をいくつか紹介します。

Una Kravets

最新の CSS レイアウトでは、わずか数回のキー入力だけで、非常に意味のある堅牢なスタイル設定ルールを作成できます。先ほどの講演とこれに続く投稿では、負荷の高い負荷の高い 10 の CSS の行を取り上げています。

これらのデモをご自身でご覧になるには、上の Glitch の埋め込みをご覧いただくか、1linelayouts.glitch.me にアクセスしてください。

01. スーパー中央: 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>

次は、分解したパンケーキです。このレイアウトはマーケティング サイトでよく使用されるレイアウトです。たとえば、1 行に 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 セクション）はスペースの残りの部分を 1 つの 1fr トラックとして占めます。

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

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

Destructed Pancake とは異なり、このサンプルでは画面サイズが変更されたときに子がラップされません。固定フッターとも呼ばれ、ウェブサイトやアプリ、モバイルアプリ（フッターは通常ツールバーです）、ウェブサイト（シングルページ アプリケーションでは、このグローバル レイアウトがよく使用されます）でよく使用されます。

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

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

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

これにより、ヘッダーとフッターのコンテンツが自動的に子のサイズを取得し、残りのスペース（1fr）がメイン領域に適用されます。一方、auto サイズの行は、子の最小コンテンツのサイズを受け取るため、コンテンツのサイズが大きくなると、行自体も調整されます。

05. クラシック ホーリー グレイル レイアウト: 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 列のトラック グリッドができたので、子をグリッドに配置できます。たとえば、グリッド線を使用して画像を配置します。たとえば、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（繰り返し、自動、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));
}

繰り返しを繰り返しますが、今回は明示的な数値の代わりに 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 を適用すると、最初（タイトル）と最後の要素（画像ブロック）がフレックスボックスの端に固定され、その間にある説明テキストが各エンドポイントに等間隔に配置されます。

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

09. スタイル クランプ: clamp(<min>, <actual>, <max>)

ここでは、ブラウザ サポートを少なくして行う手法について説明しますが、レイアウトとレスポンシブ UI デザインには実に重要な意味があります。このデモでは、クランプを使用して width: clamp(<min>, <actual>, <max>) のように幅を設定します。

これにより、絶対的な最小サイズ、最大サイズ、実際のサイズが設定されます。値を使用すると、次のようになります。

.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>

そして最後に、このレイアウト ツールは最も試験運用版です。Chrome Canary は最近 Chromium 84 で導入され、Firefox もこの実装に向けて積極的な取り組みを進めていますが、現時点では安定したブラウザ版はありません。

しかし、これは非常によく遭遇する問題なので、お伝えしたいと思います。これは単に画像のアスペクト比を維持するだけです。

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 に関して、私自身が何度も直面した多くの開発者の苦労を解決するため、知っておくと良いと思う。

おわりに

効果的な CSS の 10 行をご覧いただき、ありがとうございました。詳しくは、動画全編をご覧いただくか、ご自身でデモをお試しください。