Quasar Explorer | Matthias Hurrle@atzedent
HTMLとCSSでつくる🎨キラキラボタン✨の作成方法②
アニメーションとスタイリングによって、ボタンが魅力的に光り輝くエフェクトを実現します。
さらにGoogleフォントを使用してフォントスタイルを設定し、FontAwesomeアイコンを組み込んでボタンを彩ります。
クリックで目次を開閉
Googleフォントの活用
このコードでは、font-familyプロパティを通じて「Googleフォント」を組み込み、「Click Here!」というボタンメッセージのテキストで利用しています。
今回はちょっと手書き風でコミカルな「Sigmar」というフォントを選択しました。いろいろなフォントが選べてたのしいですよ！
ここでは、Sigmar を例にとって、Googleフォントを使用する方法をご説明します。
1. Googleフォントの読み込み
最初に Sigmarフォントを読み込むための、リンクを追加します。このリンクを自身のサイトに設置しておくことによって、外部にあるGoogkeフォントをインストールせずにインターネットを通じて読み込める訳です。
設置、と言っても下記のコードを<head>（ヘッダ）に貼り付けるのみで完了です。
最後に、「変更する」ボタンを押すのを忘れずに!
サーバにアップロードして使用する方法もありますが、ここではWebフォント（外部読み込み）として、「CDNリンク」を利用する方法を説明します。CDN（Contents Delivery Network）リンクとは、外部のファイルをリンク1つで使用できる仕組みです。
<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=Sigmar&display=swap" rel="stylesheet">
なお、CSS 内で@importを使用してスタイルシートを読み込み、直接フォントを指定する方法もありますが、<head>セクション内に<link>要素を使用してスタイルシートを読み込む方法が、より一般的で推奨される方法です。
<link>要素を使用すると、ブラウザがスタイルシートを非同期で読み込むことができ、ページの読み込み性能が向上します。
ただ はてなブログでは、「編集 見たまま」だと記事内に<link>コードが貼れない（自動削除されてしまう）ため、ブログ全体ではなく、とりあえず記事ごとで試して使ってみる、という場合などはCSS でのインポートにメリットがあります。
@importによる読み込みコードは以下 となります。
- CSSでフォントを読み込むコード
<style> @import url('https://fonts.googleapis.com/css2?family=Sigmar&display=swap'); </style>
2. フォントの適用
次に、font-familyプロパティを使用してSigmarフォントをテキストに適用します。
ボタンのテキストに Sigmarフォントを適用するのは、このコードです
.glitter-button { font-family: 'Sigmar', cursive; /* Googleフォント「Sigmar」を指定 */ }
これにより、ボタン内のテキストが Sigmarフォントで表示されます。
以上で Sigmarフォントを使用した、テキストスタイリングが完了しました！適用後は、デザインが魅力的になることを願いましょう笑
なお、Sigmarではなくご自身でフォントを探したい！という方もいらっしゃるかと思います。 その場合、以下 の Googleフォントのサイトから、お好みのフォントデザインを探してみてください。
3. クリエイティブなデザインへの活用
Sigmarフォントはちょっと個性的なデザインなので、ほどよいアクセントです。
ほかにも、Googleフォントには無料で使用できて魅力的なフォントがたくさんあるので、ボタン、見出し、または特別なテキスト要素にこのフォントを活用し、ページデザインを彩りましょう~
