はじめに
- こんにちはこんばんは。最近参加したBeer bust楽しかったです。
- 今回は、Webサイトを作り時に便利な画像検索サイトと、フォント検索サイトを紹介したいと思います。
対象者
- Webサイトで背景などに使用する商用利用可の無料写真素材が欲しい方
- Webサイトで使う、ゴミ箱マークなどのイケてるフォントが欲しい方
目次
- [画像検索] o-danの紹介と使い方
- [フォント検索] Font Awesomeの紹介と使い方
1. [フォント検索] Font Awesomeの紹介と使い方
- Font Awesomeとは、無料で利用可能なイケてるアイコンフォントを利用できるサービスです。
- アイコンフォントは、アプリやWebサービスでよく使われている”ゴミ箱マーク”などのことを指します。（例がゴミ箱なのはお許しを
- 特徴
- 無料でイケてるフォントを使える（有料プランもあり
- メリット
- 少量のコードを記述するだけで様々なアイコンを使用できる（コピペでいける
- フォントの種類が豊富で、Web開発に使うフォントはこのサービスで十分レベル
- 使ってる人が多く、日本語で使い方などの参考文献が豊富にある
使い方
-
urlにアクセスして、虫眼鏡ボタンを選択
-
探したいフォント名を入力して検索
-
検索結果から良いなと思ったものを選択しコードをコピーして、エディタに貼り付ける
→<i>タグで埋め込こんだものを（HTML）、例えばbuttonタグの中とかにに貼り付ける。
<button><i class="fa-solid fa-trash"></i></button>
4. CDN（外部サーバー）に接続してデータを取得する（ダウンロードの場合は、ディレクトリに配置するだけ→CDNの方がダウンロードする工数なくなるので手軽です。
https://cdnjs.com/libraries/font-awesome
→「Font Awesome」をブラウザで表示するためにはコアスタイルを読み込ませる必要があるため、cdnのurlをコピーしてheadに貼り付けます。（ダウンロードする方法もあるがここでは、CDNを使う方法を紹介
5. 上記URLから、最新verのallコードを選択する。選択したコードをHTMLで、headにペーストする。
→allは全データが含まれているため、これ1行で済む
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
→CDNを使う際に参考になるサイト
https://notes-de-design.com/website/tool/use-cdn-download-fontawesome/
こんな感じで表示される
使用したコード
- 補足
試してみたい方は、htmlファイルを用意して、VSCodeで開いて、!（ビックリマーク)を入力して Tab を押すと、HTMLのテンプレートでてくるので、それで書き換えて試すのが速いです。
無料かつ、数ステップで、ゴミ箱アイコンをWebで表示できるようにできました！
2. [フォント検索] O-DANの紹介と使い方
- O-DANとは、海外のフリーの画像素材サイトを日本語でまとめて検索できるサービスです。
メリット
使い方
-
URLにアクセス
-
検索ボックスを選択して、検索したい文字を入力
→検索する時に『商用利用可の無料写真素材のみ』にチェックを入れる
→これによって、商用利用できる写真のみを検索できる
-
ダウンロードしたい画像を選択して、右上のダウンロードのプルダウンからサイズを選択してダウンロード
- 補足
検索結果画面の左側のバーで検索対象サイトを変更して検索することもできます。サイト名を押下することで、各フリー画像を提供しているサイトの検索結果につながります。ちなみに、すでにアクセスしたサイトの名前には打消し線が入るのも、二度手間を消す点で言うと親切な機能だと思います。
数ステップで、簡単に商用利用可なイケてる写真をダウンロードすることができました！
おわりに
- 今回はO-DANとFont Awesomeについて紹介しました。
- Web開発してると”ゴミ箱マーク欲しいな”とか”イケてる写真欲しいな”とかあると思うので、そんな方にはうってつけのサービスだと感じます。
- ゴミ箱が好きなわけではありません。笑
- それでは！