HPの文章を綺麗に両端揃えにする魔法のタグ「text-align:justify;」について

2021年12月3日
 jam-com-blog

「テキストの端が揃わないんだけど…」
「あー、Webのフォントは見るブラウザで挙動が異なるから仕方ないんですよね…」

といった会話を、けっこうWeb制作の現場で聞いたりします。
HTMLでコーディングしていると、たしかにホームページの文字は右揃え（text-align:right;）、左揃え（text-align:light;）、中央揃え（text-align:center;）の３タイプが主流で、それ以外はできない！

というのが、昔からHTMLをやっているひとほど当たり前でしたよね。

でも、いつの頃からでしょうか、その設定のなかに
両はしを揃える（text-align:justify;）という設定が増え、
ある程度のブラウザの種類やバージョンで、上手にテキストの量端を揃えることができるようになりました。
※ある程度、と明記したのはご推察の通り一部のIEとか古いIEとか、IEとかが対応しない場合があるからです（笑）

text-align

対応ブラウザ Internet Explorer 3～ / Firefox 1～ / Google Chrome 1～ / Safari 1～ / Opera 3.5～
初期値 direction:ltrではleft、
direction:rtlではright		 継承 する
適用可能な要素 ブロック要素
用例 
.style {
  text-align: center;
}

text-alignとは

text-alignとはテキストの水平方向への配置を指定するプロパティです。行揃えの位置や均等割付の形式を指定する際に使用されます。
以下の値で指定します。

left
左寄せにします。
center
中央揃えにします。
right
右寄せにします。
justify
両端揃えにします。

////////////////////////

知っているようで、以外と知らない。
とくに、大昔からHTMLをやっている人間ほど「ない！」と思い込んでいるケースが多い、このtext-align:justify;、
「そんなの当たり前じゃん！」と知っている方には不要な情報かもしれませんが、
私みたいにHTML黎明期から、独学で学習し、ピコピコ手打ちしているような人間は意外と落とし穴な情報。

知らなかったかたはこれを機会に「え、そんなの昔から知ってたし！」と言えるよう、
こっそり、この「text-align:justify;」をマスターしておきましょう（笑）

JAMでした。

///////////////////

福岡・北九州でデザイン、ホームページ制作ならデザイン事務所　株式会社JAM。
販売促進、デザインの事、HTMLコーディングならお任せください。

jam-com-blog
  • jam-com-blog