2019/04/10)文章の書体を変えるには、「font-famiy」プロパティを使います。書体のことをフォントと呼び、同じフォントの中でも様々な太さや、イタリックをセットにしたものをフォントファミリーと呼んでいます。「メイリオ」や「ヒラギノ角ゴ」なども様々な太さや斜体をまとめたフォントファミリーです。font-familyを何も指定しなければ、ブラウザの初期値が適用されます。初期値はブラウザごとに違うので、意図した見た目にするためにも指定しておいたほうがよいでしょう。font-familyの使い方フォントファミリーの指定は下記のように書きます。serif;}値にはフォントファミリーの名前を指定します。シンプルに見えますが、font-familyにはいくつかのポイントがあるので、解説していきます。フォントファミリー名を正しく指定font-familyの値には、フォントの名前を一字一句間違いなく指定します。囲わなければ適用されないので注意しましょう。スペースが入っていなければ囲う必要はありません。(スペースがないのでクォーテーション無し)複数のフォントを指定フォントファミリーは複数指定するのが普通です。いうのも、CSSでフォントファミリーを指定しても、そのフォントがユーザーのPCやスマホに入っていなければ、別のフォントに置き換えられてしまうんです。どんなフォントが入っているかは、ユーザーのOSやデバイスによって変わってくるので、一つの指定だけだと対応しきれないんですね。windows向け、mac向け、iphone向け、andoroid向け、などに対応するために複数指定するようにします。左から順に優先度の高いものを書いていこうブラウザの仕様として、font-familyは左から順に分析して、一番最初にマッチしたフォントを表示します。左には一番優先度の高いフォントを指定するようにしましょう。最後に総称フォントファミリー名を書こうフォントファミリーの最後には、なるべく総称フォントファミリー名を書くようにしましょう。総称フォントファミリーというのは、個別のフォント名ではなく、「ゴシック系」や「明朝系」といったフォントのタイプを指定するものです。複数指定したフォントファミリーが、ユーザーの環境に一つも無かった時に、せめて系統だけは意図したものにするために使います。世の中にはいろんなデバイスがあるので、保険として総称フォントファミリーを指定しておくことで、おおざっぱではありますがフォントの系統をコントロールすることができます。総称フォントファミリーは以下の5つ用意されています。sans-serif:ゴシック系のフォントserif:明朝系のフォントcursive:筆記体・草書体のフォントfantasy:装飾的なフォントmonospace:等幅フォント※キーワードはクォーテーションで囲う必要はありません。上記のうち基本的に使うのは、ゴシック系を示す「sans-serif」か明朝系を示す「serif」です。他の3つを使うことはほとんど無いので、2種類は確実に使えるようにしておきましょう。欧文フォント(英語のフォント)は左で指定するフォントを指定する順番にもポイントがあります。日本語フォントを左に書いてしまうと、日本語フォントの多くはアルファベットも表示できてしまうため、欧文フォントの出番がなくなってしまいます。欧文フォントを左に書いておけば、アルファベットは欧文フォント、日本語部分は日本語フォントで表示することができます。font-familyのケーススタディウェブページ全体のフォントを指定したい場合ウェブページ全体のフォントを変更したい場合は、body要素にスタイルをて適用します。font-familyは何も指定しなければ、親要素のものが継承されので、bodyタグにだけ書いておけば、全ての子要素に同じフォントが適用されます。serif;}font-familyのオススメの書き方いろんな指定の仕方がありますが、現実的に読みやすくてユーザーが見慣れているフォントを使おうと思うと、ある程度限られてきます。そこで、ここでは、これを指定しておけばまず間違いないだろうと思われる値を紹介します。sans-serif游ゴシックを主体とした指定の仕方です。「游ゴシック>メイリオ>その他ゴシック体」という優先順位で指定しています。游ゴシックは新しいフォント游ゴシックは、windowsとMAC両方に搭載されている比較的新しいフォントです。今までは別々だったフォントを表示するしかありませんでしたが、游ゴシックを使うことにより、windowsとMACで共通のフォントを使うことができるようになりました。游ゴシックには色々な問題があり、指定するのはひと工夫必要です。游ゴシックはwindowsとMACで名前が違うwindowsとMACでは游ゴシックをfont-familyで指定するときの名前が違います。ややこしいですが両方指定するようにしましょう。“游ゴシック体”または、YuGothic,英語版のフォント名と日本語名版のフォント名がありますが、OSのバージョンによって動く・動かないがあるので、全種類指定します。游ゴシックは4種類指定する必要があります。windowsだと細くて読みづらい游ゴシックを指定すると、MACでは標準の太さ、windowsでは細字が選ばれるため太さが変わってしまいます。Medium”」という游ゴシックの中でも標準の太さになるフォントを指定します。Gothic”」も指定しておきます。游ゴシックがないWindows向けに「メイリオ」という指定になり、繰り返しになりますが、下記のようなフォントの指定がオススメです。sans-serifまとめ文章の書体を変えるには、「font-famiy」プロパティを使い同じフォントの中でも様々な太さや、イタリックをセットにしたものをフォントファミリーと呼んでいますフォントファミリーは複数指定する左から順に優先度の高いものを書いて最後に総称フォントファミリー名を書こう欧文フォント(英語のフォント)は左で指定するすずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。関連記事relatedCSSのpositionの使い方!absolute・relativeの違いも解説html&CSS入門HTMLの見出しタグの使い方。【css】透明度を表すrgbaとopacityの違いや使い方を解説html&CSS入門すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。