他の人が書いた「リセットCSS」? - HTML / CSS を極めるコーナー
「CSS入門 入れ子編」のミニクイズをリリースしました
あなただけの学習ロードマップを作成します 【随時受付中】
このレッスンでは、以下のレッスンで紹介した内容をベースにしています。わからない点があった場合は、こちらも参考にしてみてください。
Material IconsはGoogle Fontsに移管されたようです(2025年1月現在)。
導入方法としては、
https://developers.google.com/fonts/docs/material_symbols#static_font_with_google_fonts
にあるとおり、
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
を読み込んだあとに、
https://fonts.google.com/icons
からアイコンを検索し、そこに出てくるコードを以下のように貼り付ければOKです。
<span class="material-symbols-outlined">search</span> <span class="material-symbols-outlined">home</span> <span class="material-symbols-outlined">settings</span> <span class="material-symbols-outlined">favorite</span>
#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です。