【アーカイブレッスン】このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
動画の読み込みに失敗しました。しばらく待ってからリロードしてみてください。解決しない場合は ヘルプ「動画が見られない場合について」 もご覧ください。
Play
Current Time 0:00
/
Duration Time 0:00
Remaining Time -0:00
Stream TypeLIVE
Loaded: 0%
Progress: 0%
0:00
00:00
Mute
Playback Rate
    1
    Subtitles
    • subtitles off
    Captions
    • captions off
    Chapters
    • Chapters
    シアター
    • シアター
    • ピクチャ
    • 全画面
    x1.0
    • プレミアム会員になると動画の速度を変更できます
    男性ボイス
    • プレミアム会員になると講義音声を切り替えられます
    HD
    Loaded: 0%
    Progress: 0%
    0:00
    The video could not be loaded, either because the server or network failed or because the format is not supported.
    この動画には 1 件の補足情報があります。
    さて、マテリアルアイコンを使う準備ができたので、早速使ってみましょう。
    では、スマートフォン用のページを作っていたとして、ハンバーガーメニューのアイコンが欲しかったとします。

    文字起こしはプレミアムプラン向けの機能です

    詳しくみる

    アイコンを配置したあとに、スタイルを変更していく方法を見ていきます。

    • アイコンの配置
    • アイコンのスタイリング
    2025年1月24日

    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>

    このレッスンの問題を報告する

    この動画に関する質問と回答はありません。

    素材ファイルをダウンロードするにはプレミアムプランへの登録が必要です

    詳しくみる

    ソースコードを閲覧するにはプレミアムプランへの登録が必要です

    詳しくみる

    このレッスンの問題を報告する

    デモを閲覧するにはプレミアムプランへの登録が必要です

    詳しくみる