CSSでの文字指定について - ホームページ・Web制作 - 専門家プロファイル

専門家の皆様へ 専門家プロファイルでは、さまざまなジャンルの専門家を募集しています。
出展をご検討の方はお気軽にご請求ください。

CSSでの文字指定について

法人・ビジネス ホームページ・Web制作 2013/04/10 09:24

お世話になります。独学でホームページを制作しています。いつも頭を悩ませている事柄があり、質問させて頂きます。

ホームページで表示させるfont-familyについてなのですが、ブラウザによって見え方が変わって来ると思います。Macだと綺麗に見える文字も、IEだとギザギザのような文字で表示され格好が悪くなってしまいます。これを回避するために、ある程度の指定をCSSで設定したいと思うのですが、どのようにすればよいのでしょうか?

例えば、アップルのホームページでは文字が綺麗に表示されています。
http://www.apple.com/jp/

優しい文字で、とても読みやすいです。
ご回答の程、宜しくお願い致します。

tcnさん ( 北海道 / 女性 / 34歳 )

回答:2件

井上 みやび子

井上 みやび子
Webエンジニア

- good

色々なOSで見えるように、複数の font-family を指定します

2013/04/10 10:27 詳細リンク
(5.0)

こんにちは。Webアプリケーション開発などを行っています、すぐ使える株式会社 の井上と申します。

Webサイトが表示される時はそれぞれの訪問者の方のOSにあるフォントを使って文字が表示されますので、制作の時はfont-family にいくつかのフォントの候補を列挙しておくとよいですよ。

「最適」な設定はOSの進化に伴い変わるのですが(例えば、昔は Mac では Osaka が基本でしたが、今はヒラノギ系のものが入っていますね)、例えば現在このサイトだと、下記のように設定されています。

font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"MS Pゴシック","MS PGothic",Sans-Serif;

ブラウザはこの順番に使えるフォントが無いかを探し、もし何も無ければ、最後に指定されている「Sans-Serif」を採用します。「Sans-Serif」は「ゴシック体のフォント」という意味で、OSにインストールされているフォントの中でゴシック体のものを何か選んで表示してくれます。

ちなみに、明朝体にしたい場合はここは「Serif」です。

フォント指定の時の注意点は、以下の2点です。

- スペースを含むフォント名の時は「"」でくくる。(全角スペースについても同様。)
- ブラウザによって日本語フォントでも英文名称しか受け付けない場合があるので、両方を列挙する。

フォントの名称を何と指定すればよいのかはそれぞれのテスト環境でも無いと分かりにくいですが、「font-family の設定例」などで検索すれば、色々な例が出てきますので探してみて下さい。

ブラウザ
制作
文字

評価・お礼

tcnさん

2013/04/10 10:33

早々のご回答ありがとうございます。ずっとつかえていた部分だったので、勉強になりました。ありがとうございました。

質問やお悩みは解決しましたか?解決していなければ...

※あなたの疑問に専門家が回答します。質問の投稿と閲覧は全て無料です。
芹川 隆

芹川 隆
パソコン講師

- good

font-familyについて

2013/04/11 09:35 詳細リンク
(5.0)

tcnさん、はじめまして。
千葉のGadgetShopの芹川と申します。

頂いたご質問についてですが、CSSでのfont-familyの指定は本当頭を悩ませますよね。
AppleのサイトのCSSの指定の一部ですが、下記の通り指定しております。

"Lucida Grande", "Lucida Sans Unicode", "Hiragino Kaku Gothic Pro",… Meiryo,,Helvetica, Arial, Verdana, sans-serif;
(一部文字化けなどがあり正式に全てを並べた訳ではありません。ご了承ください。)

まず、下記の3点をおさえておきましょう!

1.優先順位
font-familyは左に書いたものから優先的に適用され、パソコンで利用しているフォントの条件に合致したものを適用します。パソコンに別のフォントをインストールすればそれも適用対象になります。WindowsやMacなどのOSによって表示できるフォント、あるいはブラウザによって読み込み動作が異なるので、それらに対応できるよう、複数のフォントファミリー名を記述します。今回のApple社のページもかなりの指定をしています。

2.「sans-serif」や「serif」を最後に指定
これは、ユーザのパソコンに最低限のフォントファミリーを提供するためのものです。必ず指定しておきましょう。

3.設定でよく使われている和文フォントを指定
Windows 7/Windows Vista:メイリオ
WindowsXP:MS Pゴシック
Mac:ヒラギノ角ゴ Pro W3


Windows 7/Windows Vistaの「メイリオ」と、Macの「ヒラギノ角ゴ Pro W3」は、きれいに表示されます。

WindowsやMacのようにOSの異なるユーザに対して同様の見せ方をしたいときには、「Web-font」を使うのもオススメです!
http://blog.petitboys.com/archives/webfont-services-japan.html

自分の納得するフォントで表示されるか色々font-familyの指定やWeb-fontなど試してみてください。

ブラウザ
Windows
Mac
HTML
CSS

評価・お礼

tcnさん

2013/04/11 11:41

GadgetShop 芹川様、ご丁寧な回答ありがとうございます!きちんとした専門家の先生に教えて頂くと納得です。いつもMacで表示されるようなフォントで全てのブラウザを統一したいと思いますので、早速取りかかってみます。

(現在のポイント:-pt このQ&Aは、役に立った!

このQ&Aに類似したQ&A

動的出力を考慮に入れたHTML・CSSの作成について かなりもりだくさん  2009-05-21 18:21 回答6件
グーグル検索結果での問題点について matumatukodomoさん  2011-08-06 03:23 回答4件
webサイト制作/ピンインの表示が文字化けします… raoraoさん  2010-07-29 15:08 回答2件
専門家に質問する

タイトル必須

(全角30文字)

質問内容必須

(全角1000文字)

カテゴリ必須

ご注意ください

[1]この内容はサイト上に公開されます。

  • ご質問の内容は、回答がついた時点でサイト上に公開されます。
  • 個人や企業を特定できる情報や、他人の権利を侵害するような情報は記載しないでください。

[2]質問には回答がつかないことがあります。

  • 質問の内容や専門家の状況により、回答に時間がかかる場合があります。
気になるキーワードを入力して、必要な情報を検索してください。

表示中のコンテンツに関連する専門家サービスランキング

メール相談

ホームページSEO診断

ホームペーイjの内部SEOに特化したサービス

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

アメブロデザインテンプレートカスタマイズ承ります。

アメブロを個性豊かなデザインにしませんか?

小菅 太郎

アイナパル

小菅 太郎

(ITコンサルタント)

メール相談

ホームページ(SEO対策)診断

貴社ホームページのSEO対策を診断します

中沢 伸之

ストークデザイン

中沢 伸之

(Webプロデューサー)

その他サービス 格安ホームページ制作
中沢 伸之
(Webプロデューサー)