【Google】が提供する「Material Icons(マテリアルアイコン)」って何?使い方・手順を徹底解説!

プログラミング

みなさんこんにちは!おさかなです!

今回は「Material Icons(マテリアルアイコン)」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・手軽にアイコンを使用したい方
・Web制作・デザインなどに関わる方
・HTML/CSSを学習中の方

「Material Icons(マテリアルアイコン)」とは?

「Google」が運営している「Material Design(マテリアルデザイン)に対応した、アイコンを提供しているサービスです!

SVG」や「PNG」で保存したり、Webサイトなどの「アイコン」にも利用できます!

全15カテゴリ、750種類以上の様々なデザインで、どんな場面でも大活躍すること間違いなし!です!

おさかな
おさかな

すごく便利~!

 

導入方法!

それでは早速「Material Icons(マテリアルアイコン)」を導入していきましょう!

下記コードをコピーして「HTMLファイル」の<head>内に貼り付けるだけ!

(とっても簡単~!)

実際に使ってみよう!

それでは、実際に「アイコン」を使っていきましょう!

まずは、「Material Icons(マテリアルアイコン)」の公式サイトにアクセスします!

すると、このようなページが表示されます!

このページを「下にスクロール」していくと!「アイコン一覧」が出てきます!

この中から、「使用したいアイコン」を「クリック」します!

するとこのように左下に「Selected Icon」と「SVG24」というものが表示されたと思います…!

ここからはご自身の使用用途に合わせて、手順が少しずつ変わってくるので、順番に説明していきます…!

SVG

SVG24」をクリックすると、SVG形式で保存することができます!

また、「Selected Icon」をクリックして「SVG」という青いボタンからでも保存可能です!

 

PNG

PNGの場合もSVGとほとんど同じで、「Selected Icon」をクリックして「SVG」という青いボタンを押します!

zip」形式で保存されるので、「すべて展開」して使用します!

サイズの違う「2パターン」を保存することができます!

 

 

アイコンフォント

アイコンフォントの場合は、まず「Selected Icon」をクリックして、表示された画面を「スクロール」してください!

すると、こんな感じの「Icon font」という項目が出てきます。

赤枠の「中身のコード」を解説していきます!

最新版のブラウザを利用している人はコチラのコードを「コピー」して、アイコンを設置したい場所に貼り付けます!(<body>の中に入れてください!)

E9以下のブラウザを利用している方はコチラのコードを「コピー」して同じように使用してください!

 

これで無事に、「Material Icons(マテリアルアイコン)」を設置することができました!

最初は慣れないかもしれませんが、何度か利用していくうちに一連の流れを把握することができるようになるので、大丈夫です!

おさかな
おさかな

わからなくなったら、いつでも「おさかなび」で「確認」出来るから安心してね!

おつかれさまでした🍞

 

 

【Font Awesome】の使い方・始め方の手順をわかりやすく解説!
【Font Awesome】というサービスを使って、「アイコン」の使い方をわかりやすく解説!1つ1つの工程に画像付きだから、この記事だけでわかっちゃう!初心者や、HTML/CSSを勉強中の人でも安心!「おさかなび-osakanav-」では、「デジタル時代を楽しむためのミニ知識」をご紹介しています!ゆるいイラストが目印!

感想・まとめ

今回は「Material Icons(マテリアルアイコン)」について、書いていきました…!

いかがだったでしょうか?

Webサイトのデザインをするときに、「アイコン」を使う場面はたくさんあるので使えるようにしておくとかなり便利だと思います…!

積極的に使用して、ステキなWebサイトを作ってみてください!
(おさかなも、使ってみようと思います~!)

おさかなびではプログラミング学習中の人、ブログ初心者に向けて、「デジタル時代を楽しむためのミニ知識」をご紹介しています!
ぜひ他のページも覗いてみてください…!

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

タイトルとURLをコピーしました