CSSのtext-alignプロパティについての使い方


  1. 左寄せ (text-align: left) テキストを左端に配置します。

    <div style="text-align: left;">
    これは左寄せのテキストです。
    </div>
  2. 中央寄せ (text-align: center) テキストを中央に配置します。

    <div style="text-align: center;">
    これは中央寄せのテキストです。
    </div>
  3. 右寄せ (text-align: right) テキストを右端に配置します。

    <div style="text-align: right;">
    これは右寄せのテキストです。
    </div>
  4. 両端揃え (text-align: justify) テキストを両端に揃えます。行の終わりに余白が追加されます。

    <div style="text-align: justify;">
    これは両端揃えのテキストです。Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  5. 文字列内のテキストの配置 (text-align: center; display: inline-block) 特定の要素内のテキストを中央に配置します。

    <span style="display: inline-block; text-align: center;">
    これは文字列内の中央寄せのテキストです。
    </span>

上記のコード例は、HTML要素内のインラインスタイル属性としてtext-alignプロパティを使用していますが、CSSファイルにスタイルを定義することもできます。

このように、text-alignプロパティを使用することで、テキストの配置を柔軟に制御することができます。これを活用して、ウェブサイトやブログのデザインを改善しましょう。