33歳主婦プログラマーを目指す

33歳主婦がプログラマーを目指してあれこれ奮闘する日記です

文字の配置について

本日の教材動画はこちら 

文字(文章)の配置の仕方について学んでいきます。

text-aling について

文字の配置を指定する場合は「text-aling」というプロパティを使います。値に指定できる種類はいくつかありますが、代表的なのが下記の4つです。

  • left → 左寄せ
  • right → 右寄せ
  • center → 中央寄せ
  • justify → 両端揃え

注意しなければいけないのは、これらはあくまで「文字配置」の指定方法であり、画像やブロック配置には利用できません。(一部サイトで画像にも利用可の表記を見かけましたが、更新日時が古かったので今回は動画通りに学習します)

 

また、justifyは「アルファベットの文章」を両端揃えするものであり、日本語は別の書き方があるとのこと。ただ調べてみたところ、明確な「日本語の場合はこう!」という記事を見つける事ができませんでした...。日本語の両端揃えはブラウザによって対応状況が異なっており、justifyのみでも日本語対応しているもの、していないものがあることだけわかりました。

 

 

では早速試しにそれぞれ書いてみましょう。まず準備したHTMLソースがこちら。

ページのソース内容

ページのソース内容

CSSは下記のように指定しました。

外部CSSファイルの中身

外部CSSファイルの中身

そして出来上がりのページがこちらになります。

出来上がったページ

出来上がったページ

日本語文章に justify 指定をかけてみたところ、わかりにくいですが無事に機能している様子。chromeでは対応してるってことでいいのかしらね…?半角全角、英単語入りなどでまた状況が変わってくるかもしれませんが、結局どの書き方が正しいのか調べても今の私ではわからなさそうなので、ひとまず「日本語はブラウザによる!」と覚えておくことにします。

 

【参考サイト】

text-align

日本語テキスト両端揃え【IE、Firefox対応】