INDEX
目次
前の章に戻る7章：Webフォントを使おう
この章の目安学習時間：110分
【7-1】Webフォントとは
目安の学習時間：30分
- インターネット上のサーバーにホスティングされているフォントファイルを呼び出してWebページに表示する技術のことを Webフォントと言います。
-
通常、Webページの制作者がCSSの
font-familyプロパティで指定したフォントは、同じフォントがユーザーのPCにインストールされていないと、別のフォントが代用されてしまいます。
- そのため、デザインの統一性を損ねてしまう恐れがあります。
- Webフォントの技術を使うと、ユーザーのPC環境に左右されずに、指定したフォントを確実に表示することができます。
- Webページの読み込みと同時に、ネット上にあるフォントデータをダウンロードすることができるため、どのデバイスで見ても制作者が意図したフォントで表示することが可能になります。
Webフォントはデメリットを上回る多くのメリットがあるため、積極的に活用するのがおすすめです。
図解 Webフォントの仕組み
代表的なWebフォントサービス
| Webフォントサービス名 | 特徴 |
|---|---|
| Google Fonts |
無料&商用利用OK 無料で使えるWebフォントの最大手 |
| Adobe Fonts |
高品質&有料 Adobe Creative Cloud (Adobe CC) の有料プランに加入していれば、追加料金なしでほぼ全てのフォントの利用が可能 |
| FONTPLUS |
無料プランあり（1サイトで3フォントまで利用可） 有料プランならモリサワフォントなども使用可能 |
| TypeSquare |
モリサワが提供する高品質なWebフォントサービス 無料プランでは「モリサワの一部フォント」が利用可能 |
| Font Awesome | 最も有名なアイコンフォント |
■ Google FontsのWebサイト
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
それでは、Webフォントを使ってみましょう。
演習の準備
- 「start」フォルダ内のpasta-recipe.htmlと「css」フォルダ内のstyle.cssをエディターで開きます。
- ブラウザプレビューします。
- このファイルの内容は、前章「HTML/CSS入門編 6章 よく使うセレクタを学ぼう」で作成したpasta-recipe.htmlと基本的には同じですが、見やすさを考慮し、一部のCSSを削除してあります。
- 前章の学習で自分で作成したファイルをそのまま流用しても構いません。
- その場合は必要に応じて不要なCSSを削除またはコメントアウトしてください。
■ 演習ファイルのブラウザプレビュー
【7-2】Google Fontsの使い方を知ろう
目安の学習時間：30分
本章では、無料で商用利用も可能、日本語フォントも豊富に揃っているGoogle Fontsの使い方を解説します。
Google Fontsの設定手順
1. Google Fontsのサイト（https://fonts.google.com/）へアクセスします。
2. 使いたいフォントを検索して探します。左上のFiltersをクリックします。
3. Languageメニューをクリックすると、言語一覧がプルダウンで表示されます。
4. 今回は日本語フォントを使いますので、Japaneseを検索するか、言語一覧から選びます。
5. 日本語フォントが一覧表示されます。今回は「Noto Sans Japanese」を使用しますので、赤枠内をクリックしてください。
6. Noto Sans Japaneseのページへ遷移します。右上のGet fontをクリックします。
7. Get embed codeをクリックすると、埋め込みコードとCSSが表示されます。埋め込みコードはコピーしてheadタグ内へペーストします。CSSはfont-familyとfont-weightが最低限必要です。こちらもコピー&ペーストで自分のCSSファイルへ追加します。
headタグにペーストした埋め込みコード
style.css
今回は、h1要素のfont-familyをNoto Sans Japaneseに設定し、font-weightは700に設定しますので、style.css内のh1セレクタに次のコードを追加します。
※font-weightで設定できる数値はフォントにより異なります。
※font-weightで設定できる数値はフォントにより異なります。
h1 {
/* 追加したコード */
font-family: "Noto Sans JP", sans-serif;
font-weight: 700;
/* 従来のコード */
color: #ffffff;
font-size: 45px;
text-align: center;
letter-spacing: 0.1em;
background-color: #ff0000;
}CSSサンプルコード7-1
■ ブラウザプレビュー
【7-3】練習問題
目安の学習時間：50分
問題
以下のp要素にGoogle FontsのRobotoを設定してみましょう。
font-weightの値は400とします。
font-weightの値は400とします。
<p class="copyright-text">Copyright © pasta for everyone All Rights Reserved.</p>
HTML/CSS入門編 サンプルコード7-1
■ Roboto設定前
■ Roboto設定後
解答
■ 埋め込みコード（headタグ内へペーストする）
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
HTML/CSS入門編 サンプルコード7-2
■ CSS
.copyright-text {
/* 追加したコード */
font-family: "Roboto", sans-serif;
font-weight: 400;
/* 従来のコード */
font-size: 14px;
text-align: center;
}HTML/CSS入門編 サンプルコード7-3
これで「HTML/CSS入門編 7章 Webフォントを使おう」の解説を終わります。
次の章に進みましょう。
次の章に進みましょう。