【css】文字の位置を変更する方法８選！！【text-alignを用いた指定方法】

今回は、文字の位置を変更する「text-align」の使い方についてご紹介いたします。

指定された表示範囲の開始位置にそろえる「start」

まずは初期値でもある「start」を見ていきます。
「start」は下記にも示す通りに表示領域の開始位置に文字を揃えます。HTMLでの記述の場合は、左側に寄せられます。

<style>
p{
width:500px;
text-align:start;
background-color:#eee;
}
</style>

<p> 文字の位置を変更するサンプル<br>
text-alignに指定する値によって変わります。
</p>

文字の位置を変更するサンプル
text-alignに指定する値によって変わります。

指定された表示範囲の終了位置にそろえる「end」

「end」は表示領域の終了位置（HTMLの場合は右寄せ）に文字をそろえます。

<style>
p{
width:500px;
text-align:end;
background-color:#eee;
}
</style>

<p> 文字の位置を変更するサンプル<br>
text-alignに指定する値によって変わります。
</p>

文字の位置を変更するサンプル
text-alignに指定する値によって変わります。

指定された表示範囲の左側にそろえる「left」

文字通り左寄せにするための値になります。

<style>
p{
width:500px;
text-align:left;
background-color:#eee;
}
</style>

<p> 文字の位置を変更するサンプル<br>
text-alignに指定する値によって変わります。
</p>

文字の位置を変更するサンプル
text-alignに指定する値によって変わります。

指定された表示範囲の右側にそろえる「right」

「right」では文字を右寄せにします。

<style>
p{
width:500px;
text-align:right;

background-color:#eee;
}
</style>

<p> 文字の位置を変更するサンプル<br>
text-alignに指定する値によって変わります。
</p>

文字の位置を変更するサンプル
text-alignに指定する値によって変わります。

指定された表示範囲の中央にそろえる「center」

文字を中央揃えにする方法です。タイトルなど目立たせたい物によく指定される値です。

<style>
p{
width:500px;
text-align:center;
background-color:#eee;
}
</style>

<p> 文字の位置を変更するサンプル<br>
text-alignに指定する値によって変わります。
</p>

文字の位置を変更するサンプル
text-alignに指定する値によって変わります。

指定された表示範囲に最終行以外を均等に割り振る「justify」

「justify」は表示領域にピッタリ広がるように、均等に文字を配置する値です。ただし、最後の行には適用されず、開始位置方向に文字が詰められます。

また日本語では適応されないので、注意が必要です。

<style>
p{
width:500px;
text-align:justify;
background-color:#eee;
}
</style>

<p> 文字の位置を変更するサンプル<br>
text-alignに指定する値によって変わります。また日本語には適応されないので注意が必要です。<br>
Hello! Welcome to my site "Den Creation"!<br>
It depends on the value specified for text-align. Also, please note that it is not applicable to Japanese.</p>

文字の位置を変更するサンプル
text-alignに指定する値によって変わります。また文字の途中に「br」等を挟み、その行が短く表示領域の終了位置まで到達していないと、最終行とみなされ変更されません。
Hello! Welcome to my site "Den Creation"!
It depends on the value specified for text-align. Also, please note that it is not applicable to Japanese.

指定された表示範囲に最終行も含めて均等に割り振る「justify-all」

「justify-all」は「justify」とほぼ同じです。違いは最終行も均等に文字を配置するか否かになります。

しかし主要なブラウザでは以下の通り適応されません。

<style>
p{
width:500px;
text-align:justify-all;
background-color:#eee;
}
</style>

<p> 文字の位置を変更するサンプル<br>
text-alignに指定する値によって変わります。また主要なブラウザでは適応されないので注意が必要です。
</p>

文字の位置を変更するサンプル
text-alignに指定する値によって変わります。また主要なブラウザでは適応されないので注意が必要です。

同じ結果を求めたい場合は、text-alignに「justify」を指定するとともに、text-align-lastに「justify」を指定することで可能です。

こちらでは日本語でも適応されます。

<style>
    p{
        width:200px;
        text-align:justify;
        text-align-last:justify;
    }
</style>

<p> 文字の位置を変更するサンプル<br>
    text-alignに指定する値によって変わります。
</p>

文字の位置を変更するサンプル
text-alignに指定する値によって変わります。

親要素の値を継承する「match-parent」

「match-parent」は親要素に指定された位置に文字を配置します。

<style>
.parent{
width:500px;
text-align:center;
background-color:#eee;
}
p{
text-align:match-parent;
}
</style>

<div class="parent">
<p> 文字の位置を変更するサンプル<br>
text-alignに指定する値によって変わります。
</p>
</div>