### Googleフォントの活用
このコードでは、`font-family`プロパティを通じてGoogleフォントを組み込み、「Click Here!」というボタンメッセージのテキストで利用しています。
今回は'Sigmar'というフォントを選択しました。いろいろなフォントが選べてたのしいですよ！
ここでは、'Sigmar' を例にとってGoogleフォントを使用する方法をご説明します。
#### 1. Googleフォントの読み込み
最初にフォント'Sigmar'を読み込むための、リンクを追加します。このリンクを自身のサイトに設置しておくことによって、外部にあるGoogkeフォントをインストールせずにインターネットを通じて読み込める訳です。
設置、と言っても下記のコードを <head>（ヘッダ）に貼り付けるのみで完了です。
※サーバーにアップロードして使用する方法もありますが、ここではWebフォントとしてCDNリンクを利用する方法を説明します。
<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=Foldit:wght@300&family=Sigmar&display=swap" rel="stylesheet">
#### 2. フォントの適用
次に、`font-family`プロパティを使用して 'Sigmar'フォントをテキストに適用します。
ボタンのテキストに 'Sigmar' フォントを適用するのはこのコードです
.glitter-button {
font-family: 'Sigmar', cursive;
}
これにより、ボタン内のテキストが 'Sigmar'フォントで表示されます。
これで'Sigmar'フォントを使用したテキストスタイリングが完了しました！適用後は、デザインが魅力的になることを願いましょう笑
#### 3. クリエイティブなデザインへの活用
'Sigmar'フォントはちょっと個性的なデザインなので、ほどよいアクセントです。
ほかにも、Googleフォントには無料で使用できて魅力的なフォントがたくさんあるので、ボタン、見出し、または特別なテキスト要素にこのフォントを活用し、ページデザインを彩りましょう~
fonts.google.com
---
### FontAwesomeアイコンの組み込み
フォントの次はアイコン
です。
ボタンに魅力的なアイコンを追加するために、FontAwesomeというライブラリを使用することができます。
FontAwesome は無料と有料のものがありますが、無料でも基本的なアイコンは相当数網羅されています。さまざまな種類のアイコンを簡単にWeb ページに組み込むことができる便利なツールです。
以下に組み込み手順を説明します。
fontawesome.com
Only "display:flex;"
Arrangement change with "justify-content"
↑こんな感じでかわいいアイコンが色々あります。カラーやアニメーションもかんたんに付けられます。
#### 1. FontAwesomeライブラリのリンク
まず、FontAwesome ライブラリを読み込むためのリンクを追加します。CDN
(
-
CDN（Content Delivery Network）は、外部のサーバーからデータ（例：画像、ファイル）を効率的に読み込むテクノロジーで、ウェブサイトやアプリケーションの速度向上に寄与します。 CDNはデータを地理的に近いサーバーに配置し、ユーザーがコンテンツにより迅速にアクセスできるようにし、ウェブページの読み込み時間を短縮します。FontAwesomeなどのアイコンフォントもCDNを活用し、高速で品質の高いアイコンを提供し、ユーザーエクスペリエンスを向上させます。
)
という、外部サーバを利用します。
これにより、FontAwesome のアイコンを使用するための準備が整います。
下の2行あるコードを
<head>にペーストしてください。
※なお、最新のFont Awesomeバージョンはこちら
で確認できます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
なお、1行目のコードは、FontAwesomeが提供するアイコンアニメーションのためのlinkです。
アニメーションが不要な場合、もしくはCSSで自分でアニメーションをコーディングする場合などは、2行目のコードのみでOK!です。
#### 2. アイコンの追加
FontAwesome ライブラリを読み込んだら、自由にアイコンを配置できます。さきほどのFontAwesome のページへ行き画像から選ぶか、または検索窓から文字でも探せます。
※無料の「Free」版と有料の「Pro」版があります。プロ版を配置してもうまく表示されなかったりしますので、注意しましょう♪
今回は、星のアイコンを選んでいます。以下のコードをボタン内<button～button>に挿入することで、アイコンを表示します。
<button class="glitter-button"><i class="fas fa-star"></i>Click Here!</button>
なお、はてなブログで「FontAwesome」を適用するときは、下記のように若干コードを書き換える必要があります。
<p><em class="fas fa-solid fa-hippo"> kaba-san</em></p>
たとえば、下のカバさんのアイコンだと、FontAwesome のページにあるコードは
<i class="fa-solid fa-hippo"></i>
なのですが、" i " の部分が " em " となり（コピペで自動に書き換わる）、2つ並んだクラス名の前には " fas "、という文字を入れる必要があります。
*※Markdown記法ではこの対処は不要。*
ちょっと休憩~ ﾄﾞｰｿﾞ(∩´｡•ω•)⊃🍵
あと気を付けるのは、基本的にHTMLに書き込んで使うのですが、たとえば以下の2行を書き込むと、上の1行は何もなかったかのように跡形もなく書いたコードは消え去ります……(ﾟ∀ﾟll)｡o
①
<p><i class="fas fa-solid fa-hippo"></i></p>
きえる……(ﾟ∀ﾟll)｡o
②
<p><i class="fas fa-solid fa-hippo"> kaba-san</i></p>
kaba-san
↑ i がem に自動で書き換わる
これは、アイコンを適用しているコードのあいだに何かテキストを配置しておかないと起きる現象です（はてな仕様）。裏ワザ的な対策として、『 』という記号を入れておけば、余分な文字を入れずに済みます。せっかく書いたコードが消えてやりなおしになってしまうので、注意してくださいね。
*※こちらも、Markdown記法では対処不要です。*
#### 3. アイコンにアニメーションを追加
サンプルのボタンには、星のアイコンにアニメーションで瞬くような演出をちょこっと施しています。以下コード解説です。だいぶん遠くまで来た（笑）ので、改めてにその部分のコードのみを再度、記します。
.fas.fa-star {
position: relative;
animation: glitterAnimation 5s ease-in-out infinite;
color: yellow;
}
@keyframes glitterAnimation {
0%, 100% {
transform: scale(0.8);
opacity: 0.7;
}
20% {
transform: scale(0.8);
opacity: 0.8;
}
0.1% {
transform: scale(0.9);
opacity: 1;
}
30% {
transform: scale(0.75);
opacity: 0.75;
}
}
.fas.fa-star:
FontAwesomeの星アイコンを指定。アイコンに対するスタイルやアニメーションの定義。position: relative;:
アイコンの位置を相対的に設定。この設定により、アイコンの上に他の要素を重ねることが可能になる。animation: glitterAnimation 5s ease-in-out infinite;:
アイコンにアニメーションを適用。「glitterAnimation」という任意のクラス名でアニメーションを指定しており、アニメーション時間は5秒( 5s )、動作はイージング（ease-in-out）
(イージング（easing）は、アニメーションの進行速度や変化のスムーズさを制御するためのプロパティです。アニメーションが開始してから終了までの間に、要素がどのように変化するかを指定します。イージングは、アニメーションがどのように進行するかに影響を与え、アニメーションがより自然な見た目になるようにします。
`ease-in-out`は、一般的なイージングの1つで、アニメーションが始まるときにゆっくりと始まり、途中で一時的に速度を上げ、最終的にゆっくりと終了する動作をします。他にも様々なイージングが存在し、それぞれ異なるアニメーションの振る舞いを提供します。
いくつかの他の一般的なイージング関数には、以下のようなものがあります：`ease-in`: アニメーションが始まるときにゆっくりと始まります。
`ease-out`: アニメーションが終了するときにゆっくりと終了します。
`linear`: アニメーションが一定の速度で進行します。急激な変化はありません。
`ease`: `ease-in-out`と同様に、アニメーションが始まるときにゆっくりと始まり、終了するときにゆっくりと終了しますが、`ease-in-out`よりも緩やかな変化を持ちます。
これらのイージング関数を選択することで、アニメーションの見た目や感触を微調整することができます。)
で、無限に繰り返されるように設定。color: yellow;:
アイコン（星）の色を黄色に設定。@keyframes glitterAnimation { ... }:
アニメーションのキーフレームを定義。アニメーションの詳細な動作を制御するために使用。このキーフレーム内にアニメーションの各ステップごとの設定を記述。
-
- ・
0%, 100%: アニメーションの初めと終わりの状態を指定しています。スケール（大きさ）を0.8倍にし、不透明度を0.7に設定しています。
・20%: アニメーションの途中で、スケールを0.8倍、不透明度を0.8に変更しています。・0.1%: アニメーションの途中で、スケールを0.9倍、不透明度を1に変更しています。非常に短い時間で起こるため、ほとんど変化しないように見えます。・30%: アニメーションの途中で、スケールを0.75倍、不透明度を0.75に変更しています。
これにより、星アイコンが一定のタイミングで拡大・縮小し、不透明度が変化することでキラキラ（というよりサンプルはボワーッ？）と点滅するエフェクトが実現されています。
### 総括・まとめ
HTMLとCSSを使用してキラキラ光るボタンを作成する手法を解説しました。アニメーションとスタイリングを組み合わせて、魅力的なエフェクトを持つボタンを作成することが可能です。またGoogleフォントの利用、FontAwesome アイコンを組み込む手順にも触れました。
記事内で取り上げた主要なポイントは次の通りです。
1. キラキラ光るエフェクト
擬似要素（::before）を使用して、ボタンにキラキラ光るエフェクトを適用しました。これにより、ボタンがキラン、と輝くようなアニメーションを実現しました。
2. Googleフォントの活用
'Sigmar' フォントをGoogle Fonts から読み込み、ボタンテキストに適用しました。フォントの選択により、デザインが個性的になります。
3. FontAwesomeアイコンの組み込み
FontAwesome ライブラリを使用して、ボタンにアイコンを追加する方法を紹介しました。アイコンの選択とアニメーションの適用で、ボタンにダイナミックな要素が加わりましたね。
これらの手法の組み合わせで、Webページにおしゃれで魅力的なボタンを作成することができます。デザインとアニメーションの組み合わせは、ユーザーエクスペリエンス向上に効果的です。
ウェブデザインやフロントエンド開発において、こうしたテクニックを活用することで、ユーザーに強い印象を与えるWebページを制作することが出来そうですね。自分なりのアイディアをプラスし、よりクリエイティブで魅力的なボタンを作成してみましょう~
今週のお題は「パイナップル」！
自己紹介
出身：南アメリカ
栄養：ビタミンCやマンガン、食物繊維が豊富。
効能：炎症の抑制、消化の促進、抗酸化作用、免疫力向上
意外性：肉にあう
rubirubi.hateblo.jp
脚注
注釈
