Wordやイラストレータには、長文文章の左右を綺麗に揃えてくれる「均等割り付け」という機能があります。ボタン一つで整えてくれるのでとても便利な機能です。ホームページも当然できるだろうと調べてみたところ「text-align」という、文字の配置を左寄せ・中央・右寄せする指示の中に「justify（均等割付）」がありました！早速実装してみると、右側が綺麗に揃っていなかった長文がキッチリ揃っているではないですか！もっと早く実装しておけばよかったなぁと思っていたところ、お客様から「揃ってないですよ」とのお言葉が？？？普段私はchromeを使用しているのですが、IEでは今も「text-align:justify;」だけでは綺麗に揃ってくれないようです。
IEのみ、文章の右側が縦に揃っていません
浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。
そこで同じ箇所に記述を増やします。「text-justify:inter-ideograph;」を追加するとIEやEdgeも右側を揃えることができるそうです。日本語のように全角の文字、中国語やハングル文字もこれで大丈夫そうでした。text-justifyを調べてみると言語による行端揃えを調整するCSSとのこと。
「text-justify:inter-ideograph;」で実装
浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。
よーし！これで全部綺麗に揃うぞ………と言いたいところなのですが、この「text-justify」という仕様、まだW3Cの正式な仕様にはなっていません。なので、今これを実装しても今後使えない（適用されない）可能性があります。
また、このコード、半角英語では字間が開きすぎて読みにくくなるということもあります。（日本語のような全角文章を想定した記述な為。）
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
浜松・掛川のホームページ制作会社メルシーでは、紙面広告からインターネットまで幅広くあなたの会社を支援します。気軽にご相談ください。
お客様に書いてもらうブログにもこのタグを実装することもできるのですが「半角英字が入ると崩れる可能性」「今後ブラウザのバージョンアップ等でレイアウト崩れるかも」…というリスクを理解してもらわなくてはいけません。
学生時代、私は英語が大の苦手だったので、ホームページ制作の仕事を初めたばかりの頃は「コードやタグも日本語ならいいのに…」と思っていたのですが、今では日本語の厄介さと戦うことに…。文章を読みやすく、美しく見せたい！インターネットの上では全角半角がミックスしたり、ひらがな・カタカナ・漢字の入り乱れる日本語はとても微妙な言語なようです。