CSSでフォントをメイリオにする方法を現役デザイナーが解説【初心者向け】

初心者向けにCSSでフォントをメイリオにする方法について解説しています。これはWindows OSで使用されているフォントのひとつです。メイリオの特徴とfont-familyを使った指定方法、MacOSの場合の注意点を覚えておきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

CSSでフォントをメイリオにする方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

フォントをメイリオにする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

CSSでフォントをメイリオにする方法について

CSSでフォントをメイリオにする方法について解説してみます。

 

メイリオというフォントについて

まずは、メイリオというフォントについておさらいしましょう。メイリオは、Windows OSにて使われているフォントで、従来のMSゴシック、MSPゴシックに代わって採用されたシステム用の書体のことです。

システム用書体なので、WindowsOSの入ったマシンを起動したり、ブラウザなどであらゆる箇所に表示されています。なめらかに・視認性・可読性に優れたフォントです。

語源は日本語の「明瞭」から来ており、明瞭に、視認性・可読性を向上させるために開発されました。漢字・ひらがな・カタカナ・数字それぞれがゴシック体です。

従来のMSゴシックからは、大きく形が変わり、Windows10など最新バージョンでも、バージョンアップされた「メイリオUI」として引き続き採用されています。

【参考資料】メイリオについて

ちょっと難しい用語も出ていますが、以下は国内大手のフォントメーカー「モリサワ」のフォント解説です。
参考資料として読んでみてください。

Windows Vista以降のシステム表示用に採用されたフォントで、フォントの名称は「明瞭」に由来します。
従来のMS UIゴシックよりも高い可読性を目標に作られました。
画面描画用のビットマップを持たないため、すべてのサイズでClearTypeによるスムージング処理が行われます。
文字セットはWindows Vistaで採用されたJIS X 0213:2004に対応し、Windows XPまでに搭載されていたフォントとは122文字(マイクロソフト社公表文字数)の字形が異なります。キリル文字やプロポーショナルのギリシア文字などでメイリオ固有の文字セットを持っているため、この文字セット自体を「メイリオ文字セット」と呼ぶことがあります。
「メイリオ文字セット」をはじめとするマイクロソフト社の文字セットは、主要フォントメーカが基本としている文字セット「Adobe-Japan1」に比べて、非常に独特で、JIS2004対応フォント「MS明朝」「MSゴシック」、そして「メイリオ」の間であっても、完全な互換性はありません。

モリサワ フォント用語より引用

また、メイリオUIについての詳しい解説は以下のサイトも参考になります。
意外と知らないメイリオUI・Yu Gothic UI。UIフォントとはなんなのか(外部サイト)

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

サイト内のフォントをメイリオ指定してみよう!

font-familyを使おう

フォントを指定するには、CSSの「font-family」を使います。サイト内で文字の表示を指定するCSSです。WordやEXCELなどで、文字を統一するためにインストールされたフォントを選んだ経験があるのではないでしょうか?それと同じで、制作者側から書体を指定します。

body{
  font-family:フォント名;
}

実際にフォントをメイリオ指定する

実際に記述する場合は、以下のようになります。実際は、古いバージョンのWindows向けユーザー、Mac向けユーザーへも配慮するのでもう少したくさんの記述をしますが今回はメイリオだけ。とします。

body{
  font-family:'メイリオ', 'Meiryo', sans-serif;
}

フォント名は、日本語表示の場合、シングルクォーテーションまたはダブルクオーテーションでくくります。あれ?2つはいっているじゃないか、と思われたかもしれません。これは、例えば、OSが英語である場合も想定して、という意味です。OSが英語などである場合は、Wordなどで出てくるフォントもすべて英語ベースになります。

なので、日本語向けOSのカタカナ表記、英語ベースのOSの場合も考慮し、フォント表示も英語と2種類で表記しておいたほうが良いのです。

最後に入れているのは、メイリオがOSにインストールされていない場合を想定して、「メイリオも無ければ、同じゴシック体表示をして欲しい!」という意味です。

 

【参考資料】メイリオが入っていないMacOSではどうなるの?

プリインストールされていないMacOSでは、font-familyで指定してもメイリオでは表示されません。
端末にフォントデータが入っていないからです。

ここは仕方ありません。Macでプリインストールされているフォントも添えておくことがベターでしょう!

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

今回は、CSSでフォントをメイリオにする方法を解説してみました。

 

監修してくれたメンター

ゆかちん先生

フリーランスのクリエイティブディレクター。
制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。