CSSの文字設定

CSSの文字設定

 CSSで設定できる文字設定は2つです。1つは文字コードの設定。もう1つは文字フォントの設定です。HTMLで設定できる文字設定は別ページでまとめていますので、各々どのような違いがあるか見比べて下さい。




文字コード設定

 文字コードとは文字集合と文字符号化方式を定めた文字の対応表のようなものです。詳しくはこちらでまとめています。この文字コードとそれに対応したフォントを利用することで画面上に文字が表示されます。
 日本語を利用する場合、選択肢として
 ・UTF-8
 ・S-JIS
 ・EUC-JP
 の3つがあります。日本だけをターゲットとしたサイトではどれでも良いのですが、海外からのアクセスも期待するのであれば、UTF-8にしておくのが一般的です。
 これ以外に英語のみ、つまりアルファベットのみのグローバルサイトの場合を作成する場合は
 ・iso-8859-1
 を使います。(別名Latin-1とも呼ばれます。)
 CSSページの先頭行に書くようにして下さい。
 あわせて、作成するCSSページ自体を設定した文字コードで保存しないと文字化けの原因になりますので気を付けて下さい。iso-8859-1を指定した場合はLatin-1又はANSIで保存するようにして下さい。

文字コード設定の使用例

CSS

@charset "UTF-8";

@charset "Shift_JIS";

@charset "euc-jp";

@charset "iso-8859-1";




フォント設定

 font-familyプロパティでフォントを指定します。


font-familyプロパティの使用例

CSS

一般的な書き方

body {
font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','游ゴシック',YuGothic,'MS Pゴシック','MS PGothic','Osaka',sans-serif;
}

 font-familyプロパティに記述された一番左のフォントから順に参照され、もし該当のフォントが閲覧者の端末にインストールされていればそのフォントが表示されます。インストールされていない場合、次のフォントを参照します。一番最後のsans-serifは装飾なしのゴシック体フォントを意味します。総称フォントと呼ばれるフォントで、全く表示されない状況を防ぐため記述します。


英数字フォントを別のフォントにしたい場合の書き方

body {
font-family: 'Times New Roman','Helvetica','Arial','メイリオ',Meiryo,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','游ゴシック',YuGothic,'MS Pゴシック','MS PGothic','Osaka',sans-serif;
}

 英数字については日本語フォントを利用したくない場合の書き方です。英語、日本語混在のサイトで良く利用される手法です。日本語の場合Times New Roman、Helvetica、Arialいずれにもフォントがないので、メイリオで表示されるという流れです。


 ウェブフォントについては別ページにまとめています。




 Copyright IT SKILL MAP. All rights reserved.