文章を真ん中に配置したいんだよね
文章を好きなところに配置するには”text-align”プロパティというものを使うととても簡単にできるよ
1.テキストの配置”text-align”
文章の水平方向の位置を指定するにはtext-alignプロパティを使います。
セレクター{
text-align: 値;
}その値を変えることで位置を指定します。
値をそれぞれ見ていきましょう
1-1.text-align: left;
セレクター{
text-align: left;
}値を”left“に設定すると左端揃いになります。(見やすさのため背景色を設定しています)
これは正式な文章の代わりに入れて使うダミーテキストです。この組見本は自由に複製したり頒布することができます。これは正式な文章の代わりに入れて使うダミーテキストです。主に書籍やウェブページなどのデザインを作成する時によく使われます。このダミーテキストは自由に改変することが出来ます。この組見本は自由に複製したり頒布することができます。
左端に整列し、右側に余白が空きますが余白はまばらです。
1-2.text-align: right;
セレクター{
text-align: right;
}値を”right“に設定すると右端揃いになります。
これは正式な文章の代わりに入れて使うダミーテキストです。この組見本は自由に複製したり頒布することができます。これは正式な文章の代わりに入れて使うダミーテキストです。主に書籍やウェブページなどのデザインを作成する時によく使われます。このダミーテキストは自由に改変することが出来ます。この組見本は自由に複製したり頒布することができます。
右端に整列し、左側に余白が空きますがこちらも余白がまばらです。
1-3.text-align: justify;
セレクター{
text-align: justify;
}値を”justify“に設定すると両端を起点に揃います。
これは正式な文章の代わりに入れて使うダミーテキストです。この組見本は自由に複製したり頒布することができます。これは正式な文章の代わりに入れて使うダミーテキストです。主に書籍やウェブページなどのデザインを作成する時によく使われます。このダミーテキストは自由に改変することが出来ます。この組見本は自由に複製したり頒布することができます。
両端に文字が均等に配置されています。
1-4.text-align: center;
セレクター{
text-align: center;
}値を”center“に設定すると中央揃いになります。
これは正式な文章の代わりに入れて使うダミーテキストです。この組見本は自由に複製したり頒布することができます。これは正式な文章の代わりに入れて使うダミーテキストです。主に書籍やウェブページなどのデザインを作成する時によく使われます。このダミーテキストは自由に改変することが出来ます。この組見本は自由に複製したり頒布することができます。
中央に整列し、改行された文章にも余白が左右に均等に分配されます。
2.まとめ
- text-alignプロパティを使い値を変える事でテキストの配置を変えられる
セレクター{
text-align: 値;
}- 値には以下のものが代表的に入る
- left…左端揃い
- right…右端揃い
- justify…両端揃い
- center…中央揃い
- 短文やタイトルなどは中央揃いにした方がバランスがとれ、説明文などは左端揃いや均等揃いにした方が読みやすくなる
クリックでtext-alignの値が変わります
これは正式な文章の代わりに入れて使うダミーテキストです。この組見本は自由に複製したり頒布することができます。これは正式な文章の代わりに入れて使うダミーテキストです。主に書籍やウェブページなどのデザインを作成する時によく使われます。
文章をうまく配置できるようになったよ！
text-alignはかなり使うプロパティなので動きをしっかりと覚えましょう
コメント