テキストの配置
CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 21/76。
CSSでは、text-alignプロパティは、HTML要素内でのテキストの水平方向の配置を制御するために使用されます。
text-align の一般的な値には以下が含まれます:
left: テキストを左側に揃えます。これは、ほとんどのテキストのデフォルトの配置です。
right: テキストを右に揃えます。center: 要素内でテキストを水平方向に中央揃えにします。
例えば:
p {
text-align: left;
}
h1 {
text-align: center;
}
.right-align {
text-align: right;
}チャレンジ
簡単見出し(<h1>)、段落(<p>)、およびディビジョン(<div>)が含まれるHTMLドキュメントが与えられます。あなたのタスクは、text-alignプロパティを使用してこれらの要素をスタイリングすることです。以下の手順に従ってください:
<h1>要素をターゲットとするCSSルールを記述します。text-alignをcenterに設定してください。<p>要素をターゲットとするCSSルールを記述します。text-alignをrightに設定してください。<div>要素をターゲットとするCSSルールを記述します。text-alignをleftに設定してください。
チートシート
text-alignプロパティは、要素内のテキストの水平方向の配置を制御します。
一般的な値:
left: テキストを左側に配置します(デフォルト)right: テキストを右側に配置しますcenter: テキストを水平方向の中央に配置します
p {
text-align: left;
}
h1 {
text-align: center;
}
.right-align {
text-align: right;
}自分で試してみよう
<html>
<head>
<title>Text Alignment</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a heading. </h1>
<p>This is a paragraph.</p>
<div>This is a division. </div>
</body>
</html>このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。