【CSS】2015年現在のフォント指定の方法！

　サイトを制作する上で大事になってくるのが“フォント”になります。すなわち文字ですね。サイト内の文章をいかに見やすい文字で表示させるか？が重要になってきます。ちなみにフォントを指定する方法としてはfont-familyがあります。
　なおWindowsでいえば、ニュースサイトのような情報系だったらゴシック体だとか、和風な感じを出したいサイトだったら明朝体だとか、キレイめな文字で表示させたかったらメイリオだとか。フォント指定といってもいくつかあるということをまず知識として覚えておくとよいかと思います！

　そして、PCのOSはWindowsだけではありません。MacのPCを普段から使っている方がサイトを見た時にも、ストレスなく見れるよう配慮することもサイトを制作する上ではとても大事なことになります。

　そこで今回は2015年現在のフォント指定の代表的なものを紹介したいと思います！

ゴシック書体

　まず、ゴシック書体の指定方法を紹介したいと思います。ゴシック体の文字見本は以下になります。

このような文字を指定したい場合は以下のようにfont-familyを指定してあげます。

font-family: Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3″, “Hiragino Kaku Gothic ProN”, sans-serif;

明朝書体

　続いて明朝書体の指定方法を紹介します。先ほども書いたように、明朝書体は和風系のサイトを制作するとした時に、筆書きのようなフォントで文章を表示させたい時に指定するとよいかと思われます。見本は以下になります。

上のようにフォントを指定したい場合は以下のようにCSSを指定します。

font-family: “Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3″, “Hiragino Mincho ProN”, serif;

メイリオ

　続いてメイリオで文章を表示したい時の指定方法を紹介します。ちなみに自分はメイリオで表示した文字が好きなので、当サイトもメイリオでフォント指定しています(^^)
　メイリオの見本は以下になります。

上のような文字を指定したい場合は以下のようにCSSを指定してあげましょう。

font-family: Arial, Roboto, “Droid Sans”, “メイリオ”, Meiryo,“ヒラギノ角ゴ ProN W3″, “Hiragino Kaku Gothic ProN”, sans-serif;

　ちなみにここで1つ注意してほしい点として、Macで見た時、フォントはヒラギノ角ゴ ProNで表示されているという点があります。この理由として、メイリオというフォントに当てはまるMac用のフォントが今のところ見当たらないため、ゴシック書体の設定と同じヒラギノ角ゴ ProNでMacの場合は表示させています。

ヒラギノ丸ゴ

　最後にヒラギノ丸ゴの指定方法をご紹介します。
ヒラギノ丸ゴというと、メイリオに比べて丸みを帯びたフォント…といった感じでしょうか。
見本は以下になります。

上のようなフォントを指定したい場合はfont-familyを以下のように設定しましょう。

font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";

なお、上の見本フォント見てもわかるように女性向けのかわいらしいサイトを作る時なんかに使えそうだなーなんて思ったりします(^^)

まとめ

　以上が2015年現在のCSSによるフォント指定の方法になります！どのフォントにしたら見やすくなるのか、また、自分の理想に近いものになれるのか、実際にCSSで指定してみて自分の目で確認してみましょう！
そうすることで文字そのものが見やすくなり、見やすい・読みやすいサイトに一歩近付けるかと思いますo(^-^)o