JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSのtext-alignプロパティでテキストの配置を整える方法

CSSのtext-alignプロパティは、ドキュメント内のテキストの配置(揃え位置)を指定するために使用します。指定できる値は「left(左寄せ)」「right(右寄せ)」「center(中央揃え)」「justify(両端揃え)」の4種類です。

主な値の説明

  • left:テキストを左端に揃えます(日本語や英語など左から読む言語では初期値です)
  • right:テキストを右端に揃えます
  • center:テキストを中央に揃えます
  • justify:テキストを左右両端に揃え、均等に割り付けます

記述例

以下のコードを実行すると、text-alignプロパティによるテキストの配置を確認できます。1つ目の段落は右寄せ、2つ目の段落は中央揃えで表示されます。

<html>
   <head>
   </head>
   <body>
      <p style = "text-align:right;">
         Asia is a continent.
      </p>
      <p style="text-align:center;">
         Asia is a continent.
      </p>
   </body>
</html>

  1. CSSのtext-alignプロパティでテキストの配置を設定する方法

    text-alignプロパティとはCSSのtext-alignプロパティを使用すると、要素内のテキストを水平方向に配置できます。指定できる値は以下の4種類です。left … 左揃えright … 右揃えjustify … 両端揃えcenter … 中央揃え構文CSS text-alignプロパティの構文は次のとおりです。Selector { text-align: /*値*/ }使用例1：div要素とp要素への適用以下の例では、CSS text-alignプロパティの基本的な使い方を示しています。<!DOCTYPE html> <html> <head&g

  2. CSSのhyphensプロパティでテキストにハイフンを追加する方法

    CSSのhyphensプロパティを使用すると、テキスト内にハイフン（連字符）をどのように挿入するかを細かく制御できます。長い単語やURLなどがコンテナからはみ出すのを防ぎ、読みやすい行折り返しを実現したい場合に便利なプロパティです。 hyphensプロパティの主な値 none：ハイフンによる改行を一切行いません。&shy;などの手動指定も無効になります。 manual：&shy;（ソフトハイフン）など、HTML内で明示的に指定された位置でのみハイフンを挿入します（初期値）。 auto：ブラウザが各言語の規則に基づいて自動的にハイフンを挿入します。lang属性の指定が推奨されま