text-align プロパティは、テキストの水平方向での配置(左寄せ、中央揃え、右寄せ、両端揃えなど)を制御するために使用されます。以下は text-align プロパティの使い方の例です。
text-align プロパティは、ウェブページ内のテキストの配置を制御し、デザインをカスタマイズするのに役立ちます。テキストを適切に配置することで、コンテンツの可読性と視覚的な魅力を向上させることができます。
目次
左寄せ(デフォルト)を指定した使用例
1 2 3 4 5 |
p { text-align: left; } |
この例では、段落内のテキストが左寄せされます。これは通常、ブロック要素(たとえばタグ)に対してデフォルトで適用されます。
中央揃えを指定した使用例
1 2 3 4 5 |
h1 { text-align: center; } |
h1 要素内のテキストが中央揃えされます。これは見出しを中央に配置するのに便利です。
右寄せを指定した使用例
1 2 3 4 5 |
.right-align { text-align: right; } |
.right-align クラスを持つ要素内のテキストが右寄せされます。これは特定の要素に右寄せを適用するための例です。
両端揃えを指定した使用例
1 2 3 4 5 |
.justify { text-align: justify; } |
.justify クラスを持つ要素内のテキストが両端揃えになります。段落内のテキストが均等に配置され、左右の端に揃えられます。
キーワードを使った配置を指定した使用例
1 2 3 4 5 |
.custom-align { text-align: start; } |
.custom-align クラスを持つ要素内のテキストをブラウザの設定に従って左または右に配置します。start キーワードはテキストの記述方向に合わせて自動的に左または右を選択します。
複数の要素に対して一括適用を指定した使用例
1 2 3 4 5 |
h2, h3, h4 { text-align: center; } |
h2、h3、h4 タグ内のテキストがすべて中央揃えになります。複数の要素に同じスタイルを適用するのに便利です。
テーブルセル内のテキスト配置を指定した使用例
1 2 3 4 5 |
td { text-align: right; } |
テーブルセル内のテキストが右寄せされます。テーブルのセルごとに異なる配置を指定できます。