Skip to content
概要 ブログ 学習する 探検 パターン Case studies
このページ内
  • チャレンジ
    • Resilience Ringer
  • 5つのテクニック
    • 1. コンテンツセンター
    • 2. ジェントルフレックス
    • 3. オートボット
    • 4. ふわふわセンター
    • 5. ポップ&プロップ
  • 勝者
    • MVP
    • まとめ
  • コミュニティリミックス
  • Home
  • All articles

CSSでのセンタリング

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

Dec 16, 2020
Available in: English、Русский、한국어
Adam Argyle
Adam Argyle
TwitterGitHubGlitchHomepage
このページ内
  • チャレンジ
    • Resilience Ringer
  • 5つのテクニック
    • 1. コンテンツセンター
    • 2. ジェントルフレックス
    • 3. オートボット
    • 4. ふわふわセンター
    • 5. ポップ&プロップ
  • 勝者
    • MVP
    • まとめ
  • コミュニティリミックス

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. コンテンツセンター #

VisBugを使用してコンテンツの編集と複製を行う
  1. Squish:素晴らしい!
  2. Squash:素晴らしい!
  3. Duplicate:素晴らしい!
  4. Edit:素晴らしい!
  5. Flow:素晴らしい!

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

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

Pros

-コンテンツは制約されたスペースとオーバーフローでも中央に配置されます- 中央揃えの編集とメンテナンスはすべて1つの場所で行われます - ギャップによって_n_個の子の間で等間隔が保証されます - グリッドはデフォルトで行を作成します

Cons

  • 最も幅の広い子(max-content)が、残りすべての幅を設定します。これについては、 ジェントルフレックスで詳しく説明します。

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

place-contentはdisplay: grid専用ではありません。display: flexにもplace-contentとplace-itemのショートハンドのメリットがあります。

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

Pros

- 整列、方向、および均等割り付けのみを処理します - 編集とメンテナンスはすべて1つの場所で行われます - ギャップによって_n_個の子の間で等間隔が保証されます

Cons

  • コード行数が最も多い

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

重要な用語

マクロレイアウトは、国の州や準州のようなもので、非常に高レベルで広いカバレッジゾーンです。マクロレイアウトによって作成されたゾーンには、より多くのレイアウトが含まれる傾向があります。レイアウトがカバーする面が少ないほど、マクロレイアウトは小さくなります。レイアウトがカバーする面積が小さいか、含まれるレイアウトが少なければ、マイクロレイアウトは大きくなります。

3. オートボット #

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

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

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

Pros

- 楽しいトリック - 急場しのぎ

Cons

  • オーバーフローすると厄介な結果
  • ギャップではなく均等割り付けに依存するということは、子がサイドに触れたレイアウトが発生する可能性があります。
  • 位置に「押し込む」ことは最適ではないようであり、子のボックスのサイズが変わる可能性があります。

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

4. ふわふわセンター #

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

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

.fluffy-center {
padding: 10ch;
}

Pros

-コンテンツを保護します - アトミック - すべてのテストにはこのセンタリング戦略が密かに含まれています - 単語スペースはギャップです

Cons

  • 役に立たないという錯覚
  • コンテナとアイテムの間に衝突があります。当然、それぞれのサイズが固定しているためです。

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

5. ポップ&プロップ #

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

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

Pros

- 便利 - 信頼できる - 必要なときに非常に貴重

Cons

  • 負のパーセンテージ値のコード
  • 内包するブロックを強制する position: relative が必要
  • 早くて厄介な改行
  • ほかの作業を行わなければ、内包するブロック当たり1つしか存在できません

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

勝者 #

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

[ダラララララララ…(ドラムロール)]

ジェントルフレックス🎉

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

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

MVP #

ふわふわセンター

.fluffy-center {
padding: 2ch;
}

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

まとめ #

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

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

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

  • ブログ記事付きのCSSトリック
CSSLayOutIntl
最終更新: Dec 16, 2020 — 記事を改善する
Codelabs

See it in action

Learn more and put this guide into action.

  • Codelab: Centering in CSS
Return to all articles
共有する
サブスクライブする

Contribute

  • バグを報告する
  • ソースを表示する

関連性のあるコンテンツ

  • developer.chrome.com
  • Chrome のアップデート
  • ケーススタディ
  • ポッドキャスト
  • ショー

接続する

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • すべての製品
  • 利用規約とプライバシーポリシー
  • コミュニティガイドライン

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.