技術資料

Google FontsのMaterial Symbols 基本設定メモ

作成日:2024.12.10

Google FontsのMaterial Symbols and Iconsの基本的な使い方をまとめた記事です。導入手順や、アイコンとテキストを綺麗に揃えるためのCSS設定例について解説しています。

とても便利なので愛用している Google Fonts の Material Symbols and Iconsの使い方を改めてメモ。

head 要素内でスタイルシート読み込み

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">

CSSを追加

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    font-size: 1rem;
    vertical-align: -3px;
}

Material Symbols and Icons のサイトのサンプルでは、font-variation-settingsのプロパティのみ指定されていますが、font-sizevertical-align も指定しておくと、メニューとかにアイコンとテキストを並べて使ったときに、綺麗に揃って良いと思います。

サンプル

<ul>
    <li><span class="material-symbols-outlined">dashboard</span>ダッシュボード</li>
    <li><span class="material-symbols-outlined">mail</span>お問合せ一覧</li>
    <li><span class="material-symbols-outlined">description</span>記事一覧</li>
    <li><span class="material-symbols-outlined">logout</span>ログアウト</li>
</ul>
  • dashboardダッシュボード
  • mailお問合せ一覧
  • description記事一覧
  • logoutログアウト

この記事を書いた人

※上が私です。

奈良市を拠点に、25年以上の経験を持つフリーランスWebエンジニア、阿部辰也です。

これまで、ECサイトのバックエンド開発や業務効率化システム、公共施設の予約システムなど、多彩なプロジェクトを手がけ、企業様や制作会社様のパートナーとして信頼を築いてまいりました。

【制作会社・企業様向けサポート】
  • 専任エンジニアのいない企業様に対するシステム面の不安を解消
  • 柔軟な契約形態や短納期での対応により、急なニーズにも迅速にサポート
  • システムの企画段階から運用まで、ワンストップでのサービスを提供

Webシステムの開発やサイト改善でお困りの際は、どうぞお気軽にご相談ください。小さな疑問から大規模プロジェクトまで、最適なご提案を心を込めてさせていただきます。

ぜひ、プロフィールWeb制作会社様向け業務案内一般企業様向け業務案内もご覧くださいね。

contenteditableで作るインライン編集システムとデータ送信の仕組み

2024.12.03

contenteditable属性を利用すれば、HTML内のテキストを直接編集できるインターフェースを構築できます。 本記事では、contenteditableを活用したインライン編集機能の実装手法について解説します。 UIの向上を目指す際の参考として。

CSS HTML JavaScript jQuery

datalistとJavaScriptで作るタグ入力フォームの実装ガイド

2024.11.17

ブログやアプリケーションで便利な「タグ入力フォーム」。この記事では、datalist要素を利用して、既存タグの選択と新規タグの追加を同時に実現するUIの作成方法をご紹介します。さらに、JavaScriptとCSSを活用して、複数選択対応やタグ削除機能、Enterキーでのタグ追加機能も実装。タグ入力フォームを効率的かつユーザーフレンドリーにカスタマイズする方法を詳しく解説します。

CSS HTML JavaScript jQuery

Flexbox入門:ボックスを自動配置して均等に並べる方法

2023.04.27

Flexboxの基礎を学びながら、ボックスを均等に並べる方法を実例で紹介します。初心者向けの簡単なコーディング例です。

CSS HTML

CSSで円グラフを作る—conic-gradientを活用する方法

2023.04.04

CSSの conic-gradient() を使って、円グラフを簡単に作成する方法をご紹介します。必要なHTMLとCSSをシンプルに記述するだけで、円グラフを実現できる便利な手法です。グラフの項目数や色を自由に変更できるので、さまざまなデザインに応用可能です。

CSS HTML

阿部辰也へのお仕事の依頼・お問い合わせ

軽いご相談もお気軽にどうぞ!

個人情報の取り扱いについて *必須 プライバシーポリシーをご確認いただき、同意いただける場合は「同意する」にチェックをしてください。

keyboard_double_arrow_up
TOP