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

CSSのtext-alignプロパティの使い方と設定値をわかりやすく解説

CSSのtext-alignプロパティは、テキストの水平方向の配置（アラインメント）を指定するために使用されます。このプロパティを使うことで、文章を見栄えよく整え、読みやすいレイアウトを作成できます。

text-alignで指定できる主な値

text-alignプロパティには、以下の4つの値を指定できます。

  • left：テキストを左揃えにします（日本語や英語など、左から読む言語では初期値）
  • right：テキストを右揃えにします
  • center：テキストを中央揃えにします
  • justify：テキストを両端揃えにし、行の左右両端が均等になるように調整します

text-alignの実装例

実際にtext-alignプロパティを使用するコード例は以下の通りです。各段落に異なる値を指定して、表示の違いを確認できます。

<html>
   <head>
   </head>
   <body>
      <p style = "text-align:right;">
         このテキストは右揃えで表示されます。
      </p>

      <p style = "text-align:center;">
         このテキストは中央揃えで表示されます。
      </p>

      <p style = "text-align:left;">
         このテキストは左揃えで表示されます。
      </p>
   </body>
</html>

上記のコードを実行すると、1つ目の段落は右揃え、2つ目の段落は中央揃え、3つ目の段落は左揃えで表示されます。インラインスタイルとしてstyle属性に直接記述していますが、外部スタイルシートや<style>タグ内でクラスやセレクターを使って指定することも可能です。

なお、justify（両端揃え）は長い文章の段落でよく使われる値ですが、単語間や文字間のスペースが不自然に広がる場合があるため、使用する場面には注意が必要です。

  1. CSSのborder-right-styleプロパティの使い方を徹底解説

    border-right-styleプロパティとはCSSのborder-right-styleプロパティは、要素の右側の境界線（ボーダー）のスタイルを指定するためのプロパティです。破線や点線、実線など、さまざまな線種を設定できます。主な値の一覧none … ボーダーを表示しない（初期値）solid … 一本の実線dashed … 破線dotted … 点線double … 二重線groove / ridge / inset / outset … 立体的な装飾線実装例以下のコードでは、右側のボーダーに破線（dashed）を適用しています。border-widthで線の太さを4pxに設定し、bor

  2. CSSのborder-left-widthプロパティで左ボーダーの幅を指定する方法

    CSSのborder-left-widthプロパティは、要素の左側の境界線（ボーダー）の太さを変更するために使用します。このプロパティを使うことで、左ボーダーだけの幅を個別に調整できます。使用例以下のコードは、border-left-widthプロパティを実装した実際の例です。<html>    <head>    </head>    <body>       <p style = "border-left-width:6px;border