2020.02.12 2024.08.19

text-alignプロパティの使い方・サンプルコード

Sara

text-align
使用できる値
使用例
対応ブラウザ
関連するHTML要素
関連するCSSプロパティ

text-align

text-alignプロパティは、ブロック要素やテーブルセル内のテキストの水平方向の表示位置を指定します。

使用できる値

セレクタ {
  text-align: ここに値を指定;
}

値		表示サンプル
start（初期値）	行の開始位置に合わせる	あいうえお
end	行の終了位置に合わせる	あいうえお
left	左揃え	あいうえお
right	右揃え	あいうえお
center	中央揃え	あいうえお
justify	最後の行を除いて、テキストが左右の端に揃うよう語間が調整されます。	ここにテキストが入ります。ここにテキストが入ります。
justify-all	最後の行も含めて、テキストが左右の端に揃うよう語間が調整されます。	* 多くのブラウザで非対応
match-parent	親要素の値を継承	* 一部ブラウザで非対応

使用例

このサンプルではテーブル内の文字列を右揃えにしています。

HTML

<table class="table">
<tr>
  <th>商品名</th>
  <th>値段</th>
</tr>
<tr>
  <td>商品A</td>
  <td>¥1000</td>
</tr>
<tr>
  <td>商品B</td>
  <td>¥1500</td>
</tr>
</table>

CSS

.table {
  width: 30%;
  border-collapse: collapse;
}
.table th, .table td {
  border: 1px solid lightgrey;
  padding: 10px;
  text-align: right;
}

実行結果

対応ブラウザ

text-alignプロパティの使い方・サンプルコード

text-align

使用できる値

使用例

対応ブラウザ

関連するHTML要素

関連するCSSプロパティ

Code for Fun プログラミング講座

動くコード

自分のペースで

個別サポート

検索

カテゴリ

まとめページ

限定公開

プログラミング学習