開発者向けのサイトを作るとき、ロゴをところどころから集めるのは大変です。imgはアップロードする手間も掛かりますし、なかなか目当てのロゴが見つからないこともあります。
今回ご紹介する、「Devicon」は、そんな悩みを一掃してくれるCSSかもしれません。
Devicon
Deviconは、あらゆる開発者向けのプログラミング言語、フレームワーク、ソフトウェア、サービスなどのロゴを集めたフォントCSSです。アイコンをクリックすれば、誰でも簡単に自分のサイトにロゴを表示させることができます。
試してみる
Deviconを開くと、右側にロゴのリストがずらりと並びます。「Search for icons」欄で、検索もできるようです。試しに、「javascript」と検索して、アイコンをクリックしてみましょう。
左側に、「Font versions」と、「SVG versions」という欄が出てきます。基本的には、ここに表示されるコードをコピーして、表示したい場所に貼り付ければOKです。
Font versions
「Font versions」を選択した場合は、CSSをヘッダーで読み込む必要がありますが、CDNが用意されていますので、サーバーへの負担は最小限に抑えられます。
フォントファイル自体のサイズは166kbと大きいのですが、ブラウザキャッシュが効きますので、複数のページで利用する場合はお勧めです。
しかし、フォントのため単一色での表現となり、次で紹介するSVG versionsより表現力は劣ります。
SVG versions
反面、「SVG versions」は、CSSを読み込む必要がなく、手軽に単独で描画できますが、SVGの要素すべてが文字列に含まれているため、貼り付けた分だけ通信が増大してしまいます。
SVGによる繊細な描画により、複数の色を使った表現力のある表示ができます。単一ページでしか使わない場合や、ごく少数のロゴを掲載する場合、見た目を重視する場合は、こちらを選択しても良いかもしれません。
ライセンス
ライセンスは、MITライセンスです。説明は割愛させて頂きますが、比較的自由度の高いライセンスで、誰でも無料で制限なく使えます。詳しい条項については、リンク先をお読みください。
まとめ
Web開発者のポートフォリオや、言語、フレームワーク、サービスなどの紹介記事などに使用できるロゴです。非常に簡単に使用できますので、Webページを彩る軽いアクセントとして使えたり、様々な用途に使えます！
逆に、開発者以外には馴染みがありませんが……。ロゴを求めて彷徨う必要がなくなるのはうれしいですね！