[テキスト]日本語Webフォントを使用してテキストを掲載した際に、ブラウザによってはシャギー(文字のギザギザ)が目立ってしまうことがあります。そのようなシャギーを防ぐには、CSSでほんの少しだけ文字を傾ける方法が有効です。ほんの少しの角度なら見た目には傾きは全く分かりません。フォントのシャギーは取れるため、文字は読みやすく綺麗に表示できます。画像そのものが微妙にぼやけてしまうシャギーの有無を見るためのサンプルHTML+CSSソース常にシャギーが目立つわけではないWindows環境で日本語Webフォントを使って小さな文字を表示するとシャギーが目立つことがあるWindows環境で日本語Webフォントを使用した際には、ブラウザによっては下図左側のようにシャギー(文字のギザギザ)が目立ってしまうことがあります。見栄えを気にしてWebフォントを適用しているというのに、このようにシャギーが目立ってしまうと、わざわざフォントを読み込ませた意味が薄れてしまうでしょう。このようなシャギーを防ぐには、CSSを使ってほんの少しだけ文字を傾ける方法が有効です。傾けるといってもほんの少しの角度なので、見た目に傾きは全く分かりません。その装飾の効果(副作用)によってフォントのシャギーは取れるため、文字は読みやすく綺麗に表示できます。シャギーを防ぐ簡単なCSSは1行で済むWebフォントを指定するには、(そのWebフォントを読み込むためのCSSを読み込んだ上で)下記のようにfont-familyプロパティを使ってフォント名を指定します。その際、下記の3行目に記述してあるようにtransformプロパティを使って値にrotateを指定すると、シャギー(文字のギザギザ)が見えてしまう問題を防げます。*/}CSSのtransformプロパティは、対象の要素を様々に変形させられるプロパティです。そこに値としてrotateを指定すると対象要素を任意の角度で傾けられます。0.03度の傾きなら、まず見た目には分からない0.03度のような極小の角度なら、人の目にはまず傾いていることは分かりません(下図で確認してみて下さい)。事実上は何の変化もないでしょう。この記述があることによってフォントの描画方法が変わり、文字にシャギーが目立つのを防ぐことができます。先程もご紹介しましたが、下図の1枚目(広い画面で見ていれば左側)はWebフォントだけを指定した表示例です。シャギーが目立ちます。rotate(0.03deg);」のCSSを加えて0.03度だけ傾けた表示例です。傾いていることはまず分からないでしょう。シャギーは消えて綺麗に見えています。※上図は、Windows10版Vivaldiでの表示をキャプチャした画像です。シャギーが取れる角度(小さくし過ぎないよう注意)私が試した限りでは、0.03度よりも小さい角度を指定すると、シャギーは消えませんでした。先のCSSソースでは角度に0.03度を指定しています。したら、ブラウザによってはもっと大きな角度を指定しないとシャギーが消えてくれない場合もあるかもしれません。0.05度でも、0.07度でも充分小さいので、人の目には傾いていることはまず分かりません。心配なら、もう少し大きな角度を指定しても良いでしょう。このように、人の目には分からないくらいの微妙な角度で傾けるだけでシャギーの発生が防げるので便利です。人の目には分からないくらいの微妙な角度で傾けるだけのCSSなので、「body要素に対してtransformプロパティを適用してしまえば楽で良いのでは」と思うかもしれません。そのような「ページ全体を傾ける」ように装飾してしまうと少々マズい場合があります。常にマズい場合ではないのですが。それは、主に下記の2点の理由です。横スクロールバーが出てしまう人の目には分からないくらいの傾きだとはいえ、傾くことは事実です。画面の横幅いっぱいに広がっているボックスに対して傾きを適用してしまうと、ほんの少しだけ画面サイズからはみ出してしまうために、横スクロールバーが出てしまいます。すると、「何が原因なのかがぱっと見た感じでは分からないが、何故か横スクロールバーが見えている」という、少々望ましくない表示になってしまいます。※ページの周囲に余白がある状態(marginに充分な幅がある場合)なら、中身を一律に傾けても横スクロールバーは出ないので、「常に横スクロールバーが見えてしまう」というわけではないのですが。レイアウトを調整した後に横スクロールバーが現れてしまう可能性もあり、そうなった場合には原因の特定が面倒になりそうですから、最初から(ページ全体を傾けるのは)避けておく方が無難なように思います。画像そのものが微妙にぼやけてしまう傾ける範囲内(transformプロパティが適用される範囲内)に画像があると、その画像も微妙に傾くことになるため、画像そのものが若干ボケた具合に表示されることがあります。これは、画像をほんの少しだけ傾けるようレンダリング(描画)されることが原因です。(この辺の処理はブラウザ次第なので、もしかしたら問題ないブラウザもあるかもしれませんが。)いくら文字のシャギーが取れても、画像がボケてしまうと困るでしょう。上記の2点の問題があるため、「marginがゼロに設定されたbody要素」や、そのような状況で「画面の横幅全体に広がるよう設計されたdiv要素などのブロック」に対しては、transformプロパティを適用するのは避けておきましょう。微妙に傾けるのは、必要最小限の範囲に限っておく方が無難です。シャギーの有無を見るためのサンプルHTML+CSSソース本記事でご紹介したシャギー発生の有無を見るために記述したサンプルHTML+CSSソースも参考までにご紹介しておきます。HTMLソースは以下のように記述しました。>Windows環境で日本語Webフォントを使用した際、ブラウザによってはシャギー(文字のギザギザ)が目立ってしまうことがあります。そのようなシャギーを防ぐには、CSSでほんの少しだけ文字を傾ける方法が有効です。ほんの少しの角度なら見た目には傾きは分かりません。フォントのシャギーは取れるため、読みやすい表示にできます。noshaggy">Windows環境で日本語Webフォントを使用した際、ブラウザによってはシャギー(文字のギザギザ)が目立ってしまうことがあります。そのようなシャギーを防ぐには、CSSでほんの少しだけ文字を傾ける方法が有効です。ほんの少しの角度なら見た目には傾きは分かりません。フォントのシャギーは取れるため、読みやすい表示にできます。</p></div>まず、最も外側にWebフォントを適用するdiv要素を設けています。内側のp要素2つは、transformプロパティを適用する段落と適用しない段落のために、同じ文章を並べて記述しています。Fontsサイトから読み込むように別途記述しています。下記のように書きます。(Webフォントを読み込むための記述については、適用したいWebフォントやそれを提供してくれるWebフォントサービスの解説をご参照下さい。rel="stylesheet">次に、CSSソースは以下のように記述しました。適用されると、シャギーが目立ってしまう可能性があります。適用すると、シャギーが出ずに済みます。表示用の枠を作っているだけです。記述は必須ではありません。常にシャギーが目立つわけではないWindows環境で日本語Webフォントを使う場合でも、フォントの種類によってはシャギーが発生しないこともあります。シャギーが目立つフォントでも、太字で表示したり、文字サイズを大きくしたりすれば、シャギーは出なくなることもあります。フォントの表示はブラウザ側の処理の問題ですから、将来的にはこのような(本来の用途とは異なる)テクニックを使わなくても綺麗に表示できるようになるでしょう。現在の(主にWindows)環境をターゲットにした一時的な対策です。コーヒーをおごる著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。Aboutでウェブ作成系の記事を連載しています。2001年からの累計記事数は400本を超えています。下記の電子書籍を書きました。Unlimitedにも対応。(紙の本)5冊の著書があります。➡著書一覧と詳細これまでに、下記の書籍を上梓致しました。逃走少女と契約しました。製作依頼について●製作のご依頼は:例えばデザイナーである貴方が作成なさったデザイン物のHTML+CSSでの実装作業など、各種の製作依頼を承っております。お気軽にお問い合わせ下さい。▲同じデザインでもCSSの書き方には多数の方法があります。どんな書き方を選択すればメンテナンス性の高いCSSソースになるのかがよく分かってお勧めです。▲PCだけでなく様々なサイズのモバイル端末に対応させるためのCSSの書き方などについて、カラーで見やすく解説されていて分かりやすいです。▲ユーザビリティとは何なのかを分かりやすく解説した本。読み物としても面白いです。■だから、そのデザインはダメなんだ。良い・悪いが比べてわかる▲何が原因で分かりにくくなってしまうのかを列挙したサンプル集。「こういうデザインだけは避けておこう」というマイナス回避の手段としても。知らないと困るWebデザインの新ルール4▲最近よく使われている様々なデザインパーツについて、それぞれの実現方法としてHTML+CSSソースの書き方を紹介しているTips集。カラーで見やすいです。掌田津耶乃さんによるBootstrap解説書。現場の新標準ガイド(マイナビ出版/368ページ)CSS(スタイルシート)に関する解説書は、HTMLを書く知識がどれくらいあるのかの前提が様々なので、自分に合う解説なのかどうかをプレビューなどで確認したり、目次から大まかな内容はチェックしておいた方が良いと思います。»スタイルシートTipsふぁくとりーの主要なカテゴリ下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。(7)著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。▼当サイト内外で関連しそうな記事などが自動表示されています。INFORMATIONSこのページの製作者は、にしし(西村文宏)です。このページの内容は真実であることが基本ですが、虚構や妄想が混じっていることも多々あります。(^_^;)リンクは歓迎致します。リンク用バナーも用意しています。必要であればご使用下さい。このサイトについてこのページは、スマートフォン・タブレット等のモバイル端末でもご覧頂けます。URLは端末に関係なく共通です。※このサイトは横幅768px未満で閲覧するとモバイル用、横幅768px以上で閲覧するとタブレット&PC用デザインになります。横幅920px以上での閲覧がお勧めです。古いブラウザ(特にIE7以下など)では横幅に関係なくレガシーデザインになります。