-
左寄せ (text-align: left) テキストを左端に配置します。
<div style="text-align: left;"> これは左寄せのテキストです。 </div>
-
中央寄せ (text-align: center) テキストを中央に配置します。
<div style="text-align: center;"> これは中央寄せのテキストです。 </div>
-
右寄せ (text-align: right) テキストを右端に配置します。
<div style="text-align: right;"> これは右寄せのテキストです。 </div>
-
両端揃え (text-align: justify) テキストを両端に揃えます。行の終わりに余白が追加されます。
<div style="text-align: justify;"> これは両端揃えのテキストです。Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
-
文字列内のテキストの配置 (text-align: center; display: inline-block) 特定の要素内のテキストを中央に配置します。
<span style="display: inline-block; text-align: center;"> これは文字列内の中央寄せのテキストです。 </span>
上記のコード例は、HTML要素内のインラインスタイル属性としてtext-alignプロパティを使用していますが、CSSファイルにスタイルを定義することもできます。
このように、text-alignプロパティを使用することで、テキストの配置を柔軟に制御することができます。これを活用して、ウェブサイトやブログのデザインを改善しましょう。