CSSでフォントをメイリオにする方法を現役デザイナーが解説【初心者向け】
初心者向けにCSSでフォントをメイリオにする方法について解説しています。これはWindows OSで使用されているフォントのひとつです。メイリオの特徴とfont-familyを使った指定方法、MacOSの場合の注意点を覚えておきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
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フォントとはなんなのか（外部サイト）
サイト内のフォントをメイリオ指定してみよう！
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','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}
今回は、CSSでフォントをメイリオにする方法を解説してみました。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
監修してくれたメンター
| ゆかちん先生
フリーランスのクリエイティブディレクター。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
