フォントの変更

フォントの変更方法について説明したページです。フォントの種類、CSSを利用したフォント種類の指定、サイズ・色の変更、太字の設定方法等について説明しています。

フォントの種類

 Windowsで使えるフォントの種類の例として以下があります。

・Meiryo UI
フォントの変更1
・メイリオ
フォントの変更2
・MS Pゴシック
フォントの変更3

 Meiryo UIはWindows7以降に標準搭載されているフォントで、メオリオはVista以降、MS Pゴシックはそれ以前のWindowsで標準搭載されているフォントです。フォントが別途インストールされている場合もあってVistaでMeiryo UIが使える場合もあります。

 上は全て同じフォントサイズで表示していますが、メイリオが横長なのが分かると思います。

 又、Macには少し前から標準搭載されているヒラギノ角ゴ Pro W3、かなり以前のOSで標準搭載されているOsaka等があります。どちらもメイリオ位の幅があると考えて下さい。

フォントの種類の設定

 フォントの種類は指定しなくてもブラウザの標準フォントが使われます。但し、WindowsではMS Pゴシックが標準の場合が多いため、見栄えを考えてフォントの種類を指定した方がよいと思います。

 フォントの種類の設定はスタイルシートで例えば以下のようにします。

font-family: "Meiryo UI","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","Osaka",sans-serif;

 ご紹介した全てのフォントを指定していますが、左から順番に見ていき、サポートしているフォントがあればそれが表示されます。つまり、Windows8や7ではMeiryo UI、Windows Vistaではメイリオといった具合で表示されます。

 最後のsans-serifはブラウザでサポートしているゴシック体のどれかのフォントを使うという意味です。記述しているフォントがない場合は、ブラウザの標準フォントが使われます。

 このように複数指定する事でより綺麗なフォントを表示しつつ多くの環境に対応可能ですが、各フォントで大きさが異なるため、ホームページを作る場合は大きく見栄えが崩れないように配慮が必要です。出来るだけ多くのフォントで表示して試してみる必要がありますが、全てのフォントで試すのは難しいと思います。このため、ボックスの中にテキストを書く際に自分が見ているサイズより大きい場合があるかもしれない事を考慮して、幅を指定する等して大きく崩れないよう考慮します。

 以下は左サイドバーがある簡単なhtmlをフォントをMeiryo UIにして表示した時の例です。

フォントの変更4

 同じhtmlでメイリオで表示したのが以下です。

フォントの変更5

 左サイドバーが下に来て大きく見栄えが崩れています。これは文章を書く所と左サイドバーを合わせた全体で170pxと幅を指定しており、Meiryo UIでは幅に収まりますが、メイリオでは収まらないため崩れています。

 各ボックスで幅を指定すると以下のように表示されます。

フォントの変更6

 左サイドバーが2行になっていますが、下になるような大きな崩れはありません。

 フォントの種類は各ボックス、各文字等で個別に指定出来ますが、趣味のサイト等では細かく変える必要があまりないと思われる為、body {}の中に記述して統一し、変える必要がある場合だけ個別に指定する事をお奨めします。

 スタイルシートで記述する場合の例としては以下になります。

【フォント種類をbodyで設定する例】
body {
font-family: "Meiryo UI","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","Osaka",sans-serif;
}

フォントサイズの変更

 フォントのデフォルトサイズはOSやブラウザ等の環境によって異なります。又、文字を大きくしている人もいれば小さくしている人もいます。このため、少しだけホームページに合った大きさに変える事はしても大きくは変えない方がいいと思います。

 表や項目を羅列する場合等は多少小さくても見えやすく、逆に大きいと見にくい時もあります。このような時は指定してもいいと思います。

 フォントサイズの指定はスタイルシートで以下のようにします。

font-size: xx%;

 xx部分は今のサイズに対する比率を数字で記述します。例えば、今の大きさに対して90%の大きさにしたい場合、font-size: 90%;と指定します。

 今の大きさに対してという所には大きな意味があります。例えばbody {font-size: 90%;}と指定して途中の独自定義で#center {font-size: 90%;}と指定するとcenterの中ではデフォルトの81%指定になります。

 又、h1タグ等は最初から大きなサイズになっているため、そのサイズの90%指定になります。

 最初にbody{}の中で指定しておき、変えたい部分だけ定義する事をお奨めします。

 スタイルシートでフォントの種類と大きさを同時に設定する場合の例は以下になります。

【フォント種類とサイズをbodyで設定する例】
body {
font-family: "Meiryo UI","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","Osaka",sans-serif;
font-size: 90%;
}

フォントの色の変更

 フォントの色はデフォルトでは黒で表示されます。背景を黒にしていた場合等は変更が必要です。フォントの色の指定はスタイルシートで以下のようにします。

color: rgb(xxx,xxx,xxx);

 背景が黒でフォントの色を白にしたい場合はxxx部分は全て255にします。

 その他の色を選択したい場合、例えばエクセル等で文字を記述してフォントの色を選択する画面で表示したい色を選択、その後フォントの色を選択する画面で「その他の色」をクリックすると「色の設定」画面になります。そこで「ユーザー設定」タブをクリックするとRGBが表示されます。

フォントの変更4

 スタイルシートにこの数字をそのまま記述する事でExcelで表示したフォントの色を反映させる事が出来ます。上の例ではcolor: rgb(0,176,240);になります。

 又、color:red;やcolor:blue;等英語で指定する事も出来ます。すぐ分かる色であればこちらの方が簡単です。

 フォントの色もやはり最初にbody{}の中で指定して統一させ、変えたい部分だけ個別に定義する事をお奨めします。

 以下はスタイルシートでフォントの種類、サイズ、色を同時に指定する場合の例です。

【フォント種類とサイズ、色をbodyで設定する例】
body {
font-family: "Meiryo UI","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","Osaka",sans-serif;
font-size: 90%;
color: rgb(0,176,240);
}

太字

 文字を太字にする場合はスタイルシートで以下のようにします。

font-weight: bold;

 太字にした場合は以下のように表示されます。

 あいうえお、アイウエオ、AIUEO

 太字は通常はbodyで指定せずにクラスで指定、又は強調されるタグ等で指定したりします。

 以下はスタイルシートでクラス指定する場合の例です。

【太字指定】
.futoji { font-weight: bold; }

 htmlではクラスを指定する事で太字で表示されます。

【太字を利用する場合のhtml例】
<p class="futoji">太字になります</p>
  • このエントリーをはてなブックマークに追加