Codelab: CSS の中央揃え

Adam Argyle 氏

この Codelab では、CSS でお気に入りのセンタリング方法を共有して紹介するための準備を整えます。

CSS で中央に配置するおすすめの方法の 5 つについて詳しくは、私のブログ投稿 Centering in CSS をご覧ください。または、こちらの動画をご覧ください。

設定

  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 をツイートして、ブログ投稿で紹介します。