Menu
Coddy logo textTech

テキストの配置

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;
}
challenge icon

チャレンジ

簡単

見出し(<h1>)、段落(<p>)、およびディビジョン(<div>)が含まれるHTMLドキュメントが与えられます。あなたのタスクは、text-alignプロパティを使用してこれらの要素をスタイリングすることです。以下の手順に従ってください:

  1. <h1>要素をターゲットとするCSSルールを記述します。text-aligncenterに設定してください。
  2. <p>要素をターゲットとするCSSルールを記述します。text-alignrightに設定してください。
  3. <div>要素をターゲットとするCSSルールを記述します。text-alignleftに設定してください。

チートシート

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>
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

Styling with CSSのすべてのレッスン