Office アドインでの Office UI FabricOffice UI Fabric in Office Add-ins 

Office UI Fabric は、Office と Office 365 のユーザー エクスペリエンスをビルドするための JavaScript フロントエンドのフレームワークです。Fabric は、拡張や改訂が可能な視覚効果に焦点を合わせたコンポーネントであり、Office アドインで使用できます。Fabric は Office デザイン言語を使用するため、Fabric の UX コンポーネントは Office に元々組み込まれているかのように自然に使うことができます。Office UI Fabric is a JavaScript front-end framework for building user experiences for Office and Office 365. Fabric provides visuals-focused components that you can extend, rework, and use in your Office Add-in. Because Fabric uses the Office Design Language, Fabric's UX components look like a natural extension of Office. 

アドインを作成する場合は、Office UI Fabric を使用してユーザー エクスペリエンスを作成することをお勧めします。Office UI Fabric の使用は省略可能です。If you are building an add-in, we encourage you to use Office UI Fabric to create your user experience. Using Office UI Fabric is optional.

次のセクションでは、Fabric を使用して要件を満たす方法について説明します。The following sections explain how to get started using Fabric to meet your requirements.

Fabric Core を使用する: アイコン、フォント、色Use Fabric Core: icons, fonts, colors

Fabric Core には、デザイン言語の基本的な要素 (アイコン、色、タイプ、グリッドなど) が含まれます。Fabric Core contains basic elements of the design language such as icons, colors, type, and grid.Fabric Core は独立したフレームワークです。 Fabric core is framework independent. Fabric Core は、Fabric React によって使用され、Fabric React に含まれます。Fabric Core is used by and included with Fabric React.

Fabric Core の使用を開始するには:To get started using Fabric Core:

  1. ページの HTML に CDN 参照を追加します。Add the CDN reference to the HTML on your page.  

    <link rel="stylesheet" href="">
  2. Fabric のアイコンとフォントを使用します。Use Fabric icons and fonts. 

    Fabric のアイコンを使用するには、ページに "i" 要素を含め、適切なクラスを参照します。アイコンのサイズは、フォント サイズを変更することで制御できます。たとえば、次のコードは、themePrimary (#0078d7) 色を使用する特大の表アイコンを作成する方法を示しています。To use a Fabric icon, include the "i" element on your page, and then reference the appropriate classes. You can control the size of the icon by changing the font size. For example, the following code shows how to make an extra-large table icon that uses the themePrimary (#0078d7) color.

    <i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>

    その他の Office UI Fabric で使用可能なアイコンを見つけるには、「アイコン」ページの検索機能を使用します。アドインで使用するアイコンを検索するときには、アイコン名の先頭に ms-Icon-- を追加してください。To find more icons that are available in Office UI Fabric, use the search feature on the Icons page. When you find an icon to use in your add-in, be sure to prefix the icon name with ms-Icon--.

    Office UI Fabric で使用可能なフォントのサイズと色については、「文字体裁」および「」を参照してください。For information about font sizes and colors that are available in Office UI Fabric, see Typography and Colors.  

Fabric コンポーネントを使用するUse Fabric Components

Fabric には、次のタイプのコンポーネントを含む、さまざまな UX コンポーネントが用意されています。これらを使用してアドインを作成できます。Fabric provides a variety of UX components that you can use to build your add-in, including the following types of components:

  • 入力コンポーネント - 例: ボタン、チェックボックス、および切り替えInput components - for example, Button, Checkbox, and Toggle
  • ナビゲーション コンポーネント - 例: ピボットおよび階層リンクNavigation components - for example, Pivot and Breadcrumb
  • 通知コンポーネント - 例: MessageBar および吹き出しNotification components - for example, MessageBar and Callout

すべての Fabric コンポーネントがアドインでの使用に適しているわけではありません。アドインでの使用に推奨される Fabric React UX コンポーネントの一覧については、次を参照してください。Not all Fabric components are recommended for use in add-ins. Here is a list of Fabric React UX components that we recommend for use in an add-in:

アドインの作成には、Angular や React など別の JavaScript フレームワークも使用できます。フレームワークで Fabric コンポーネントを使用するには、次のリソースを参照してください。You can use different JavaScript frameworks, such as Angular or React, to build your add-in. To get started using Fabric components with your framework, see the following resources.

フレームワークFramework Example
ReactReact Office アドインで Office UI Fabric React を使用するUsing Office UI Fabric React in Office Add-ins
AngularAngular Fabric コンポーネントを角度2のコンポーネントでラップすることを検討してください。Consider wrapping Fabric components with Angular 2 components