Codelab: CSS の中央揃え

Adam Argyle

この Codelab では、CSS でのセンタリングの最適な方法を共有して紹介できるようにします。

私のブログ投稿「Centering in CSS」では、CSS で中央揃えを行う 5 つのお気に入りの方法について説明しています。こちらの動画もご覧ください。

セットアップ

  1. [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
  2. app/index.html を開く
  3. line 23 で、/* your centering CSS here /* を CSS に置き換えます。
  4. （省略可）センタリング手法に名前を付け、<h1> のテキストを置き換えます。

スタイル

  1. app/css/ フォルダに新しいファイルを作成する
  2. センタリング ソリューション（.turbo-center や [floaty-mcfloat] など）を保持するセレクタを作成します。
  3. その新しいセレクタ内で、中央揃えのテクニックを記述します（app/css/ の他のセレクタを例として参照してください）。
  4. （省略可）「サポート スタイル」をいくつか記述して、中央揃えをサポートするためにスタイルが必要な子要素を確認します。
  5. app/css/index.css を開き、下部にある新しいファイルをインポートします。

まとめ

  1. app/index.html をもう一度開く
  2. <article> を見つけて、前のセクションのステップ 2 で作成したカスタム セレクタを指定します。
  3. Glitch を Twitter でツイートしてください。ブログ投稿で紹介します。