Codelab: CSS の中央揃え

Adam Argyle

この Codelab では、CSS で中央揃えを行うお気に入りの方法を共有して紹介します。

ブログ投稿の 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 で私に送信してください。ブログ投稿で紹介させていただきます。