CSS実践(7) 「リンクで使用する擬似クラス」「フォント・ウェブフォントの指定」

11499 ワード
font 擬似クラス Googlefonts CSS 初心者 CSS テキストリンク

1. はじめに

本記事では、CSSの
「リンクで使用する擬似クラス」「フォント・ウェブフォントの指定」
について記載する。

2. リンクで使用する擬似クラス

擬似クラスとは？

・指定の要素が特定の状態である場合にスタイルを適用させるセレクターのこと。 ・文章構造の範囲外にある情報によってスタイルを変化させることができる。

主なリンクで使用する擬似クラス

・a:link:未訪問のリンク ・a:visited:訪問済みのリンク ・a:hover:ホバー状態のリンク ・a:active:クリック状態のリンク

【サンプル】

index.html
<body>
  <a href="#">リンク</a>
</body>
styles.css
a:link {
  color: black;
}
a:visited {
  color: red;
}
a:hover {
  color: green;
}
a:active {
  color: blue;
}

【表示例】
<a:link>

<a:visited>

<a:hover>

<a:active>

visited擬似クラスの動作確認をやり直したい場合はGoogle Chromeの閲覧履歴をリセットして 再度適用する必要がある。

補足① link、visited、hover、activeの順番で記述する。 補足② スマートフォン、タブレット等のタッチ入力では、ホバー状態が発生しない。

3. フォントの指定

構文

styles.css
セレクタ {
  font-family: フォント名 or フォントファミリー;
}

フォント名

・具体的なフォント名を指定。
(例)
・メイリオ
・ヒラギノ角ゴシック ...etc

フォントファミリー

フォントの種類を示すキーワードで指定。
・serif:明朝体
・sans-serif:ゴシック体

font-familyプロパティの設定事例

styles.css
html {
  font-family: "メイリオ”, "Hiragino Kaku Gothic ProN", sans-serif;
}

・フォントファミリーは左から優先されて適用される。 ・表記はカンマ区切りとすること。 ・フォントは"”で囲うが、フォントファミリーは””で囲わない。

実践

【サンプル】

index.html
<body>
  <p>本日は非常に暑いです。熱中症対策として、こまめに休憩と水分補給をしましょう。</p>
</body>
styles.css
html {
  font-family: sans-serif;
}

【フォント適用前】

【フォント適用後】

参考:MDN font-family:https://developer.mozilla.org/ja/docs/Web/CSS/font-family

4. ウェブフォントの指定

ウェブフォントとは？

Webサーバー上に配置したフォントファイルをインターネットを経由で配信して、Webブラウザで表示させる仕組みのこと。

フォント指定の課題

・エンジニアやデザイナーが意図しないフォントが表示される可能性がある。 ・パソコンやスマートフォンといった、システムにインストールされているフォントが、それぞれのデバイスで異なるため。

ウェブフォントを利用するメリット

どのユーザー環境でも、同一のフォントが表示されるようになるので、製作者の思い通りの印象をユーザーに与えることができる。

参考サイト

Google Fonts

Google Fontsを用いた実践

【サンプル】

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初めてのCSS</title>
    <link rel="stylesheet" href="css/style.css" />
    <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=Potta+One&display=swap" rel="stylesheet"/>
  </head>
  <body>
    <p>本日は非常に暑いです。熱中症対策として、こまめに休憩と水分補給をしましょう。</p>
  </body>
</html>
styles.css
html {
  font-family: 'Potta One', cursive;
}

【Google Fontsで”Potta One”というフォントを使用する際の手順】

①検索ボックスに適用したいフォントを入力。
②適用したいフォントをクリック。

③「Select this style」を入力。

④linkのコードをコピーし、HTMLファイルのheadタグ内にペーストする。
⑤CSSのコードをコピーし、CSSファイルにペーストする。
【表示例】
<before>

<after>

5.ウェブフォントまとめ

メリット

・システムに依存しないで、意図したフォントをユーザーに表示できる。

デメリット

・ダウンロードに時間がかかり、ページの表示が遅く感じられる場合がある。 ・有料の場合もある。

6. おわりに

次項:CSS実践(8) 「利用頻度の高いテキストスタイル設定」に続く。