本記事は筆者の独学のメモ書きのようなものなので、
読者の皆様は参考にしないで下さい。
あくまで、筆者の復習用です。
目次
1.はじめに
2.リンクで使用する擬似クラス
3.フォントの指定
4.ウェブフォントの指定
5.ウェブフォントまとめ
6.おわりに
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. おわりに
本記事で説明不足な点もあると思うので、以下MDN参照リンクあり。
MDNのリンク:https://developer.mozilla.org/ja/
↧