Rain技術情報などを不定期で投稿していきます。frontside開発者向けのサイトを作るとき、ロゴをところどころから集めるのは大変です。imgはアップロードする手間も掛かりますし、なかなか目当てのロゴが見つからないこともあります。今回ご紹介する、「Devicon」は、そんな悩みを一掃してくれるCSSかもしれません。まとめDeviconDeviconは、あらゆる開発者向けのプログラミング言語、フレームワーク、ソフトウェア、サービスなどのロゴを集めたフォントCSSです。アイコンをクリックすれば、誰でも簡単に自分のサイトにロゴを表示させることができます。試してみるDeviconを開くと、右側にロゴのリストがずらりと並びます。icons」欄で、検索もできるようです。試しに、「javascript」と検索して、アイコンをクリックしてみましょう。versions」という欄が出てきます。基本的には、ここに表示されるコードをコピーして、表示したい場所に貼り付ければOKです。versions」を選択した場合は、CSSをヘッダーで読み込む必要がありますが、CDNが用意されていますので、サーバーへの負担は最小限に抑えられます。フォントファイル自体のサイズは166kbと大きいのですが、ブラウザキャッシュが効きますので、複数のページで利用する場合はお勧めです。versionsより表現力は劣ります。versions」は、CSSを読み込む必要がなく、手軽に単独で描画できますが、SVGの要素すべてが文字列に含まれているため、貼り付けた分だけ通信が増大してしまいます。SVGによる繊細な描画により、複数の色を使った表現力のある表示ができます。単一ページでしか使わない場合や、ごく少数のロゴを掲載する場合、見た目を重視する場合は、こちらを選択しても良いかもしれません。ライセンスライセンスは、MITライセンスです。説明は割愛させて頂きますが、比較的自由度の高いライセンスで、誰でも無料で制限なく使えます。詳しい条項については、リンク先をお読みください。まとめWeb開発者のポートフォリオや、言語、フレームワーク、サービスなどの紹介記事などに使用できるロゴです。非常に簡単に使用できますので、Webページを彩る軽いアクセントとして使えたり、様々な用途に使えます!逆に、開発者以外には馴染みがありませんが......。chromeでは、アドレスバーが上部に配置されていますが、ページを下にスクロールするとこれが隠れるように設...記事を読むクエリ文字列を整形するツールを作ってみたクエリ文字列を見やすくするツールを作ってみました。...記事を読むユーザーエクスペリエンス/ユーザーインターフェースを考える人間は、体験や経験に価値を見いだす生き物です。優れた体験は、時には大金を払ってでも得たいと思うほど、大きな価値を生み出します。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。