CSSで文章の改行位置を揃える（禁則処理）

HTMLで長文があるときに、その文章の改行位置が揃っていないと見た目的にちょっと気になることないでしょうか。
ちょうどこんな感じに↓

HTMLコーダーとは、(X)HTML(※1)・CSS(※2)などを使用し、ウェブデザイナーがデザインしたものをブラウザ(※3)で見られるように、コードを書く(※4)人のことです。※1．ウェブページを作成成するためのマークアップ言語。.※2．ウェブページのデザイン・レイアウトを定義するための規格。※3．Internet ExplorerやFirefox・Safariなどの、インターネットを閲覧するために使うソフトのこと。※4．HTMLコーディングと言います。 HTMLコーダーの仕事仕事の種類と内容HTMLコーダーは普段どのような仕事をしているのでしょうか。ここからは仕事の種類と内容について紹介します。ウェブサイトのHTMLコーディング冒頭でも触れたように、ウェブデザイナーがデザインしたものをブラウザで見られるようにするためにHTMLコーディングしていきます。 ここで、Internet Explorer・Firefox・Safariなど複数のブラウザへの対応が求められます。何故なら、ブラウザごとに表示の差違があり、 Internet Explorerで表示されたものがSafariでは表示されないということが起こる上に、ユーザーもInternet Explorerだけを使っているだけではないからです。この複数のブラウザへの対応がHTMLコーディングの一番難しいところであり、これが出来て一人前のHTMLコーダーと言えるところでもあります。

このようにウェブサイトでは改行位置が揃っていないことが多いと思いますが、やはり改行位置が揃っていた方が読みやすく、見た目的にも綺麗で気持ちがいい文章に見えます。

ということで今回は、CSSを使った文章の改行位置を揃える方法の紹介です。

使用するCSSプロパティ

使用するCSSプロパティは以下の二つだけです。

• text-align
• text-justify

この2つを下記のように指定します。

text-align は文章の位置を左（left）・中央（center）・右（right）寄せにする際に使用するCSSプロパティですが、それ以外にも均等割付（justify）の値をもっています。
これを記述することで、改行位置を揃えることができます。（※ブラウザの仕様によります）

次に、IE6～8用に text-justify: inter-ideograph という記述をします。これはCSS3の草案で出されたCSSプロパティなのですが、IEが先行実装しており、IE6～8で対応しています。

改行位置を揃えたもの（均等割付をしたもの）がこちら

HTMLコーダーとは、(X)HTML(※1)・CSS(※2)などを使用し、ウェブデザイナーがデザインしたものをブラウザ(※3)で見られるように、コードを書く(※4)人のことです。※1．ウェブページを作成成するためのマークアップ言語。.※2．ウェブページのデザイン・レイアウトを定義するための規格。※3．Internet ExplorerやFirefox・Safariなどの、インターネットを閲覧するために使うソフトのこと。※4．HTMLコーディングと言います。 HTMLコーダーの仕事仕事の種類と内容HTMLコーダーは普段どのような仕事をしているのでしょうか。ここからは仕事の種類と内容について紹介します。ウェブサイトのHTMLコーディング冒頭でも触れたように、ウェブデザイナーがデザインしたものをブラウザで見られるようにするためにHTMLコーディングしていきます。 ここで、Internet Explorer・Firefox・Safariなど複数のブラウザへの対応が求められます。何故なら、ブラウザごとに表示の差違があり、 Internet Explorerで表示されたものがSafariでは表示されないということが起こる上に、ユーザーもInternet Explorerだけを使っているだけではないからです。この複数のブラウザへの対応がHTMLコーディングの一番難しいところであり、これが出来て一人前のHTMLコーダーと言えるところでもあります。

———-

ということで、文章を綺麗に見せるテクニックとして使えそうです。