素材-画像アイコン

この章では、Googleの（素材）画像アイコンの使用法について説明します。と仮定するcustom 以下の例に示すように、サイズと色を定義したCSSクラス名です。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

次の表に、Googleの（素材）画像アイコンの使用法と結果を示します。上記のプログラムの<body>タグを表に示されているコードに置き換えて、それぞれの出力を取得します-

使用法 結果
<i class = "material-icons custom"> add_to_photos </ i> add_to_photos
<iclass = "material-iconscustom">調整</ i> 調整する
<iclass = "material-iconscustom">アシスタント</ i> アシスタント
<iclass = "material-iconscustom">アシスタント</ i> アシスタント
<i class = "material-iconscustom">オーディオトラック</ i> オーディオトラック
<i class = "material-icons custom"> blur_circular </ i> Blur_circular
<i class = "material-icons custom"> blur_linear </ i> Blur_linear
<i class = "material-icons custom"> blur_off </ i> Blur_off
<i class = "material-icons custom"> blur_on </ i> Blur_on
<i class = "material-iconscustom">明るさ_1 </ i> 明るさ_1
<i class = "material-iconscustom">明るさ_2 </ i> 明るさ_2
<i class = "material-iconscustom">明るさ_3 </ i> 明るさ_3
<i class = "material-icons custom"> brightness_4 </ i> 明るさ_4
<i class = "material-icons custom"> brightness_5 </ i> 明るさ_5
<i class = "material-icons custom"> brightness_6 </ i> 明るさ_6
<i class = "material-icons custom"> brightness_7 </ i> 明るさ_7
<i class = "material-iconscustom">壊れた画像</ i> 壊れた画像
<iclass = "material-iconscustom">ブラシ</ i> みがきます
<iclass = "material-iconscustom">カメラ</ i> カメラ
<i class = "material-icons custom"> camera_alt </ i> camera_alt
<i class = "material-icons custom"> camera_front </ i> camera_front
<i class = "material-icons custom"> camera_rear </ i> camera_rear
<i class = "material-icons custom"> camera_roll </ i> カメラロール
<i class = "material-icons custom"> center_focus_strong </ i> center_focus_strong
<i class = "material-icons custom"> center_focus_weak </ i> center_focus_weak
<iclass = "material-iconscustom">コレクション</ i> コレクション
<i class = "material-icons custom"> collections_bookmark </ i> collections_bookmark
<i class = "material-icons custom"> color_lens </ i> color_lens
<iclass = "material-iconscustom">色付け</ i> 色付け
<iclass = "material-iconscustom">比較</ i> 比較する
<i class = "material-icons custom"> control_point </ i> control_point
<i class = "material-icons custom"> control_point_duplicate </ i> control_point_duplicate
<iclass = "material-iconscustom">切り抜き</ i> 作物
<i class = "material-icons custom"> Crop_16_9 </ i> Crop_16_9
<i class = "material-icons custom"> Crop_3_2 </ i> Crop_3_2
<i class = "material-icons custom"> Crop_5_4 </ i> Crop_5_4
<i class = "material-icons custom"> Crop_7_5 </ i> Crop_7_5
<i class = "material-icons custom"> Crop_din </ i> Crop_din
<i class = "material-icons custom"> Crop_free </ i> Crop_free
<i class = "material-icons custom"> Crop_landscape </ i> Crop_landscape
<i class = "material-icons custom"> Crop_original </ i> Crop_original
<i class = "material-icons custom"> Crop_portrait </ i> Crop_portrait
<i class = "material-icons custom"> Crop_square </ i> Crop_square
<i class = "material-iconscustom">デヘイズ</ i> デヘイズ
<iclass = "material-iconscustom">詳細</​​ i> 詳細
<iclass = "material-iconscustom">編集</ i> 編集
<iclass = "material-iconscustom">露出</ i> 曝露
<i class = "material-icons custom"> Exposure_neg_1 </ i> Exposure_neg_1
<i class = "material-icons custom"> Exposure_plus_1 </ i> Exposure_plus_1
<i class = "material-icons custom"> export_plus_2 </ i> Exposure_plus_2
<i class = "material-icons custom"> Exposure_zero </ i> Exposure_zero
<iclass = "material-iconscustom">フィルター</ i> フィルタ
<i class = "material-icons custom"> filter_1 </ i> filter_1
<i class = "material-icons custom"> filter_2 </ i> filter_2
<i class = "material-icons custom"> filter_3 </ i> filter_3
<i class = "material-icons custom"> filter_4 </ i> filter_4
<i class = "material-icons custom"> filter_5 </ i> filter_5
<i class = "material-icons custom"> filter_6 </ i> filter_6
<i class = "material-icons custom"> filter_7 </ i> filter_7
<i class = "material-icons custom"> filter_8 </ i> filter_8
<i class = "material-icons custom"> filter_9 </ i> filter_9
<i class = "material-icons custom"> filter_9_plus </ i> filter_9_plus
<i class = "material-icons custom"> filter_b_and_w </ i> filter_b_and_w
<i class = "material-icons custom"> filter_center_focus </ i> filter_center_focus
<i class = "material-icons custom"> filter_drama </ i> filter_drama
<i class = "material-icons custom"> filter_frames </ i> filter_frames
<i class = "material-icons custom"> filter_hdr </ i> filter_hdr
<i class = "material-icons custom"> filter_none </ i> filter_none
<i class = "material-icons custom"> filter_tilt_shift </ i> filter_tilt_shift
<i class = "material-icons custom"> filter_vintage </ i> filter_vintage
<iclass = "material-iconscustom">フレア</ i> フレア
<i class = "material-icons custom"> flash_auto </ i> flash_auto
<i class = "material-icons custom"> flash_off </ i> flash_off
<i class = "material-icons custom"> flash_on </ i> flash_on
<iclass = "material-iconscustom">フリップ</ i> フリップ
<iclass = "material-iconscustom">グラデーション</ i> 勾配
<iclass = "material-iconscustom">グレイン</ i> 粒
<i class = "material-icons custom"> grid_off </ i> grid_off
<i class = "material-icons custom"> grid_on </ i> grid_on
<i class = "material-icons custom"> hdr_off </ i> hdr_off
<i class = "material-icons custom"> hdr_on </ i> hdr_on
<i class = "material-icons custom"> hdr_strong </ i> hdr_strong
<i class = "material-icons custom"> hdr_weak </ i> hdr_weak
<iclass = "material-iconscustom">修復</ i> 治癒
<iclass = "material-iconscustom">画像</ i> 画像
<i class = "material-icons custom"> image_aspect_ratio </ i> image_aspect_ratio
<i class = "material-icons custom"> iso </ i> iso
<iclass = "material-iconscustom">風景</ i> 風景
<i class = "material-icons custom"> Leak_add </ i> Leak_add
<i class = "material-icons custom"> Leak_remove </ i> Leak_remove
<iclass = "material-iconscustom">レンズ</ i> レンズ
<iclass = "material-iconscustom">見た目</ i> 見える
<i class = "material-icons custom"> lookup_3 </ i> lookup_3
<i class = "material-icons custom"> lookup_4 </ i> lookup_4
<i class = "material-icons custom"> lookup_5 </ i> lookup_5
<i class = "material-icons custom"> lookup_6 </ i> lookup_6
<i class = "material-icons custom"> lookups_one </ i> lookup_one
<i class = "material-icons custom"> lookup_two </ i> lookup_two
<iclass = "material-iconscustom">ルーペ</ i> ルーペ
<i class = "material-icons custom"> monochrome_photos </ i> モノクロ写真
<i class = "material-icons custom"> movie_creation </ i> movie_creation
<i class = "material-icons custom"> music_note </ i> 音符
<iclass = "material-iconscustom">自然</ i> 自然
<i class = "material-icons custom"> nature_people </ i> nature_people
<i class = "material-icons custom"> wb_sunny </ i> wb_sunny
<i class = "material-icons custom"> navigate_next </ i> ナビゲート_次
<i class = "material-icons custom"> navigate_before </ i> ナビゲートする前
<iclass = "material-iconscustom">パレット</ i> パレット
<iclass = "material-iconscustom">パノラマ</ i> パノラマ
<i class = "material-icons custom"> panorama_fish_eye </ i> panorama_fish_eye
<i class = "material-icons custom"> panorama_horizo​​ntal </ i> panorama_horizo​​ntal
<iclass = "material-iconscustom">パノラマ_バーティカル</ i> panorama_vertical
<i class = "material-icons custom">パノラマ_ワイドアングル</ i> panorama_wide_angle
<iclass = "material-iconscustom">写真</ i> 写真
<i class = "material-icons custom"> photo_album </ i> フォトアルバム
<i class = "material-icons custom"> photo_camera </ i> カメラ
<i class = "material-icons custom"> photo_library </ i> photo_library
<i class = "material-icons custom"> photo_size_select_actual </ i> photo_size_select_actual
<i class = "material-icons custom"> photo_size_select_large </ i> photo_size_select_large
<i class = "material-icons custom"> photo_size_select_small </ i> photo_size_select_small
<i class = "material-icons custom"> picture_as_pdf </ i> picture_as_pdf
<iclass = "material-iconscustom">ポートレート</ i> 肖像画
<i class = "material-icons custom"> remove_red_eye </ i> remove_red_eye
<i class = "material-icons custom"> rotate_90_degrees_ccw </ i> 回転_90_degrees_ccw
<i class = "material-icons custom"> Rotate_left </ i> 左に回転
<i class = "material-icons custom"> rotate_right </ i> 右に回る
<iclass = "material-iconscustom">スライドショー</ i> スライドショー
<iclass = "material-iconscustom">まっすぐにする</ i> まっすぐにする
<iclass = "material-iconscustom">スタイル</ i> スタイル
<i class = "material-icons custom"> switch_camera </ i> switch_camera
<i class = "material-icons custom"> switch_video </ i> switch_video
<i class = "material-icons custom"> tag_faces </ i> tag_faces
<iclass = "material-iconscustom">テクスチャ</ i> テクスチャ
<iclass = "material-iconscustom">タイムラプス</ i> タイムラプス
<iclass = "material-iconscustom">タイマー</ i> タイマー
<i class = "material-icons custom"> timer_10 </ i> timer_10
<i class = "material-icons custom"> timer_3 </ i> timer_3
<i class = "material-icons custom"> timer_off </ i> timer_off
<iclass = "material-iconscustom">調性</ i> 調性
<iclass = "material-iconscustom">変換</ i> 変換
<iclass = "material-iconscustom">調整</ i> 曲
<i class = "material-icons custom"> view_comfy </ i> view_comfy
<i class = "material-icons custom"> view_compact </ i> view_compact
<iclass = "material-iconscustom">ビネット</ i> ビネット
<i class = "material-icons custom"> wb_auto </ i> wb_auto
<i class = "material-icons custom"> wb_cloudy </ i> wb_cloudy
<i class = "material-icons custom"> wb_incandescent </ i> wb_incandescent
<i class = "material-icons custom"> wb_iridescent </ i> wb_iridescent
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2025 | All Rights Reserved