素材-エディターアイコン

この章では、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"> attach_file </ i> ファイルを添付する
<i class = "material-icons custom"> attach_money </ i> attach_money
<i class = "material-icons custom"> border_all </ i> border_all
<i class = "material-icons custom"> border_bottom </ i> border_bottom
<i class = "material-icons custom"> border_clear </ i> border_clear
<i class = "material-icons custom"> border_color </ i> ボーダの色
<i class = "material-icons custom"> border_horizo​​ntal </ i> border_horizo​​ntal
<i class = "material-icons custom"> border_inner </ i> border_inner
<i class = "material-icons custom"> border_left </ i> border_left
<i class = "material-icons custom"> border_outer </ i> border_outer
<i class = "material-icons custom"> border_right </ i> border_right
<i class = "material-icons custom"> border_style </ i> ボーダースタイル
<i class = "material-icons custom"> border_top </ i> border_top
<i class = "material-icons custom"> border_vertical </ i> border_vertical
<i class = "material-icons custom"> format_align_center </ i> format_align_center
<i class = "material-icons custom"> format_align_justify </ i> format_align_justify
<i class = "material-icons custom"> format_align_left </ i> format_align_left
<i class = "material-icons custom"> format_align_right </ i> format_align_right
<i class = "material-icons custom"> format_bold </ i> format_bold
<i class = "material-icons custom"> format_clear </ i> format_clear
<i class = "material-icons custom"> format_color_fill </ i> format_color_fill
<i class = "material-icons custom"> format_color_reset </ i> format_color_reset
<i class = "material-icons custom"> format_color_text </ i> format_color_text
<i class = "material-icons custom"> format_indent_decrease </ i> format_indent_decrease
<i class = "material-icons custom"> format_indent_increase </ i> format_indent_increase
<i class = "material-icons custom"> format_italic </ i> format_italic
<i class = "material-icons custom"> format_line_spacing </ i> format_line_spacing
<i class = "material-icons custom"> format_list_bulleted </ i> format_list_bulleted
<i class = "material-icons custom"> format_list_numbered </ i> format_list_numbered
<i class = "material-icons custom"> format_paint </ i> format_paint
<i class = "material-icons custom"> format_quote </ i> format_quote
<i class = "material-icons custom"> format_size </ i> format_size
<i class = "material-icons custom"> format_strikethrough </ i> format_strikethrough
<i class = "material-icons custom"> format_textdirection_l_to_r </ i> format_textdirection_l_to_r
<i class = "material-icons custom"> format_textdirection_r_to_l </ i> format_textdirection_r_to_l
<i class = "material-icons custom"> format_underline </ i> format_underline
<iclass = "material-iconscustom">関数</ i> 関数
<i class = "material-icons custom"> insert_chart </ i> insert_chart
<i class = "material-icons custom"> insert_comment </ i> insert_comment
<i class = "material-icons custom"> insert_drive_file </ i> insert_drive_file
<i class = "material-icons custom"> insert_emoticon </ i> insert_emoticon
<i class = "material-icons custom"> insert_invitation </ i> insert_invitation
<i class = "material-icons custom"> insert_link </ i> insert_link
<i class = "material-icons custom"> insert_photo </ i> insert_photo
<i class = "material-icons custom"> merge_type </ i> merge_type
<i class = "material-icons custom"> mode_comment </ i> mode_comment
<i class = "material-icons custom"> mode_edit </ i> mode_edit
<i class = "material-icons custom"> money_off </ i> money_off
<iclass = "material-iconscustom">公開</ i> 公開する
<i class = "material-icons custom"> space_bar </ i> スペースキー
<i class = "material-iconscustom">取り消し線</ i> 取り消し線
<i class = "material-icons custom"> vertical_align_bottom </ i> vertical_align_bottom
<i class = "material-icons custom"> vertical_align_center </ i> vertical_align_center
<i class = "material-icons custom"> vertical_align_top </ i> vertical_align_top
<i class = "material-icons custom"> wrap_text </ i> テキストを折り返す