みなさんこんにちは！おさかなです！
今回は「Material Icons(マテリアルアイコン)」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・手軽にアイコンを使用したい方
・Web制作・デザインなどに関わる方
・HTML/CSSを学習中の方
「Material Icons(マテリアルアイコン)」とは？
「Google」が運営している「Material Design(マテリアルデザイン)」に対応した、アイコンを提供しているサービスです！
「SVG」や「PNG」で保存したり、Webサイトなどの「アイコン」にも利用できます！
全15カテゴリ、750種類以上の様々なデザインで、どんな場面でも大活躍すること間違いなし！です！
すごく便利～！
導入方法！
それでは早速「Material Icons(マテリアルアイコン)」を導入していきましょう！
下記コードをコピーして「HTMLファイル」の<head>内に貼り付けるだけ！
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
(とっても簡単～！)
実際に使ってみよう！
それでは、実際に「アイコン」を使っていきましょう！
まずは、「Material Icons(マテリアルアイコン)」の公式サイトにアクセスします！
すると、このようなページが表示されます！
このページを「下にスクロール」していくと！「アイコン一覧」が出てきます！
この中から、「使用したいアイコン」を「クリック」します！
するとこのように左下に「Selected Icon」と「SVG24」というものが表示されたと思います…！
ここからはご自身の使用用途に合わせて、手順が少しずつ変わってくるので、順番に説明していきます…！
SVG
「SVG24」をクリックすると、SVG形式で保存することができます！
また、「Selected Icon」をクリックして「SVG」という青いボタンからでも保存可能です！
PNG
PNGの場合もSVGとほとんど同じで、「Selected Icon」をクリックして「SVG」という青いボタンを押します！
「zip」形式で保存されるので、「すべて展開」して使用します！
サイズの違う「2パターン」を保存することができます！
アイコンフォント
アイコンフォントの場合は、まず「Selected Icon」をクリックして、表示された画面を「スクロール」してください！
すると、こんな感じの「Icon font」という項目が出てきます。
赤枠の「中身のコード」を解説していきます！
最新版のブラウザを利用している人はコチラのコードを「コピー」して、アイコンを設置したい場所に貼り付けます！(<body>の中に入れてください！)
<i class="material-icons">account_circle</i>
E9以下のブラウザを利用している方はコチラのコードを「コピー」して同じように使用してください！
<i class="material-icons">account_circle</i>
これで無事に、「Material Icons(マテリアルアイコン)」を設置することができました！
最初は慣れないかもしれませんが、何度か利用していくうちに一連の流れを把握することができるようになるので、大丈夫です！
わからなくなったら、いつでも「おさかなび」で「確認」出来るから安心してね！
おつかれさまでした🍞
感想・まとめ
今回は「Material Icons(マテリアルアイコン)」について、書いていきました…！
いかがだったでしょうか？
Webサイトのデザインをするときに、「アイコン」を使う場面はたくさんあるので使えるようにしておくとかなり便利だと思います…！
積極的に使用して、ステキなWebサイトを作ってみてください！
(おさかなも、使ってみようと思います～！)
おさかなびではプログラミング学習中の人、ブログ初心者に向けて、「デジタル時代を楽しむためのミニ知識」をご紹介しています！
ぜひ他のページも覗いてみてください…！
それでは今回はこの辺で！
ここまで読んでくださり、ありがとうございました！
おさかなでした！
【おさかなび-osakanav-】では、この記事の感想！おさかなへの応援メッセージ！おさかなに聞きたい事、質問！記事にしてほしい内容！などを大募集中！
「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください！
