CSS HTML Javascript

マテリアルアイコンを使う

マテリアルアイコンを導入するための方法を説明していきます。

  • マテリアルアイコンの導入
  • menuアイコンの作成
  • closeアイコンの作成

マテリアルアイコンの導入

・マテリアルアイコンとはグーグルが用意している自由に使うことができるアイコンのことです。

・画像データではなくCSSで簡単にいじることもできるwebデザイナー必見のアイコンです。無料で簡単に使うことができる上に軽量なので使い勝手はとてもいいでしょう。ではどのように使うことができるのかを見ていきます。

・今回はメーニューバーっぽいアイコンとメニューバーを閉じるためのばつ印のアイコンを探していきます。

・まずグーグルの検索バーで『material icons guide』と検索します。だいたいトップに出てきますが『Material Icons Guide - Google Design - Google · GitHub』というサイトを開きましょう。

 

・サイトにアクセスできたらcontentsというメニューがあるのでその中の『Icon fonts for the web』のリンクをクリックしUsing via Google Web Fontsの欄にあるlinkタグをコピーし今書いているindex.htmlのheadの中にそのlinkタグを貼り付けましょう。

・あとはアイコンをリンクを使いたい箇所に貼り付けて行けばいいのでアイコンを探しに行きましょう。

・このリンクは共通なのでメモをしておいてどこかに保管しておくと便利です。

・当記事筆者もiphoneのメモ機能にこのコードは貼り付けてあり、使いたいときにコピーしてすぐ使えるようにしてあります。

menuアイコンの作成

・『Material Icons Guide - Google Design - Google · GitHub』のトップに戻ったら今度は『Material Icons Library』をクリックしていきましょう。

・するとページが遷移して『googleFonts』になります。

・検索バーで『menu』と検索してみましょう。このときgoogleの翻訳をしてしまうとうまく行かない場合があるので英語のまま使うほうがいいでしょう。

・アイコンが検索でヒットすると思うのでspanタグで囲まれたリンクをコピーして貼り付けると使うことができます。

・今回はとりあえずbodyタグの中に貼り付けます。

closeアイコンの作成

・同様に検索バーで『close』と検索するとばつ印のアイコンが引っかかると思います。

・リンクをコピーしてこちらもbodyタグの中に貼り付けておきます。

・ブラウザで確認してアイコンが表示されていればおkです。

googlefontsはよく使うのでブックマークしておくと便利です。

-CSS, HTML, Javascript