レイアウトテクニックの1つにグリッドシステムがあります。均等に並べた矩形の中に文章や写真をはめ込む手法です。整然と情報をまとめられるために、文章量が多くなる場合でも読みやすくなります。しかしページが均一に見えてしまうために単調になってしまう事もあります。今回は見えないラインを引くテキストボックスの作り方をまとめてみました。

矩形を意識したテキストボックス

2種類のテキストボックスを横幅280pxに設定をして、divを用いてボックスを作製しました。左側のボックスは左揃え、右側は両端揃え処理をしています。文末に赤いラインを引いてあります。

左揃えで並べる

両端揃えで並べる

比べてみると

並べてみると左揃えでは文末がでこぼこしていますが、両端揃えでは行末以外は真っ直ぐに整っていおり、まとまりと読みやすさを感じます。実際には線が引いてあるわけではありませんが、見えない矩形を強く印象付けます。このためグリッドシステムのレイアウトで使用すると、よりグリッドを意識させる事ができます。
最後にスタイルシートの設定をまとめておきます。

.sample {
text-align:justify;
text-justify:distribute;
-ms-text-justify:distribute;}