助手「日本語には、ひらがな、カタカナ、漢字。そこに、１２３４、ABC、abcが入ってくる。我々日本人には当たり前ですが、どう考えても、グチャグチャじゃあないですか！」
博士「どうした急に？落ち着きたまえ。言ってる意味は分かるぞ！」
助手「ならばせめて、ひらがなとカタカナだけをつかうようにして、みためをシンプルにすれば、もっとうつくしくてスッキリしたがいかんになるし、わたしたちにほんじんのかんかくも、どこか、かわるんじゃないですかね？」
博士「いや、それはいいアイデアなんだが、それだと、かんじがないから、どこでたんごがくぎれてるか、わかりにくいんじゃないかな。こじんてきにはさんせいだけどね」
助手「そうですね。しかもにほんごは、がいこくごのように、たんごたんごでスペースをあけないげんごですからね。なんだかそういうかんかくってばらばらのたてものやくかくがぎゅうぎゅうにならんでまとまりのないにほんのまちなみみたいですね！」
博士「こらこら、それじゃ すでに なにを いっているのか、よみづらいじゃないか。わたしを みならいたまえ。」
…すいません。悪ふざけが過ぎました (ほんきで おもってる ぶぶんも あるけど) CSSの話です。
日本語サイトを読みやすく改善する簡単な CSS を提案します。
１：言語としての日本語は「スペース」を使いません。なので、text-align: center; が苦手です。一文字だけ、段落ちしたり、最悪の場合は句読点ひとつだけが下にズレることがあります。その代わりといってはなんですが、text-align: justify; を使用すれば文章の両サイドがキレイに揃うだけではなく、文章の内側が間延びすることがアルファベット等に比べて少ないです。これは、text-align を使った時にコンピューターが「スペース」でしか改行の可否を判断出来ないことを逆手に取った、日本語などの、アジアの言語ならではの利点ですね。
２：そもそも色んな種類の文字が混ざり合ってるのに、段の始めに句読点や括弧が来たりしてますますバランスが悪くなることがあります。なので、word-wrap: break-word; でそうなるのを避けます。
word-break: break-all も良いんですが、句読点とか関係なしにブツ切りになってしまいます(ブラウザーによりそうでない場合もある)
３：言語として「スペース」の概念がない上に、文字間が狭く見え、漢字が連続で並ぶと細かすぎて目が疲れます。そこで、letter-spacing: 0.05em; を用いてサイト内全ての文字間に、パッと見では分からないくらいですが、十分な隙間を与えます。物足りない方は letter-spacing: 0.06〜0.1em; でも良いですね。
というわけで、下記の様に reset.css に設定してみてはいかがでしょう。
* {
text-align: justify;
word-wrap: break-word;
letter-spacing: 0.05em;
}
See the Pen XdqNGg by jc-pen
注１：line-height は文章部分以外、他の要素にも反映されて「縦」のレイアウトに不具合が生じることがあるので、ここには記述はしません
注２：既存のサイトに適応すると、思わぬ箇所にズレが生じるので使用するならサイト制作の最初から、あるいは、既存のサイトなら長い文章にのみ使用するのがオススメです
注３：日本語とアルファベット等の混在率が高いサイト、またはそうした文章箇所には text-align: left; が良いでしょう
サイト全体がスッキリした印象に変わり、疲労した日本人の目のためにもきっと効果的です。
そんじゃまた！！
[CSS記事]
▤ HTML / CSS ブラウザー対応状況を調べるなら [ Can I use ] が分かりやすい
▤ CSS：outline でボーダーを追加して、outline-offset で要素からの距離をとる
