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

この章では、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_horizontal </ i>	border_horizontal
<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>	テキストを折り返す