最近覚えた、テキスト周りのCSS記述法をまとめておきます。日本語特有の問題として、改行位置が気になることがあります。文章の途中の予期しない位置で改行されてしまうわけです。本文であれば仕方ないのですが、見出しが変な場所で改行されると一気にダサくなります。以下のように、横幅によって改行位置が変わります。CodePen.dark一方、英文の場合は...英語の文章の場合は単語と単語の境目で改行されるので、それほど変なことにはならないはずです。CodePen.dark<br>タグで改行すると...だったら、改行したい位置に<br>タグを挿入してしまえばいいと思われるかもしれません。それだとPCのディスプレイで見たときは良くても、スマホで見たときは残念なことになります。以下の例では、1文目の句点のあとに<br>タグを入れました。横幅が狭くなったときに、やっぱり変な位置で改行されています。inline-blockでは、PCでもスマホでも変な位置で改行されないためにどうすればいいのかというと、答えは簡単。inline-blockで囲んでしまえばいいわけです。こんな風に、どんな横幅でも自然な位置で改行できるようになりました。CodePen.dark具体的な記述方法は、上記のCodePenのHTMLとCSSのコードをご覧ください。海外のテンプレートを使うときは、日本語フォントを指定し直さないと表示がおかしくなる可能性が高いです。CSSでフォントをどう指定するべきなのでしょうか?数年前であれば、Windows用にメイリオ、Mac用にヒラギノ角ゴを指定しておけばOKという感じだった記憶があります。最近はそれだけだと不十分かもしれません。Windows8.1以降またはMacOS10.9以降では遊ゴシックが使えるようになっています。フォントに遊ゴシックを指定すればWindowsでもMacでも同じように表示されるわけではありません。Windowsの方が細いウェイトで表示されてしまいます。(個人的にこの問題にハマった経験あり)その他にも、Androidはどうするかとか、ヒラギノ各ゴのウェイトが増えてるんだけどとか、英文のフォントはどうするかとか...どんなOS、デバイスでも最適なフォント表示をするためには結構面倒になります。そんな状況ですが、モダン日本語フォント指定のスライドで紹介されているやり方が、現状で一番良さそうです。CodePen.darkという形になります。Francisco、日本語がヒラギノ角ゴWindowsだと、遊ゴシック(古いバージョンではメイリオ)で表示されます。上記のスライド内には遊ゴシックを優先して表示するやり方も紹介されています。自動カーニング(字詰め)カーニングもCSSで指定するだけで自動的にできるようになっています。好みが別れる部分かもしれませんが、見出しをきっちりカーニングしておくと見栄えが良くなります。やり方としては、font-feature-settingsプロパティを指定するだけ。OpenTypeフォントの間隔に関する情報を使って、自動的にカーニングが行われます。CodePen.dark縦線を基準に見てもらうと、カーニングされているのが分かります。paltだと全部の文字が対象になりますが、記号や句読点も詰まるので、キツキツな印象になってしまいます。個人的にはpknaでかなだけを詰めたほうが良いかなと思いました。コンテンツ販売やマーケティングのためのツールを開発しています。この記事が気に入ったらいいね!をクリックFacebookページで情報を発信しています。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。