今回は「text-alignで要素の位置を指定しましょう!」についての解説です
こんな方に読んでほしい
- CSSを学び始めた方へ
-
text-align
の使い方について学びたい方へ -
text-align
の書き方について学びたい方へ
HTMLに記述した際は、文章や画像はデフォルトで左寄せになります。
そこで、CSSのtext-align
プロパティを使用し、中央寄せ、右寄せにしてみましょう。
text-alignプロパティを指定した場合
上の図のように、文字を中央寄せにする際にはtext-align: center
を指定すると簡単に
中央寄せが可能になります。
text-alignについて
text-align
プロパティは、文字や画像を
左寄せ、中央寄せ、右寄せに指定する際に使用します。
- 指定できる値
- start
初期値になります
- left
文章や画像を左寄せにします
- center
文章や画像を中央寄せにします
- right
文章や画像を右寄せにします
- justify
最終行を除いて均等割り付けにします
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を比較しました。
(text-align: start;)
ホームページ制作、名刺制作、ロゴ制作など、デザインをする際には配色は欠かせない要素の1つになってきますよね。私も、配色で悩んだ経験はたくさんあります。皆さんも1度や2度悩んだ経験はありませんか?赤色とは情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など愛、熱、力、血など、色の中で抽象的な意味が多い赤色。
(text-align: justify;)
ホームページ制作、名刺制作、ロゴ制作など、デザインをする際には配色は欠かせない要素の1つになってきますよね。私も、配色で悩んだ経験はたくさんあります。皆さんも1度や2度悩んだ経験はありませんか?赤色とは情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など愛、熱、力、血など、色の中で抽象的な意味が多い赤色。
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プロパティを指定しておりますが、子要素に指定した方が優先的に
効いております。
注意!
子要素に値を指定した場合は親要素の値より子要素に指定した方が優先的になります
まとめ
今回はこれで以上です。
- POINT
-
text-align
プロパティは、文字や画像を左寄せ、中央寄せ、右寄せに指定する際に使用します。 - 親要素にtext-alignプロパティを指定した際は、子要素にも継承され適応されます。
- 子要素に値を指定した場合は親要素の値より子要素に指定した方が優先的になります。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事