文字の配置について
本日の教材動画はこちら
文字(文章)の配置の仕方について学んでいきます。
text-aling について
文字の配置を指定する場合は「text-aling」というプロパティを使います。値に指定できる種類はいくつかありますが、代表的なのが下記の4つです。
- left → 左寄せ
- right → 右寄せ
- center → 中央寄せ
- justify → 両端揃え
注意しなければいけないのは、これらはあくまで「文字配置」の指定方法であり、画像やブロック配置には利用できません。(一部サイトで画像にも利用可の表記を見かけましたが、更新日時が古かったので今回は動画通りに学習します)
また、justifyは「アルファベットの文章」を両端揃えするものであり、日本語は別の書き方があるとのこと。ただ調べてみたところ、明確な「日本語の場合はこう!」という記事を見つける事ができませんでした...。日本語の両端揃えはブラウザによって対応状況が異なっており、justifyのみでも日本語対応しているもの、していないものがあることだけわかりました。
では早速試しにそれぞれ書いてみましょう。まず準備したHTMLソースがこちら。
CSSは下記のように指定しました。
そして出来上がりのページがこちらになります。
日本語文章に justify 指定をかけてみたところ、わかりにくいですが無事に機能している様子。chromeでは対応してるってことでいいのかしらね…?半角全角、英単語入りなどでまた状況が変わってくるかもしれませんが、結局どの書き方が正しいのか調べても今の私ではわからなさそうなので、ひとまず「日本語はブラウザによる!」と覚えておくことにします。
【参考サイト】