日本語の文章をキレイに見せる3つのCSSテクニック

最近覚えた、テキスト周りのCSS記述法をまとめておきます。

海外のHTMLテンプレートやWordPressに日本語の文章を流し込むと急激にダサくなったりしますが、今回紹介するテクニックを使えばその問題が解決するかも？

1.レスポンシブ対応の見出し改行

日本語特有の問題として、改行位置が気になることがあります。文章の途中の予期しない位置で改行されてしまうわけです。本文であれば仕方ないのですが、見出しが変な場所で改行されると一気にダサくなります。

中途半端な位置で改行される例

以下のように、横幅によって改行位置が変わります。

See the Pen 改行問題1 by Takumichi Nakashima (@dcp) on CodePen.dark

一方、英文の場合は…

英語の文章の場合は単語と単語の境目で改行されるので、それほど変なことにはならないはずです。

See the Pen 改行問題（英文の場合は…） by Takumichi Nakashima (@dcp) on CodePen.dark

<br>タグで改行すると…

だったら、改行したい位置に<br>タグを挿入してしまえばいいと思われるかもしれません。ですが、それだとPCのディスプレイで見たときは良くても、スマホで見たときは残念なことになります。

以下の例では、1文目の句点のあとに<br>タグを入れました。横幅が狭くなったときに、やっぱり変な位置で改行されています。

See the Pen 改行問題（brタグを入れると…） by Takumichi Nakashima (@dcp) on CodePen.dark

解決法はdisplay: inline-block

では、PCでもスマホでも変な位置で改行されないためにどうすればいいのかというと、答えは簡単。途中で改行されたくないかたまりをdisplay: inline-blockで囲んでしまえばいいわけです。

こんな風に、どんな横幅でも自然な位置で改行できるようになりました。（ただ、厳密にスマホ対応するには、もう少しフォントサイズを調整しないとダメかも）

See the Pen 改行問題の解決法 by Takumichi Nakashima (@dcp) on CodePen.dark

具体的な記述方法は、上記のCodePenのHTMLとCSSのコードをご覧ください。

参考リンク

Budou – 機械学習を用いた日本語改行問題へのソリューション

2.正しい日本語フォントの指定

海外のテンプレートを使うときは、日本語フォントを指定し直さないと表示がおかしくなる可能性が高いです。では、CSSでフォントをどう指定するべきなのでしょうか？

数年前であれば、Windows用にメイリオ、Mac用にヒラギノ角ゴを指定しておけばOKという感じだった記憶があります。が、最近はそれだけだと不十分かもしれません。

例えば、Windows8.1以降またはMacOS10.9以降では遊ゴシックが使えるようになっています。ただ、フォントに遊ゴシックを指定すればWindowsでもMacでも同じように表示されるわけではありません。Windowsの方が細いウェイトで表示されてしまいます。（個人的にこの問題にハマった経験あり）

その他にも、Androidはどうするかとか、ヒラギノ各ゴのウェイトが増えてるんだけどとか、英文のフォントはどうするかとか…どんなOS、デバイスでも最適なフォント表示をするためには結構面倒になります。

そんな状況ですが、モダン日本語フォント指定のスライドで紹介されているやり方が、現状で一番良さそうです。

 

詳しくは上記のスライドを見てもらうとして、結論の部分を転載させていただくと…

See the Pen 日本語フォントの指定 by Takumichi Nakashima (@dcp) on CodePen.dark

という形になります。

• Mac・iOSだと、英文がSan Francisco、日本語がヒラギノ角ゴ
• Windowsだと、遊ゴシック（古いバージョンではメイリオ）

で表示されます。

また、上記のスライド内には遊ゴシックを優先して表示するやり方も紹介されています。

3. 自動カーニング（字詰め）

カーニングもCSSで指定するだけで自動的にできるようになっています。やや好みが別れる部分かもしれませんが、見出しをきっちりカーニングしておくと見栄えが良くなります。

やり方としては、font-feature-settingsプロパティを指定するだけ。OpenTypeフォントの間隔に関する情報を使って、自動的にカーニングが行われます。

See the Pen 日本語フォントの自動カーニング by Takumichi Nakashima (@dcp) on CodePen.dark

縦線を基準に見てもらうと、カーニングされているのが分かります。

paltだと全部の文字が対象になりますが、記号や句読点も詰まるので、キツキツな印象になってしまいます。個人的にはpknaでかなだけを詰めたほうが良いかなと思いました。

参考リンク

文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング