Codelab: CSS の中央揃え

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

ブログ投稿「Centering in CSS」(CSS のセンターリング)で、 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 をツイートしていただければ、こちらで紹介させていただきます。 ブログ投稿をご覧ください。