株式会社アテンド0FontAwesomeが便利すぎるWeb制作では単色のアイコンを探したり、自身で描いて使う事が多くあります。リンクボタンの端にリンク先ページを想像させるアイコンがあると、クリックする前にどのような内容が表示されるのかを想像してもらう事ができ、Webサイトの操作性が増すのでアイコンがあると非常に便利です。Display(レティナディスプレイ)の普及で制作が少しばかり大変になりました。レティナディスプレイについて簡単に説明すると、通常であれば色を表示する点が1つなのに対し、更に4分割する事で、これまでの1つの点で4色の再現ができるというものです。この技術のおかげで、より美しく、より鮮明に画面へ画像を表示させる事が出来るようになりました。これによって、スマートフォンの画面へ表示させる写真やアイコンは縦横2倍の大きさにしておかないと、鮮明に見えないという事に直面します。パソコンで表示した時には逆に大きすぎるので画像を縮小させる事になり、細部が若干ぼやける・・・なんて事も起こります。これとは異なりますが、沢山の色パターンを設ける際にはたとえ同じ図柄のアイコンであっても、赤・青・白・黒など必要なだけ色を変えた物を用意したりと、準備に手間がかかります。アイコンを一斉に変更する際にも同じ作業が発生するので大変です。FontAwesomeを使うと、アイコンの利用がとても便利になります。アイコンをフォントとして扱うFontAwesomeFontAwesome(フォントオーサム)とは何かというと、アイコンとして使われる図柄を文字として扱う事ができる物です。画像ではなく文字情報なので、大きさを変える事も、色を変える事もできます。始めから大きな画像を用意しておかなくても、文字サイズの指定と同じ方法で変更できるので様々な用途に対応できますので、とても魅力的です。FontAwesomeを使ってみようサイトへアクセスし、アカウントを作成する以前は誰もが使える共通のファイルURLをコピーして使う形式でしたが、現状ではメールアドレスを登録して、個別に割り振られたURLを利用する必要があります。利用の際は、まずアカウントを作成する事となります。アカウント作成といっても、メールアドレスを登録して、少し入力するだけの簡単な操作ですので、短時間で終了します。Free」ボタンをクリックして、アカウント作成を始めます。大人気SF超大作の新作が公開前後だからでしょうか、ちょっとアノ映画を連想させるトップページになっていますね。ここに使われているアイコンもフォントオーサムに用意されています。中には「こんなアイコンもあるの!」と驚くものもあるので、ぜひ探してみると面白いかもしれません。Code」ボタンをクリック。すると、画面が変わります。登録したメールアドレス宛にメールが届いているので、確認しましょう。届いていない場合は、先ほどの画面下のボタンをクリックすると、メールが再送信されます。届いたメールからURLをクリック。英文のメールなので、受信した時に一瞬、迷惑メールと勘違いしそうになるので、注意して確認してください。続いてパスワードを設定します。任意のものを2回入力してください。先ほど作成したアカウントでログインすると、利用するためのキットが表示されています。そのソースコードをコピーして、head要素内に貼り付けます。Code」ボタンから簡単にできます。便利!!続いて使いたいアイコンを一覧から探します。文字入力での検索にも対応していますが、日本語での検索はできませんので注意が必要です。「phone」とかで検索すると、電話マークが出てきます。検索一覧の表示で、一部色が薄くなって表示されているアイコンがあります。これはProユーザーのみ利用可能の素材です。利用する場合には有料プランへの契約が別途必要です。使いたいアイコンが見つかったらクリックしましょう。class=”〜〜〜”></i>というi要素で書かれた一文があるのでそちらをクリック。するとコピーされます。Webサイト上で表示させたい箇所へ貼り付け!!この作業でクオリティの高いアイコンが設置できます。サイズや色を変えるにはアイコンのサイズ変更には、専用のclass名が用意されています。微妙な大きさの調整はやはり独自でCSSを書いた方が便利!!なのでCSSを使って、font-sizeで大きさを指定します。Iconsページから確認してみてくださいね。色を変える場合にも、やはりCSSを使います。colorを使って、好きな色へ変更しましょう。#ffcc00;}こんな感じでしょうか。classやidも利用できるので、それぞれに割り振って変更する事もできます。FontAwesomeは疑似要素でも使えるFontAwesomeは、::beforeや::afterといった、CSS疑似要素での利用もできます。これは複数の項目をリスト要素で作る時など、繰り返して表示させたい場合に便利です。リスト要素のliへ疑似要素として入力する場合。5px;}これでアイコンの表示ができます。“”;の部分でおこないます。このバックスラッシュに続く英数字は、先ほどのアイコンを選択した画面の上部にあります。iから始まる要素で行ったのと同様に、文字をクリックするとコピーができます。注意していただきたいのは、コピーした時点ではバックスラッシュは含まれないという点です。自身でバックスラッシュを入力して、コピーした文字列を貼り付けるという流れになります。アイコンが表示されなくて、あれこれと悩んだ末にバックスラッシュをつけ忘れていた...なんてこともあるので、細かく見ていきましょう。アイコンの右側もしくは左側に文字を配置する場合、少し余白をとってあげると、文字とアイコンが隣接しすぎないので美しく配置できます。「font-family」と「font-weight」は必須ですので、この指定は必ず行ってください。指定しないと、アイコンが表示されません。普段アイコンを付けるとなると描くのはいいとしても、使用する箇所によって色を変える必要が出てくる場合があります。その時には必要な分だけ画像を用意しなければなりませんでした。CSSを使ってマウスカーソルを乗せる・降ろす時に色やサイズ変えたりという事がむずかしかったのですが、書体になった事で出来なかった事が出来る様になりました。transitionを使って、例えば色を変えたり大きさを変えるなどのアニメーションにも気軽に対応する事もできますね。沢山の画像を用意すると、どのファイルがどのアイコンなのかといった管理が大変でしたがそれもなくなりますし、画像点数が減るので、Webサーバーの容量を若干でも削減する事ができますね。使う事のできるアイコンも時々増えるので、思い通りのアイコンが気軽に使えるFontAwesomeはとても重宝するのではないでしょうか。弊社は、新潟県長岡市を中心に新潟県内全域に対応しております。コンセプト制作プランCONTACTお問い合わせホームページ制作に関するご質問などございましたら、お気軽にお問い合わせください。※ブログ記事に関するご質問はお答えしかねます。お問い合わせはこちらTEL:0258-31-5005FAX:0258-37-7301ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザインホームページ制作・Webデザインを始めとしたITソリューションでお客様のお手伝いをいたします。株式会社アテンドまで。会社案内リクルートFAQお見積り・ご相談お問い合わせリモートサポートソーシャルメディアFacebookFeedlyイイ感じの情報が集まる、アテンドパークシリーズ。ホームページ制作のアテンド|新潟・長岡|SEO・WEBデザイン。