Codelab: CSS の中央揃え
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
この Codelab では、皆さんのお気に入りのセンタリング方法を共有し、紹介するための準備をします。
CSS。
ブログ投稿「Centering in CSS」(CSS のセンターリング)で、
CSS で中央寄せる方法が
よく使われていますまたは、こちらの動画をご覧ください。
セットアップ
- [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
app/index.html
を開きます。
line 23
で、/* your centering CSS here /*
を実際の CSS に置き換えます。
- (省略可)センタリング手法に名前を付け、
<h1>
のテキストを置き換えます
スタイル
app/css/
フォルダに新しいファイルを作成します
- センタリング ソリューションを保持するセレクタを作成します。たとえば、
.turbo-center
や
[floaty-mcfloat]
- 新しいセレクタ内に、センタリングの手法を入力します(
(
app/css/
のもう一つは、例として)
- (省略可)「サポート スタイル」と記述します。どの子供たちが
中央に配置するのをサポートする
app/css/index.css
を開き、下部にある新しいファイルをインポートします。
すべてをまとめる
app/index.html
を再開
<article>
を見つけて、ステップ 2 で作成したカスタム セレクタを指定します。
説明します。
- あなたの Glitch をツイートしていただければ、こちらで紹介させていただきます。
ブログ投稿をご覧ください。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2020-12-16 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2020-12-16 UTC。"],[],[]]