初期設定：Webフォント、サニタイズCSSを導入する | SkillhubAI（スキルハブエーアイ）

最初にコーディング要件にあった、以下２つの外部ファイルを設定しましょう。

Webフォント（Googleフォント/Noto Sans Japaneseとicon）
サニタイズCSS（sanitize.css）

事前準備

これからランディングページ(LP) をコーディングしていくためのhtml,cssファイルを作成してください。
ファイル名は任意で構いません。

htmlファイルでは<link rel="stylesheet"... >を使って、作ったcssファイルを読み込ませます。
次に、今回のレッスンでCDN等の読み込みを確認できるよう、下記のコードを<body>～</body>の間に貼り付けてください。

<h1>CDN,CSS確認</h1>
<h2>h2</h2>
<h3>h3</h3>
<a href="https://skillhub.jp/">リンク</a>
<p>段落</p>
<b>太字</b>
<i>Italic</i>
<em>強調</em>
<ul>
    <li>箇条書き1</li>
    <li>箇条書き2</li>
</ul>
<ol>
    <li>箇条書き1</li>
    <li>箇条書き2</li>
</ol>

htmlファイルが下図のようになっていればOKです。
file

Googleフォントの導入

Google fonts導入方法

Webフォントを使えるように設定します。
https://fonts.google.com/を開いてください。
file

Noto Sans Japaneseをクリックして開きます。
見つけられない方は、検索（Search fonts）を使ってください。
file

ページをスクロールダウンしていくと、Stylesという項目があります。
ここでは、使用したい文字の太さを決めることができます。
今回は「Regular 400」「Bold 700」の２つをSelect this styleで追加してください。
file

styleを追加できたら、画面右上に表示されているパネルのようなアイコン（View your selected families）をクリック。
file
Selected familyというパネルが開きます。
使用するフォントスタイルがあれば、下の方に導入のためのコードが表示されます。
file

赤線で囲ったlinkタグの部分をコピーします。
指示通りhmlファイルのhead内に貼り付けましょう。
file

緑の線で囲った、font-familyの指定もコピー。
こちらはcssファイルで、bodyをセレクタにして使ってください。
file

ブラウザで表示を確認してみましょう。
検証ツールでbodyのフォント指定をOFFにしてみると、Google Fontsが使われているか分かりやすいです。
file

Googleアイコンの導入方法

次に、Googleのアイコン表示させてみましょう。
Google Fonts系列サービスから利用できるアイコンには、２つの種類があります。

Google Material Icons（マテリアルアイコン）
Google Material Symbols（マテリアルシンボル）

本講座では「Google Material Icons」の方を使用します。
早くレッスンを進めたい方は、Material Symbolsの部分はスキップしても構いません。

Google Material Icons（マテリアルアイコン）の導入方法

Material Iconsは従来のアイコンセットで、現在でも広く使われています。シンプルで一貫性のあるスタイルが特徴です。このアイコンセットはWebサイトやアプリでの使用に最適で、視認性や読みやすさを重視しています。5つのスタイルオプション（filled、outlined、rounded、sharp、two-tone）があり、それぞれが独立したアイコンセットとして扱われています。

まず、CDNコードを貼り付けます

Google Fontsガイド Setup Method 1. Using via Google Fonts によると、こちらもCDNでCSSファイルを読み込む必要があります。
掲載されているCDNのコードをhtmlファイル、head内に貼り付けましょう。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

使いたいアイコンのコードをコピー

https://fonts.google.com/icons?icon.set=Material+Iconsで、アイコンを探してみましょう。

最初に、左側のStylesが「Material Icons」になっていることを確認してください。 file

一覧表示されている中から、使いたいアイコンを探します。

下図は、videoで検索した場合です。
モニターの中に再生マークがあるアイコン（Ondemand Video）を使ってみます。
file
使用したいアイコンをクリック。
パネルが開いて、アイコンを表示させるためのコードが出てきます。
赤線で囲った部分をコピーして、htmlファイルに貼り付けてください。
file
　↓

<span class="material-icons-outlined">
ondemand_video
</span>

表示を確認してみましょう。
アイコンが表示されていませんね。 ondemand_videoと、文字が表示されてしまいました。
file

Googleアイコンが表示されない?!

上図のような「Googleアイコンが表示されない」というお問い合わせ、実は結構あります。

冒頭で紹介したように、Googleアイコンは5つのスタイルに分けられています。 CDNでCSSを読み込ませる際に、使用したいスタイルを読み込む設定を行っていないとGoogle マテリアルアイコンは表示されません。 file

デフォルト（Material+Icons）は“Filled”を使う設定です。
選択したアイコンのスタイル“Outlined”が使えるように変更しましょう。
Iconsの後に+スタイル名をつけます。
file

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

上書き保存して、ブラウザをリロードするとアイコンが表示されます。
file

GoogleアイコンのスタイルとCSS

Google Fonts Iconsで使用するスタイルは下記のようになっています。
アイコンが表示されないときは、正しいスタイルシートを指定できているか確認してみましょう。

スタイル名	linkタグでの指定	CSSクラス
Filled	Material+Icons	material-icons
Outlined	Material+Icons+Outlined	material-icons-outlined
Rounded	Material+Icons+Round	material-icons-round
Sharp	Material+Icons+Sharp	material-icons-sharp
Two tone	Material+Icons+Two+Tone	material-icons-two-tone

FilledとOutlinedの両方を使いたい！という場合は、パイプ（|）で区切ることで複数スタイルを使用することもできます。

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

極論、全部のスタイルを読み込ませてしまえばアイコン使い放題です。が、全アイコンのデータを読み込むとページ表示が遅くなる可能性があります。必要なスタイルだけ追加するのがオススメです。

Google Material Symbols（マテリアルシンボル）の使い方

Google Material Symbolsは2022年から導入されたアイコンシステムで、より高度なカスタマイズが可能なことがウリ。
StylesのところでMaterial Iconsに「deprecated（非推奨）」とつけられていたように、GoogleはGoogle Material Symbolsの使用を推奨しています。

Google Fontsでアイコンを探して使う

https://fonts.google.com/iconsでアイコンを探します。
今度はStylesで「Material Symbols」を選択してください。
file

左上、Customizeではアイコンが塗りつぶしタイプか線か、線ならどのくらいの太さか、などを調整できます。
file
使いたいアイコンをクリックしてみましょう。
右側にパネルが表示されます。
file

まず、一番上にあるブロックの「Copy code」を使ってlinkタグをコピーしてください。
file
自分のファイルのhead内に貼り付けます。

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=favorite" />
    ⋮
</head>

次に、右のパネルを下方向にスクロールして「Inserting the icon」の項目を探します。
spanタグのコードがあるので、コピーして使いたい場所に貼り付けます。

<span class="material-symbols-outlined">
    favorite
</span>

ブラウザで表示すると、アイコンが表示されることが確認できます。
（下図、左上の♡アイコン）
file

複数使いたい時は？

先ほど貼り付けたlinkタグは、末尾が「icon_names=favorite」。
末尾に使用したいアイコンの名前が入るわけです。

別のアイコンも使用したい場合は、この後ろに半角カンマ( , )+Icon nameを追加します。
例えば、星アイコンだと以下のコードです。
file

    ⋮
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=favorite,star" />
</head>

<body>
  <span class="material-symbols-outlined">
    star
  </span>
  <span class="material-symbols-outlined">
    favorite
  </span>

☆のアイコンも表示されました。
file

その他の設定については、マテリアルシンボルガイド https://developers.google.com/fonts/docs/material_symbols?hl=jaで解説されているので、目を通してみてください。

なお、これからのコーディングではMaterial IconsかSymbolsのどちらか一方を使うようにしてください。
使用しない方のコード（linkタグ）はコメントアウトするか、削除して進めてください。

サニタイズCSSの導入

サニタイズCSSとは

Google ChromeなどのWebブラウザは、それぞれデフォルトでcssを用意しています。
例えば、h1タグで囲んだ文字は大きく表示されますし、ulタグはpadding-leftが付けられてインデントされたような表示になりますね。また、ブラウザによって微妙にスタイルが異なるので、見え方に差が出てしまう場合もあるでしょう。

このため、ブラウザによる見え方の差をなくすCSSが配布されています。
リセットCSS・ノーマライズCSS・サニタイズCSSという３系統に分かれます。
下図はそれぞれの適用イメージです。
file

リセットCSS系：ブラウザスタイルをすべて無効化する
ノーマライズCSS系：スタイル指定は残しつつ、ブラウザ間の差異をなくす
サニタイズCSS系：スタイルを統一+扱いやすいようスタイル指定が追加

かつてはリセットCSSがよく使われていましたが、全部イチからスタイル指定をするのは手間がかかります。
近年はノーマライズや、レスポンシブ化しやすいサニタイズ系のCSSを読み込ませる方が主流になっています。

導入方法

コーディング要件で指定されたサニタイズCSS系のsanitize.cssを使ってみましょう。

使い方は簡単。
sanitize.cssを開いて、Usageの下に書かれているCDNコードをコピーします。

file

現在<head>内でいくつかCSSを読み込ませていますね。
CSSは基本的に、下に書いたもの(新しく読み込まれたもの)が優先されます。
他のCSSに影響しないよう、一番上にsanitize.cssのコードを貼り付けてください。
file

保存して、ブラウザ表示を確認してみましょう。
アイコンや文字が、ブラウザのフチに近づいています。
file

これでWeb font、サニタイズCSSの設定は完了です。

読み込み確認のために貼り付けていただいたコードは削除してください。
<body>~</body>の中身が空の状態に戻します。

次回から、デザインのコーディングを行っていきましょう！

レッスン一覧へ