CSSでのセンタリング

一連のテストを実行する際に、5つのセンタリング手法に従って、変更に対して最も回復力のある手法を確認します。

Dec 16, 2020

Available in: English、Русский、한국어

Adam Argyle

TwitterGitHubGlitchHomepage

CSSでのセンタリングは、ジョークや嘲笑に満ちた悪名高い課題です。2020年のCSSはすべて大人に成長し、今では強がらずにこれらのジョークを素直に笑えるようになっています。

動画を好む方は、この記事のYouTubeバージョンをご覧ください。

チャレンジ #

センタリングにはさまざまなタイプがあります。さまざまなユースケースがあり、センタリングするものの数などもさまざまです。「勝利を手にできる」センタリング手法の背後にある理論的根拠を示すために、私はResilience Ringer（レジリエンスリンガー）なるものを作成しました。ここれは、各センタリング戦略のバランスを取り、ユーザーがパフォーマンスを観察するための一連のストレステストです。最後に、最高得点の獲得テクニックと「最も価値のある」テクニックを明らかにします。うまくいけば、あなたは新しいセンタリングテクニックと解決策を持ち帰ることができます。

Resilience Ringer #

Resilience Ringerは、センタリング戦略は多言語レイアウト、可変サイズのビューポート、テキスト編集、および動的コンテンツに対して高い回復力を持つ必要があるという私の信念を具現化したものです。これらの信条は、センタリングテクニックが次の項目に耐えられるようにするレジリエンステストを形作る上で支えとなりました。

1. Squished（左右の押しつぶし）: センタリングは幅の変更に対応できる必要があります。
2. Squashed（上下の押しつぶし）: センタリングは高さの変更に対応できる必要があります。
3. Duplicate（複製）: センタリングはアイテムの数に対して動的である必要があります。
4. Edit（編集）: センタリングはコンテンツの長さと言語に合わせて動的に行われる必要があります。
5. Flow（フロー）: センタリングはドキュメントの方向と書き込みモードに依存しない必要があります。

勝利のソリューションは、左右の押しつぶし、上下の押しつぶし、複製、編集、さまざまな言語モードと方向の入れ替えが起きても、コンテンツを中央に保持することによって、その回復力を実証する必要があります。信頼できるレジリエントなセンタリングが安全なセンタリングと言えます。

伝説 #

コンテキストにそってメタ情報を示せるよう、色による視覚的なヒントをいくつか用意しました。

• ピンクの境界線は、センタリングスタイルのオーナーシップを示します。
• 灰色のボックスは、アイテムを中央に配置しようとするコンテナの背景です。
• 各子の背景色は白なので、センタリングテクニックが子ボックスのサイズに与える影響を確認できます（存在する場合）。

5つのテクニック #

5つのセンタリングテクニックがResilience Ringerで競い、1つだけがレジリエンスの王冠を勝ち取ります👸。

1. コンテンツセンター #

1. Squish：素晴らしい！
2. Squash：素晴らしい！
3. Duplicate：素晴らしい！
4. Edit：素晴らしい！
5. Flow：素晴らしい！

display: gridの簡潔さとplace-contentのショートハンドに勝るのは厳しくなるようです。これは子を集合的に中央揃えと両端揃えにするため、読まれることを意図した要素グループ向けの堅実なセンタリングテクニックです。

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

.fluffy-center {
  padding: 10ch;
}

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

.fluffy-center {
  padding: 2ch;
}