【Font Awesome、O-DAN】無料でイケてる画像とフォントアイコンを利用できるサービスを使ってみた

# はじめに
- こんにちはこんばんは。最近参加したBeer bust楽しかったです。
- 今回は、Webサイトを作り時に便利な画像検索サイトと、フォント検索サイトを紹介したいと思います。

# 対象者
- Webサイトで背景などに使用する商用利用可の無料写真素材が欲しい方
- Webサイトで使う、ゴミ箱マークなどのイケてるフォントが欲しい方

# 目次
1. [画像検索] o-danの紹介と使い方
2. [フォント検索] Font Awesomeの紹介と使い方

# 1. [フォント検索] Font Awesomeの紹介と使い方

https://fontawesome.com/

- Font Awesomeとは、無料で利用可能なイケてるアイコンフォントを利用できるサービスです。
- アイコンフォントは、アプリやWebサービスでよく使われている”ゴミ箱マーク”などのことを指します。（例がゴミ箱なのはお許しを


<dl>
<dt>特徴</dt>
<dd>無料でイケてるフォントを使える（有料プランもあり</dd>

<dt>メリット</dt>
<dd>少量のコードを記述するだけで様々なアイコンを使用できる（コピペでいける</dd>
<dd>フォントの種類が豊富で、Web開発に使うフォントはこのサービスで十分レベル</dd>
<dd>使ってる人が多く、日本語で使い方などの参考文献が豊富にある</dd>
</dl>


<strong>使い方</strong>
1. urlにアクセスして、虫眼鏡ボタンを選択
![1.アクセス.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/5f09584b-ff96-ccdb-699f-9b16fa3b1928.png)

2. 探したいフォント名を入力して検索
![2.検索.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/d0e4ad24-987b-3669-2308-9b03d5bf01bb.png)

3. 検索結果から良いなと思ったものを選択しコードをコピーして、エディタに貼り付ける
→&lt;i&gt;タグで埋め込こんだものを（HTML）、例えばbuttonタグの中とかにに貼り付ける。
```Html:例
<button><i class="fa-solid fa-trash"></i></button>
```
![3.ゴミ箱.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/a749c318-4ef3-3d70-6a56-dc8e25586ace.png)
4. CDN（外部サーバー）に接続してデータを取得する（ダウンロードの場合は、ディレクトリに配置するだけ→CDNの方がダウンロードする工数なくなるので手軽です。
https://cdnjs.com/libraries/font-awesome
→「Font Awesome」をブラウザで表示するためにはコアスタイルを読み込ませる必要があるため、cdnのurlをコピーしてheadに貼り付けます。（ダウンロードする方法もあるがここでは、CDNを使う方法を紹介

5\. 上記URLから、最新verのallコードを選択する。選択したコードをHTMLで、headにペーストする。
→allは全データが含まれているため、これ1行で済む
```Html:例
<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/

こんな感じで表示される
![5.ブラウザ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/cb4b195f-bcbe-090b-125b-de75eb6256e9.png)
使用したコード
![4.コード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/b68c9900-a94a-8403-9a1d-3eb03b4de940.png)

- 補足
試してみたい方は、htmlファイルを用意して、VSCodeで開いて、!（ビックリマーク)を入力して Tab を押すと、HTMLのテンプレートでてくるので、それで書き換えて試すのが速いです。


無料かつ、数ステップで、ゴミ箱アイコンをWebで表示できるようにできました！


# 2. [フォント検索] O-DANの紹介と使い方
https://o-dan.net/ja/

- O-DANとは、海外のフリーの画像素材サイトを日本語でまとめて検索できるサービスです。

<bl>
<bt><strong>特徴</strong></bt>
<dd>38サイトから無料写真素材を検索できる(2022年11月時点)</dd>
<dd>商用利用可の無料写真素材のみにチェックを入れることで、Webサイトなどで公開できるイケてる写真素材が手に入る</dd>

<bt><strong>メリット</strong></bt>
<dd>会員登録が不要で、無料で使うことができる</dd>
<dd>→利用するまでの壁がないのは嬉しいですね。</dd>
<dd>写真素材を探す時間を短縮できる</dd>
<dd>→使える写真を探すのって結構手間かかりますよね。そんな時間をなくすことができます。</dd>
<dd>おしゃれで、かっこいい写真など、良質な写真が手に入る</dd>
<dd>海外のサイトだけど日本語に対応している点もありがたい</dd>
</bl>


<strong>使い方</strong>
1. URLにアクセス
![1.URLたたく.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/e5598d96-8f69-8bcf-4351-61ec216e2cba.png)

2. 検索ボックスを選択して、検索したい文字を入力
→検索する時に『商用利用可の無料写真素材のみ』にチェックを入れる
→これによって、商用利用できる写真のみを検索できる
![2.画像検索結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/302cdee6-75d7-67b8-6efc-e03099b7a2f3.png)

3. ダウンロードしたい画像を選択して、右上のダウンロードのプルダウンからサイズを選択してダウンロード
![3.画像ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754596/ec8b8564-ee93-15d9-3209-4bf305a812d2.png)


- 補足
検索結果画面の左側のバーで検索対象サイトを変更して検索することもできます。サイト名を押下することで、各フリー画像を提供しているサイトの検索結果につながります。ちなみに、すでにアクセスしたサイトの名前には打消し線が入るのも、二度手間を消す点で言うと親切な機能だと思います。

数ステップで、簡単に商用利用可なイケてる写真をダウンロードすることができました！


# おわりに
- 今回はO-DANとFont Awesomeについて紹介しました。
- Web開発してると”ゴミ箱マーク欲しいな”とか”イケてる写真欲しいな”とかあると思うので、そんな方にはうってつけのサービスだと感じます。
- ゴミ箱が好きなわけではありません。笑
- それでは！