CSS 文字を左寄せ/右寄せにするサンプル(text-align)

CSSの文字を左寄せ/右寄せにするサンプルです。
text-alignプロパティを使用します。

text-align プロパティ

text-align : 値
説明
left 左寄せにします。
right 右寄せにします。
center 中央に寄せます。
justify 両端揃えになります。最終行は除きます。
justify-all 両端揃えになります。最終行も含みます。
値を継承する

サンプル

text-alignのサンプルです。

1番上は、leftです。左寄せにします。
2番目は、rightです。右寄せにします。
3番目は、centerです。中央に寄せます。
4番目は、5番目のjustifyとの比較のためleftにしています。
5番目は、justifyです。両端揃えになります。

コード

上記サンプルのコードです。

<style>
#p1{
	text-align:left;
}
#p2{
	text-align:right;
}
#p3{
	text-align:center;
}
#p4{
	text-align:left;
}
#p5{
	text-align:justify;
}
p{border:1px solid #000;width:200px;height:50px;
margin-bottom:10px;background:LightCyan;}
</style>

<p id="p1">左寄せ</p>
<p id="p2">右寄せ</p>
<p id="p3">中央寄せ</p>
<p id="p4">This is an apple.This is an apple.</p>
<p id="p5">This is an apple.This is an apple.</p>

関連の記事

CSS 文字の色を指定するサンプル(color)
CSS フォントを指定するサンプル(font-family)
CSS 垂直の位置を指定するサンプル(vertical-align)
CSS 行の高さを指定するサンプル(line-height)
CSS 文字の間隔を指定するサンプル(letter-spacing)
CSS 単語の間隔を指定するサンプル(word-spaceing)
CSS 単語が表示領域を超える場合の改行方法(overflow-wrap/word-wrap)
CSS 表示領域を超える場合の表示方法(overflow)
CSS 文字に線を引くサンプル(text-decoration)

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る