dorayakiBlog

Webサイトの文章の端をきれいに揃える

/* CSSファイルに記述 */
/* CSS3 */
selector名 {
   text-align: justify;
   text-justify: ;
}

:
auto
inter-word
inter-ideograph
inter-cluster
distribute
kashida

※ selector名 =(p, div, h1 など)



iOS7でtext-justify 適用前


iOS7でtext-justify 適用後

赤ラインの行の文字の間隔が引き伸ばされ調整されました。

auto, inter-word, inter-ideograph,
distribute が日本語には良さそう。

text-align を justify に指定して、
text-justify の値を指定する。
二つ指定する必要があるのがポイントのようです。

各値は、間隔の開け方、特定の言語の違い、によって両端揃えされる模様。

お世話になったサイト:
HTMLクイックリファレンス
より参考・引用、詳しくはこちら

※ブラウザなどの環境により適用できない場合もありますのでご注意を。CSS2 の値もある。

※直書きのHTMLサイトはもちろんブログサービスでもHTMLとCSS編集可能なら、適用させるタグのselector名でCSSに記述。

個々のWebデザイナーやWebデザイン会社のテクニックとしては常識だとは思うが、一連のWebデザインの知識としては書籍やWebサイトで、この印刷的な知識とWeb製作が関連化されていないように見えたので、ここに記しておきたいと思った次第である。

Webの知識は膨大で、かつ自身もこの分野に関して未熟なので、気がついた事からどんどん取り入れていきたいと考える。
そして自身のつまづいた経験からの、
覚え書として、
かつ同じ事で困っている人が居て役立つなら幸いと思い、Webの豆知識的な事も書きたいと思います。
(特にパソコンなどの分野はスペシャリストがWeb上に多くの有益な情報を書かれているので、ニッチな隙間を縫うような視点で書ければ幸いです。)