CSS装飾についての記事はこちら
WEBフォントについて
CSSを使用してfont-familyプロパティで指定するフォントは、デバイスにインストールされていなければ表示されない。複数指定することで問題は解決できますが、WEBフォントを使用することでも解決できる。
WEBフォントとは
WEBフォントとはインターネットのサーバー上に置かれたフォントのこと。
ユーザーのデバイスに、指定したフォントがインストールされていなくても表示させることができる。
デメリット
使用したいフォントが有料であったり、表示速度が遅くなったりすることがある。
WEBフォントの種類
Google Fontsの使い方
- Google Fontsで使いたいフォントを選ぶ。
- 表示されるlinkタグをHTMLファイルのheadタグ内に記述する。
- 表示されるfont-familyプロパティをCSSファイル内に記述する。
おまけ：Webアイコンフォント
Font Awesomeとは
WEBサイトでアイコンフォントを簡単に使えるサービスのこと。
簡単な記述でアイコンを表示させることができ、サイズや色・アニメーションの指定も可能。
無料プランでも1000種類以上のアイコンが用意されている為、使いたいアイコンを選び放題！
Font Awesomeの使い方
- cdnjsで使用したいアイコンフォントのバージョンやタイプに合わせてコードをコピーする。
- linkタグでHTMLファイルのheadタグ内に記述する。
- 使用したいアイコンを選び、HTMLの使用したい箇所にコードを貼り付ければ表示される。
任意のクラス指定をすることで、CSSで色やサイズなどを変更可能。
CSSの疑似要素で表示させることも可能
- cdnjsで使用したいアイコンフォントのバージョンやタイプに合わせてコードをコピーする。
- linkタグでHTMLファイルのheadタグ内に記述する。
<div class="icon"></div>など任意のクラス名を付けてHTMLにタグを作る。- アイコンのユニコードを使用して、以下のようにCSSで指定。
※ユニコードはアイコンページに記載されている。
.icon::before {
content: '\f5d1';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}font-familyには使用するアイコンフォントのバージョンを記述する。
font-weightはフリー版では900(Solid)か400(Brands)を指定しないと表示されないので注意。
指定のクラス名でいろいろできる！
HTMLコードで表示する場合、FontAwesomeで設定された指定のクラスでいろいろなことができる。
- サイズの変更(fa-xs～fa-10xまでの12種類指定可能)
- アイコンの横幅の統一(fa-fw)
- アイコンを回転・反転させる(fa-rotate-90・fa-rotate-180・fa-rotate-270・fa-flip-horizontal・fa-flip-vertical)
- アイコンにアニメーションを付ける(fa-spin・fa-pulse)
- float表示する(fa-pull-left・fa-pull-right)
- アイコンに枠線を付ける(fa-border)
- アイコンを重ねて表示する(親要素にfa-stackを指定、アイコンにfa-stack-1x又はfa-stack-2xを指定)
今日の積み上げ
- CSS基礎
- WEBフォント
