【みんなの知識ちょっと便利帳】Webフォントで作るローディング画像

Webフォントで作るローディング画像
= ローディング時に使えるアニメーション画像を用意しました =

前のページまでは、様々な「ローディング画像」を紹介してきましたが、ここでは「Webアイコンフォント」を使う方法を紹介します。
Webアイコンフォントとは、ウェブページで文字と同じように表示できるアイコンのことで、当サイトでも、矢印「」や、ホームアイコン「」、Amazonへのリンクでのカートアイコン「」などに使用しています。
また、「きょうは何の記念日」では、読み込むデータがやや大きいため、Circle「」を使っています。
「Font Awesome」というサービスを使います。
作成した画像を使うのと違い、色もサイズも簡単に変えることができます。
このWebアイコンフォントの利点は、ダウンロードしなくても使えることで、配布サイトへリンクをして使用します。（もちろん、自分の手元にダウンロードして使うこともできます）
下記のタグを <head></head> 内に設置し、使いたいアイコンのタグをページ内に設置します。
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
- アップデートされている場合があります。公式サイトでご確認ください。
 「Font Awesome 」
このページで使っている「矢印」「ホーム」「カート」のアイコンのタグは下記のようなものです。（実際には、これにフォントサイズやカラーを設定して使用しています）
- 矢印：
- ホーム：
- カート：
- サークル：
アイコンの見本ははこちらにあります。
- Font Awesome Icons

では、ローディング画像として使えそうなアイコンを紹介します。
次のアイコンが「Animated Icons」として紹介されています。

これらのアイコンに回転の効果を付け、さらに大きさや色など加えることができます。
次のアイコンは、タグの中に「fa-spin」もしくは「fa-pulse」を書いて回転させています。
大きさは、「fa-3x」と書いて、3倍の大きさにしています。大きさは「fa-5x」まで設定することができるようです。
- 　 
- 　 
- 　 
- 　 
-

次に、色を付けたり、大きさを変えてみたりします。
色は、タグの中に設定します。ここでは、「style="color: red"」のように「styl」で設定していますが、CSSでカラーの指定ができる場合は、「class」で設定することもできます。
色は自由自在です。こちらのページなどを参考に設定してみてください。
　「Dreamweaver CC で表示されるカラーネーム」
- 
- 
- 
- 
- 
- 
-

Webフォントで作るローディング画像 = ローディング時に使えるアニメーション画像を用意しました =

おすすめサイト・関連サイト…

Webフォントで作るローディング画像
= ローディング時に使えるアニメーション画像を用意しました =