CSSでのセンタリング

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

Dec 16, 2020

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

Adam Argyle

Twitter GitHub Glitch Homepage

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;
}

段落や見出し、プロトタイプ、または一般的に読みやすいセンタリングを必要とするものを含むマクロのレイアウトに最適です。

2. ジェントルフレックス #

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

ジェントルフレックスは、より真のセンタリング限定戦略です。place-content: centerとは異なり、センタリング中に子のボックスのサイズが変更されないため、緩やかで柔軟性があります。可能な限り緩やかに、すべてのアイテムはスタックされ、中央に配置され、間隔が空けられます。

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

マクロとミクロのレイアウトの両方に最適です。

3. オートボット #

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

コンテナは整列スタイルなしでフレックスするように設定されていますが、直接の子は自動マージンでスタイル設定されています。margin: autoには、要素のすべてのサイドに適用される何となく懐かしく素晴らしいものがあります。

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

アイコンや擬似要素の中央揃えに最適です。

4. ふわふわセンター #

1. Squish：悪い
2. Squash：悪い
3. Duplicate：悪い
4. Edit：素晴らしい！
5. Flow: 素晴らしい！（論理プロパティを使用する限り）

「ふわふわセンター」は、最もおいしい響きの候補であり、完全に要素/子が制御する唯一のセンタリングテクニックです。私たちのソロの内側のピンクのボーダーを見てください！？

.fluffy-center {
  padding: 10ch;
}

単語やフレーズを中心とセンタリング、タグ、ピル、ボタン、チップなどに最適です。

5. ポップ＆プロップ #

1. Squish：OK
2. Squash：OK
3. Duplicate：悪い
4. Edit: まぁまぁ
5. Flow: まぁまぁ

これは、絶対位置によって要素が通常のフローからはじき出されるため、「ポップ」します。名前の「プロップ」の部分は、私が他のものの上にそれをポチャンと落とす（プロップする）ことが最も役立つと思ったことに由来しています。これは、コンテンツサイズに柔軟かつ動的な、古典的で便利なオーバーレイセンタリングテクニックです。UIを他のUIの上に配置する必要がある場合もあります。

モーダル、トーストとメッセージ、スタックと深さ効果、ポップオーバーに最適です。

勝者 #

孤島でセンタリングテクニックを1つしか持てなかったとしたら、それは…

[ダラララララララ…（ドラムロール）]

ジェントルフレックス🎉

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

マクロレイアウトとマイクロレイアウトの両方に役立つので、私のスタイルシートではいつも使用しています。これは、私の期待にマッチする結果を出してくれる、万能で信頼性の高いソリューションです。また、私は本質的にサイジングオタクなので、このソリューションに向かう傾向があります。確かに、入力する量は多いですが、それから得るメリットの方が余分なコードよりも高いのです。

MVP #

ふわふわセンター

.fluffy-center {
  padding: 2ch;
}

ふわふわセンターは非常に小さいので、センタリングテクニックとして見落としがちですが、私のセンタリング戦略の定番です。とてもアトミックなので、使っているのを忘れてしまうことがあります。

まとめ #

あなたのセンタリング戦略を破ったのはどのタイプですか？レジリエンスリンガーには他にどのようなチャレンジを追加できるでしょうか？コンテナの変換と自動高の切り替えを検討しましたが、他に何かありますか？

私のやり方がわかったところで、あなたならどのようにしますか？私たちのアプローチを多様化し、Webで構築するためのあらゆる手法を一緒に学んでいきましょう。この記事のcodelabに従って、この記事の例と同じように、独自のセンタリングの例を作ってみてください。あなたのバージョンを私宛にツイートしていただけば、下のコミュニティリミックスセクションに追加します。

コミュニティリミックス #

• ブログ記事付きのCSSトリック