#021 Bone Shape TTF / WebFont 使用サンプル(83種類)

既存40種類+仕様書用UIパーツ43種類。実動作UIではなく、仕様書・説明図で使うモノクロームのフォント図形です。

フォントは1色のため、Light/Dark/NeonはCSSの文字色で変化します。多色のUI仕様図はSVG Shapeを使用してください。

使用方法(ローカル配信)

CSSを読み込み、対応するUnicodeの文字をspanで表示します。LABEL_UIは U+E053 です。

<link rel="stylesheet" href="../css/bone-shape-font.css">
<span class="bf-shape-font" aria-hidden="true">&#xE053;</span>  <!-- LABEL_UI -->

外部CDN・クエリ文字列は不要。TTFはWindows等へのインストールにも利用でき、WebページではWOFF2を優先読み込みします。

表示例(6種類)

START
開始
<span class="bf-shape-font" aria-hidden="true">&#xE001;</span>
LABEL_UI
ラベル
<span class="bf-shape-font" aria-hidden="true">&#xE053;</span>
BUTTON_RECT
ボタン
<span class="bf-shape-font" aria-hidden="true">&#xE02E;</span>
CALENDAR_MONTH
月カレンダー
<span class="bf-shape-font" aria-hidden="true">&#xE039;</span>
TIMELINE_BAR
タイムバー
<span class="bf-shape-font" aria-hidden="true">&#xE045;</span>
COLOR_PICKER_UI
ColorPicker
<span class="bf-shape-font" aria-hidden="true">&#xE04F;</span>

全83種類(旧40+新43)

開始STARTU+E001
終了ENDU+E002
処理PROCESSU+E003
条件分岐DECISIONU+E004
入出力INPUT_OUTPUTU+E005
サブプロセスSUB_PROCESSU+E006
ドキュメントDOCUMENTU+E007
データベースDATABASEU+E008
データストアDATA_STOREU+E009
手動入力MANUAL_INPUTU+E00A
手動処理MANUAL_OPERATIONU+E00B
準備PREPARATIONU+E00C
遅延DELAYU+E00D
接続CONNECTORU+E00E
ページ外OFFPAGE_CONNECTORU+E00F
テーブルTABLEU+E010
ビューVIEWU+E011
APIAPIU+E012
ファイルFILEU+E013
JSONJSONU+E014
XMLXMLU+E015
CSVCSVU+E016
オブジェクトOBJECTU+E017
画像IMAGEU+E018
アイコンICONU+E019
ラベルLABELU+E01A
パネルPANELU+E01B
グループGROUPU+E01C
複数ドキュメントMULTI_DOCUMENTU+E01D
コレクションCOLLECTIONU+E01E
テーブル詳細TABLE_DETAILU+E01F
内部表現INTERNAL_DETAILU+E020
丸印STAMP_CIRCLEU+E021
角印STAMP_SQUAREU+E022
楕円印STAMP_OVALU+E023
データ印STAMP_DATEU+E024
訂正印STAMP_CORRECTIONU+E025
スケジュール起点SCHEDULE_TRIGGERU+E026
ジョブJOBU+E027
ジョブネットJOBNETU+E028
ウィンドウ枠WINDOW_FRAME_UIU+E029
最小化WINDOW_CONTROL_MINIMIZEU+E02A
最大化WINDOW_CONTROL_MAXIMIZEU+E02B
元に戻すWINDOW_CONTROL_RESTOREU+E02C
閉じるWINDOW_CONTROL_CLOSEU+E02D
ボタンBUTTON_RECTU+E02E
アイコンボタンBUTTON_ICONU+E02F
スプリットボタンBUTTON_SPLITU+E030
チェックボックスCHECKBOX_UIU+E031
オプションボタンRADIO_BUTTON_UIU+E032
テキストボックスTEXTBOX_UIU+E033
コンボボックスCOMBOBOX_UIU+E034
トースト通知TOAST_UIU+E035
ダイアログDIALOG_UIU+E036
タブTAB_UIU+E037
メニューMENU_UIU+E038
月カレンダーCALENDAR_MONTHU+E039
週カレンダーCALENDAR_WEEKU+E03A
日付セルCALENDAR_DAY_CELLU+E03B
選択日セルCALENDAR_DAY_SELECTEDU+E03C
今日セルCALENDAR_DAY_TODAYU+E03D
祝日セルCALENDAR_DAY_HOLIDAYU+E03E
イベントセルCALENDAR_DAY_EVENTU+E03F
タスクセルCALENDAR_DAY_TASKU+E040
カレンダーヘッダCALENDAR_HEADERU+E041
前へCALENDAR_NAV_PREVU+E042
次へCALENDAR_NAV_NEXTU+E043
時間グリッドTIMELINE_GRIDU+E044
タイムバーTIMELINE_BARU+E045
範囲バーTIMELINE_BAR_RANGEU+E046
選択バーTIMELINE_BAR_SELECTEDU+E047
縦タイムラインTIMELINE_VERTICALU+E048
横タイムラインTIMELINE_HORIZONTALU+E049
時刻ラベルTIMELINE_LABEL_HOURU+E04A
現在時刻線TIMELINE_MARKER_NOWU+E04B
DatePickerDATE_PICKER_UIU+E04C
TimePickerTIME_PICKER_UIU+E04D
DateTimePickerDATETIME_PICKER_UIU+E04E
ColorPickerCOLOR_PICKER_UIU+E04F
FilePickerFILE_PICKER_UIU+E050
PickerポップアップPICKER_POPUP_UIU+E051
候補一覧OPTION_LIST_UIU+E052
ラベルLABEL_UIU+E053