はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
デザイン通りに組む！ ～フォントの形の設定について～
2008/08/04
- トモ・リーン
- ケンジ
- 今度は文字の形だね！
- トモ・リーン
- 文字の形の指定方法は
適用させたい要素 { font-family:'フォント名',フォントの系統 ; }
って書けばいいんだけど・・・。
- ケンジ
- う〜〜ん「フォント名」と「フォントの系統」って似たような単語が並んでるのが気持ち悪いね！
- トモ・リーン
- よく気づいたわね！
そうなのよ・・・。
- ケンジ
- フッ。
俺の勘はダテじゃないぜ！
- トモ・リーン
- まずはフォントの名前から解説するわね。
「ＭＳ Ｐゴシック」とか「ヒラギノ角ゴ Pro W3」ずばりフォント名そのものね。
これは「"」（ダブルクォーテーション）や「'」（シングルクォーテーション）で囲むのよ。
- ケンジ
- ふむふむ。
これって、見る人が持ってるフォントを指定しないと表示されないよね？
- トモ・リーン
- いえっす〜。
だからOSに基本的に入っているフォントを指定した方がいいわよ。
各OSにデフォルトで入っているフォント ※（）内は英字表記
- Windows XP
- ＭＳ Ｐゴシック、ＭＳ ゴシック、ＭＳ Ｐ明朝、ＭＳ 明朝
- Windows Vista
- メイリオ（Meiryo）
- Vistaじゃない人はここからフォントをダウンロードできます！
※正規のWindowsじゃないと落とせません。 - Mac OS X
- ヒラギノ角ゴ Pro（Hiragino Kaku Gothic Pro）、ヒラギノ明朝 Pro（Hiragino Mincho Pro）、ヒラギノ丸ゴ Pro（Hiragino Maru Gothic Pro）、Osaka－等幅
- ※Mac向けフォントは英字の方で書いた方がいいです。safariが反応しないので・・・。
- トモ・リーン
- で、「フォントの系統」は「オタクのマシンの中のフォントの＊＊な系統のフォント使いますよ」的な指定方法ね。
指定できるフォントの種類は次の通りよ。
| 指定できる値 | 文字の系統 | 実際に適用してみました |
|---|---|---|
| sans-serif | ゴシック体 | OS・マシンによってfontは変わります。気をつけて！ |
| serif | 明朝体 | OS・マシンによってfontは変わります。気をつけて！ |
| cursive | 筆記体 | OS・マシンによってfontは変わります。気をつけて！ |
| fantasy | 装飾系 | OS・マシンによってfontは変わります。気をつけて！ |
| monospace | 等幅系 | OS・マシンによってfontは変わります。気をつけて！ |
- ケンジ
- う〜む。
日本語圏のマシンに使えそうなのはゴシック体（sans-serif）、明朝体（serif）、ところにより等幅（monospace）ぐらいだよね。
- トモ・リーン
- そうね。
- トモ・リーン
- あと、フォントは「,」（カンマ）区切りで複数書く事が出来るわよ。
そしてフォント名を書く順番で、使用するフォントの優先順位が決めれるわ。
- ケンジ
- へ〜！
- トモ・リーン
- はじめに書いたフォントから最後に書いたフォントの順番で設定が優先されます。
で、はじめの方に書いておいたフォントが無い場合は、次に書いておいたフォントが使用されるわ。
- フォント指定の優先順位
- ケンジ
- ってことは、こういう事だね！
- フォント指定の優先順位を利用したオススメ設定
- 具体的なフォント指定を入れてみた場合
- ケンジ
- うわ・・・。
こ〜やって書くと何だか露骨だなぁ・・・。
- トモ・リーン
- うふうふ・・・。やるわね！
もう文字設定はバッチリね。
万が一保険の設定は外国語圏の人が翻訳サイト経由で来た時や、サイト制作後に新しいOSが出た場合にも対応できるからオススメよ。
- ケンジ
- ここまでやってて何だけど、恥ずかしながら俺font-familyの設定したこと無かったぜ・・・。
- トモ・リーン
- 実は、font-familyの設定はしなくてもいい、っていう考え方もあるのよ。
閲覧者がブラウザで設定しているフォントが反映されない状態になるから、ありがた迷惑ってことね。
色々な考え方があるわ。
- 今回のポイント！
- フォント設定は意外とめんどくさいので気をつけよう！
（まとめになってないですね！！）
- トラックバック(0)
- このブログ記事を参照しているブログ一覧：デザイン通りに組む！ ～フォントの形の設定について～
- このブログ記事に対するトラックバックURL
- http://www.rasen-d.net/z/mt/mt-tb.cgi/93
- コメントする
- やさしいCSSはじめます。
- 下準備：テキストエディタ！
- 下準備：ブラウザチェック
- 基礎知識：DOCTYPE宣言
- 基礎知識：CSSのスタイルに付ける名前
- 基礎知識：idとclassの使い分け
- 基礎知識：CSSはどこに書く？
- 基礎知識：セレクタの付け方
- 実技：セレクタの付け方
- CSS組みの時の作業の流れ
- 情報の意味を考えながらHTMLコーディング
- レイアウトを組んでみる！ ～idについて～
- レイアウトを組んでみる！ ～floatについて～
- デザイン通りに組む！ ～文字サイズ～
- デザイン通りに組む！ ～文字サイズ 応用～
- デザイン通りに組む！ ～フォントの形の設定について～
- デザイン通りに組む！ ～背景画像～
- デザイン通りに組む！ ～画像置換～
- デザイン通りに組む！ ～ボタン～
- 基礎知識：インライン要素とブロック要素
- デザイン通りに組む！ ～ボタン2：ロールオーバ～
- デザイン通りに組む！ ～背景応用：見出しとか～
- デザイン通りに組む！ ～汎用性のある設計＋clearfix～
- デザイン通りに組む！ ～配置指定～
- デザイン通りに組む！ ～透過PNG～
- CSSファイルを見やすく整頓！！
- Firefoxの便利な機能拡張：Web Developer
- Firefoxの便利な機能拡張：Firebug
- Firefoxの便利な機能拡張：Page Saver Basic
- Firefoxの便利な機能拡張：「ScrapBook」「IE Tab」
- 印刷用CSS：メディア指定
- 印刷用CSS：ブラウザ別見え方の違いと特徴 背景画像
- 印刷用CSS：webページの横幅について
- 印刷用CSS：色々な印刷CSSの手法について
- 印刷用CSS：ナビゲーション削除タイプ
- 印刷用CSS：印刷用に全く違うレイアウトを作る
- 印刷用CSS：スクリーンと全く同じように印刷する
- 印刷用CSS：その他もろもろテク紹介
- CSSハックとIEの条件分岐
- とりあえず、ネタ切れなので
- オススメ本
- HTMLタグ+スタイルシート辞典ちび
基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！
- 現場のプロから学ぶXHTML+CSS
実際のXHTML+CSSの作業について学びたい方にオススメ！
- オススメCSSのサイト
- TAG index
ものすごく使いやすいHTML & CSSのリファレンスサイト
- CSSフリーライブラリー
色々なテーマごとにCSSの情報が集まっています！
- オススメ勉強会
- CSS Nite
お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。
- Re:Creator’s Kansai（リクリ）
関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。
- 螺旋デザインメンバーも執筆に参加！
XHTML+CSS プロが教える“本当の使い方”現場で培われたXHTML+CSSのテクニックを徹底解説!!
- 話題のiPhoneアプリ
大藤幹のHYML/XHTML辞典HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪
-
myPANTONE色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！
