アイコンフォントはウェブサイトに最適：その理由は？

今日は、アイコンフォントとは何か、そして、どのように使えばウェブサイトを盛り上げることができるのか...をご紹介します。

アイコンは聞いたことがあるし、フォントもほぼ間違いなく聞いたことがあると思いますが、アイコンフォントとは何でしょうか？今日は、アイコンフォントとは何か、そして、どのように使えばウェブサイトを盛り上げることができるのかを紹介します。さっそく始めてみましょう。

アイコンフォントは何ですか？

アイコンフォントは、通常のフォントと全く同じで、テキストの外観を定義するものです。ここで大きな違いは、アイコンフォントには文字や数字ではなく、記号やアイコンが含まれていることです。お母さんに手紙を書けないなんて、フォントに何の意味があるんだ！」と戸惑うかもしれません。

アイコンフォントは、主にWebサイトのスタイルに使用されます。ベクターベースなので、CSSでサイズ変更、移動、スタイル変更などが可能です。これは、画像などの従来のデザイン手法に比べ、大きなメリットがあります。数行のコードで、多数のアイコンの外観を変更することが可能です。画像を編集したり、Photoshopを開いたり、新しいファイルをアップロードしたりする必要はなく、コードを書くだけでいいのです。

はじめに

これらの例ではFontAwesomeを使用しますが、この理論は他の多くのフォントパッケージにも適用できます。

以下はHTMLの入門編です。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>MUO Icon Fonts</title><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><style>html {font-family: helvetica, arial;}</style></head><body></body></html>

これは、Webページを生成するために必要な最小限のHTMLの量です。ホームページの作り方ガイドでも取り上げているので、ほとんどの説明は省きます。

一番大事なセリフは

これにより、CDNからフォントスタイルシートが読み込まれます。この行がなければ、あなたのウェブサイトは何がすごいフォントなのかわからなくなってしまうので、これはかなり重要です。このスタイルシートは、ウェブフォントを埋め込むための難しい作業をすべて引き受け、一般的に物事をとても簡単にしてくれます。

フォントアイコンは、i タグに付加された CSS クラスで定義される。これらのアイコンは、ブラウザやデフォルトで定義されたスタイルが添付されていないため、アイコンがごちゃごちゃしないように選ばれました。また、spanタグにクラスを追加することもできますが、この場合、HTMLがごちゃごちゃしてしまいます。

基本的な使い方は以下の通りです。これをbodyタグに記述します。

My First Icon

こんな感じです。

なんて簡単なんでしょう。分解してみましょう。font Awesomeが動作するには、2つのクラスが必要です。1つ目はfaと呼ばれるもので、フォントを表します。これは、どのアイコンを使っても必要です。2つ目のクラスは、使用するアイコンを指定します。飛行機、人物、クレジットカードなど、何でも構いません。また、接頭辞にfaが付いており、これは歯車のアイコンであるため、fa cogと命名されています。全アイコンの一覧は、同社のホームページで見ることができます。

アイコンを歯車から他のアイコンに変えてみてください。

詳細

基本がわかったら、次は高度なテクニックを身につけましょう。

自分でCSSを書きたくない場合は、組み込みのスタイルを使えばいい。アイコンを大きくするために使えるクラスがいくつもある。

このクラスは、アイコンを回転させ、前のサイズクラスと組み合わせることで、いくつかの素晴らしい効果を生み出すことができます。コードは以下の通りです。

その結果は以下の通りです。

fa rotate クラスを使用すると、アイコンを簡単に回転させることができます。

最後の数値は、アイコンの回転角度を定義しますが、90、180、270のいずれかに制限されますので、あまり興奮しないでください。

最後の仕掛けは、スタッキングです。fa stackクラスは、2つ以上のアイコンを組み合わせることができるクラスです。

こんな感じです。

このように、さまざまなクラスを組み合わせると、可能性は無限に広がります。

カスタムCSS

アイコンフォントは単なるフォントなので、他の要素と同じようにCSSでスタイルを設定することができます。CSS3を少し使うだけでずいぶん楽になります。

アイコンのHTMLは以下の通りです。

以下のCSSです。

@keyframes move { from { margin-left: 0; } to { margin-left: 400px; }}.bike { animation-name: move; animation-duration: 4s;}

このCSSは非常に基本的なものですが、大きなインパクトがあります。これはCSSのチュートリアルではないので、内部構造について詳しく知りたい場合はCSSを学ぶとよいでしょう。

本当にやろうと思えば、特別なことができるんです。

少しもたつくWebのファイルサイズを小さくするために、以下のようなHTMLがあります。

以下のCSSです。

@keyframes fade { from { opacity: 0; } to { opacity: 1; }}.person { opacity: 0; animation-name: fade;}#p1 { color: red; animation-duration: 2s;}#p2 { color: orange; animation-duration: 4s;}#p3 { color: green; animation-duration: 6s;}#p4 { animation-duration: 8s;}

先ほどの例と同様、CSS3によるアニメーションを使用しています。フェードイン・フェードアウト」というアニメーションが作成され、各人物のアイコンが異なるタイミングでアニメーションします。これらのアイコンとCSS3を使うことで、多くの可能性が生まれます。

本日は以上です。これでアイコンフォントを使って、Webサイトを盛り上げることができるようになったはずですもし、自分のスキルに自信がないのであれば、これらのCSSテンプレートサイトやYouTubeチャンネルを見て、ウェブデザインを始めてみてはいかがでしょうか。

また、お気に入りのアイコンフォントは何ですか？下のコメント欄で教えてください。

2021-03-14 08:32 に公開
閲覧 ( 15 )
分類：プログラミング