このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
-
#01 マテリアルアイコンを使ってみよう (02:45)
- 公式サイト
- アイコンの使い方
-
#02 学習の準備を整えよう (01:40)
- プロジェクトフォルダの設定
- index.htmlの作成
-
#03 マテリアルアイコンを読み込んでいこう (01:58)
- linkタグの設定
- styles.cssの作成
-
#04 アイコンのスタイルを変更しよう (02:26)
- アイコンの配置
- アイコンのスタイリング
-
#05 チェックボックスを配置してみよう (02:38)
- チェックボックスの配置
- 動作確認
-
#06 背景色に応じたスタイルを付けてみよう (01:37)
- md-dark
- md-light
- md-inactive
#01 マテリアルアイコンを使ってみよう
補足情報 必要となる知識について
このレッスンでは、以下のレッスンで紹介した内容をベースにしています。わからない点があった場合は、こちらも参考にしてみてください。
https://dotinstall.com/lessons/basic_html_tags_v2
https://dotinstall.com/lessons/basic_css_styles_v2
#04 アイコンのスタイルを変更しよう
補足情報 Material Iconsを使う方法
Material IconsはGoogle Fontsに移管されたようです（2025年1月現在）。
導入方法としては、
https://developers.google.com/fonts/docs/material_symbols#static_font_with_google_fonts
にあるとおり、
を読み込んだあとに、
https://fonts.google.com/icons
からアイコンを検索し、そこに出てくるコードを以下のように貼り付ければOKです。