シュウ

今回は「text-alignで要素の位置を指定しましょう！」についての解説です

こんな方に読んでほしい

• CSSを学び始めた方へ
• text-alignの使い方について学びたい方へ
• text-alignの書き方について学びたい方へ

HTMLに記述した際は、文章や画像はデフォルトで左寄せになります。
そこで、CSSのtext-alignプロパティを使用し、中央寄せ、右寄せにしてみましょう。

上の図のように、文字を中央寄せにする際にはtext-align: centerを指定すると簡単に
中央寄せが可能になります。

text-alignについて

text-alignプロパティは、文字や画像を
左寄せ、中央寄せ、右寄せに指定する際に使用します。

text-align指定方法について

text-align: leftは左寄せになります。
HTMLは基本左寄せになるため、text-align: leftはあまり使用する回数は多くありません。

(text-align: left;)
ホームページ制作、名刺制作、ロゴ制作

(text-align: left;)

p.txt_left {
	text-align: left;
}

.img {
	text-align: left;
}

text-align: centerは中央寄せになります。
ホームページ制作ではよくタイトルを中央寄せにすることが多くあります。

(text-align: center;)
ホームページ制作、名刺制作、ロゴ制作

(text-align: center;)

p.txt_center {
	text-align: center;
}

.img {
	text-align: center;
}

text-align: rightは右寄せになります。
文章や画像を右寄せにする際に指定します。

(text-align: right;)
ホームページ制作、名刺制作、ロゴ制作

(text-align: right;)

p.txt_right {
	text-align: right;
}

.img {
	text-align: right;
}

text-align: justifyは均等割り付けにします。
文章の両サイドをキレイに揃える際に指定します。
ここでは、start(デフォルト)とjustifyを比較しました。

p.txt_justify {
	text-align: justify;
}

text-alignの継承について

先ほとまでは、主にtext-alignプロパティの指定方法についてご説明してきました。
では、親要素に指定した場合、子要素にも適応するのか検証したいとおもいます。

親要素に指定した場合

親要素にtext-alignプロパティを指定した際は、子要素にも継承され適応されます。

(text-align: center;)
ホームページ制作、名刺制作、ロゴ制作

(text-align: center;)

div {
	text-align: center;
}

今回は、文章や画像を親要素のdivタグで囲い、text-align: centerを指定した結果、子要素に継承され中央寄せになりました。
全て中央寄せにしたい場合は個別に指定するよりか、親要素に指定しましょう。

子要素に指定した場合

先ほどは、親要素に対してtext-alignプロパティを指定しましたが、子要素に対しても個別で指定が
できます。

(text-align: center;)
ホームページ制作、名刺制作、ロゴ制作

(text-align: right;)
ホームページ制作、名刺制作、ロゴ制作

(text-align: left;)

div {
	text-align: center;
}

p.txt_right {
	text-align: right;
}

.img {
	text-align: left;
}

親要素に対してtext-alignプロパティを指定しておりますが、子要素に指定した方が優先的に
効いております。

注意！
子要素に値を指定した場合は親要素の値より子要素に指定した方が優先的になります

CSSプロパティ参考になるかも

letter-spacingで文字間を指定しましょう！

文字と文字の間隔を調整しましょう。

font-weightでフォントの太さを指定について！

文字も強調させたい、目立たせたい際に使用します。

まとめ

今回はこれで以上です。

最新記事

• 

  【CSS】画像を左右交互に配置について解説！

  2024.10.05

• 

  【CSS】グラデーション色々なパターンを解説！

  2024.05.15

• 

  【レスポンシブデザイン】アニメーションが動かない原因

  2024.05.09

• 

  【CSS】擬似要素、beforeとafterに画像を表示しサイズの調整ついて!

  2024.05.09

関連記事

< 前の記事

【WordPress】Imsanityで簡単に画像をリサイズしてくれるプラグイン

次の記事 >

【WordPress】WP Maintenance Modeメンテナンス画面を簡単に作成