svg

fontawesome5の使い方

  • 2018-02-18  最終更新日:2018-02-20

アイコンフォントで最も有名なfontawesomeですが5になってますます使い勝手が向上しました。推奨はJSを使ったSVGと表示となっております。Webで最も人気のあるアイコンセットをFontAwesomeを使って、ベクターアイコンとソーシャルロゴを表示させてみましょう。

fontawesome5はFree版とPro版があります。Pro版は有償となっておりますが違いとして929のフリーアイコンが使えますがProは1,387個のアイコンが使えます。そして各アイコンのクラスにはRegular,Solid,Light,Brandsという項目に分かれています。

Regular,Solid,Lightは同じアイコンでも太さや形が違っていたりしますがFree版は主にSolidでRegular,LightがPro版というくくりになっています。Brandsはその名の通りブランドやロゴなどがその項目になっております。公式サイトは以下になります。

もっと見る

自作アイコンをSVGでの表示方法

  • 2018-02-13  最終更新日:2018-02-13

そもそもSVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)で、拡大縮小、変形してもキレイなままでぼやけず荒れないXMLベースの画像のことです。Web上でSVGを使って表現することが出来ます。イラストレータのデータも同じベクターデータです。

最近はアイコンフォントよりもSVG化が主流になりつつあります。アイコンフォントは、元々はテキスト表示を改造してアイコンを表現していた物でしたが最近は直接アイコンを描画するSVG化に流れが向いています。

有名なアイコンフォントFont Awesomeもバージョンが5になってJSを使って描画していますがSVG推奨となっています。もちろん以前のアイコンフォントとしても使えます。

さて今回はオリジナルのアイコンを作ってSVGで表示させてみたいと思います。HTML版とWordPress版の2つのバージョンでお届け致します。

もっと見る

anime.jsの使い方

  • 2017-02-18  最終更新日:2017-02-18

今回はオブジェクトに動きを加えたり、ちょっとしたアニメーションを付け加えるのにとっても役立つアニメーションライブラリのご紹介です。

anime.jsはとっても軽量でかつ簡単に使えるので去年あたりから人気が出始めているライブラリです。jQuery依存もしていませんのでこのライブラリだけ読み込めばOKです。

⇒anime.js公式サイト

ブラウザサポートはChrome、Safari、Opera、Firefox、IE 10+ですのでモダンブラウザは大丈夫です。

もっと見る

有名企業ロゴを探せるサイト

  • 2016-07-19  最終更新日:2016-07-19

各有名企業のロゴや国旗などもありますのでダウンロードできて活用することができます。

SVG形式なのでイラストレータで開いて使うことも可能です。

ロゴデザインの参考になるかと思います。

サイトはこちらから⇒Instant Logo Search

もっと見る

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
Bootstrap4でフォーム入力の際にカレンダーから日付入力する方法

最近はメインでのコーディングはBootstrap4に移行しておりますがいろいろと3の時に使えたものが使えなかったりとしております。 DatetimePickerなどもそうですね。私個人的には4に...

18 Feb 2019

アイキャッチ
HomebrewでMySQL8をインストールした時の問題点

さて、今回はお手軽にMySQL8をインストールしたときの問題点などをご紹介します。MacOS用パッケージマネージャーHomebrewを使ってインストール、そしてphpからアクセスしたときの問題点...

13 Feb 2019

アイキャッチ
ローカル環境を外部アクセス可能にする方法

さて、今回はお手軽テストサーバ構築のお助けngrok (エングロック)をご紹介します。どういうサービスかといいますと自分のローカル環境を外部アクセスで確認できるサービスになります。 本来は自分...

04 Feb 2019

アイキャッチ
複数のwebサービスを一元管理するアプリStationのご紹介

さて今回はwebサービスの一元管理アプリのご紹介です。よく使うサービスをまとめて管理できるアプリです。 以前Franzというアプリをご紹介しましたが(結局Franzは不安定状態になってそれから...

22 Jan 2019

アイキャッチ
島根県安来市の清水寺の展望台は絶景スポット

先日清水寺にお参りに行って参りましたが春にはとても良いスポットがありましたのでご紹介します。山の上になるのですが見渡せる場所はどちらかといえば弓ヶ浜半島、米子市の方面を一望できます。王子製紙の場...

21 Jan 2019

著者

ウェブエンジニアの須山のブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

フッターイメージ