すべてのカテゴリ

2 件中 1 - 2 件表示

Font Awesomeを使ってみよう！2️⃣

今回はFont Awesomeのアニメーションを使ってみたいと思います！クラス名を追加するだけで出来ちゃいますので、一緒にやっていきましょう🎵まずは前回の記事を参考に、Font Awesomeのall.min.cssを<head>タグ内に設定しておいてください。😊↓完成見本今回は下記のようなリンクボタンを作ってみたいと思います。▼静止画で伝わりづらいのですが、それぞれのアイコンが動いています。マウスが上に来ると、背景色がつきます。Font Awesomeで用意されているアニメーション▼Font Awesomeのサイトで見本（動いてる様子）が見られます。https://　fontawesome.com/docs/web/style/animatefa-beatなど、特定のクラス名を追加するだけで、アニメーションがつきます。クラス名というのは、class=""のダブルクォーテーション内に書きます。半角スペースで区切って複数つけることも出来ます。html<ul class="sns-list"><li class="youtube"><a href="#">YouTube</a></li><li class="twitter"><a href="#">Twitte

IT・テクノロジー

tsuyu0102

2023/06/26

Font Awesomeを使ってみよう！

簡単にアイコンを表示できるFont Awesome。今回は使い方の手順をご紹介いたします。一緒にやっていきましょう😊Font Awesomeのサイトhttps://　fontawesome.com/▼ヘッダーナビにある、Iconsをクリックするとさまざまなアイコンが出てきます。まずはFont AwesomeのCDNを入手！https://　cdnjs.com/libraries/font-awesome▼</>のマークのところをクリックすると必要なコードがコピーできます▼コピーしたコードは、htmlファイルのheadタグ内にペーストしますこれでFont Awesomeを使う準備は整いました！【方法1️⃣】iタグを使って表示する！使いたいアイコンを上記のFont Awesomeのサイトから選びます。https://　fontawesome.com/icons▼今回は、こちらのWeatherから選んでみます▼Freeアイコンをクリックすると、無料で使えるアイコンだけ表示されます。左上のcloudを使ってみたいのでcloudをクリック。▼iタグのところでクリックすると、コードがコピーされます。をhtmlファイルのbodyタグ内にペーストするだけで、表示されます。⭐️iタグはspanでもOK。でも出ます。【使用例】例えばこんなふうに使ってみる👑完成見本▼例えばこんなふうに、ヘッダーナビ

IT・テクノロジー

tsuyu0102

2023/06/22