Office UI Fabric Advent Calendar(タイトルが長い……)の第2日目は、Office UI Fabric(以下"OfficeUI")の文字サイズと文字色について書いてみます。
いずれも以下に示す短いサンプルで動作しますので、皆様の環境でもぜひ動かしてみてください。

文字サイズのサンプル

ms-fontSize-XXとms-Labelクラス

まずは文字サイズのサンプルです。OfficeUIでの文字サイズは「ms-fontSize-XX」というクラスで指定します。注意が必要な点として、現状(2015/12/2時点)では、「ms-Label」クラスというものがあるのですが、これと一緒にms-fontSize-XXを指定すると文字サイズが変更されないようです。地味にハマりそうな所なのでご注意ください。

サンプルコード

サンプルコードは以下です。単に文字サイズを指定した文字列をずらーっと列挙するだけです。

<!DOCTYPE html>
<html ng-app="App">
  <head>
    <meta charset="utf-8" />
    <title>fontSize Sample</title>
    <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
    <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  </head>
  <body ng-controller="AppController">
    <!-- ラベルを表示する -->
    <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg12">
      <ul ng-repeat="fontSize in fontSizeLists" style="margin-bottom:-20px;">
        <li><label class="{{fontSize}}">{{fontSize}}</label>
      </ul>
    </div>
    <script>
      var app = angular.module('App', []);
      app.controller('AppController', ['$scope',
        function($scope) {
          $scope.fontSizeLists = [
            "ms-fontSize-su",    "ms-fontSize-xxl",   "ms-fontSize-xl",
            "ms-fontSize-l",     "ms-fontSize-mPlus", "ms-fontSize-m",
            "ms-fontSize-sPlus", "ms-fontSize-s",     "ms-fontSize-xs",
            "ms-fontSize-mi",
          ];
        }
      ]);
    </script>
  </body>
</html>

実行結果は以下のようになります。

文字色のサンプル

文字色はms-fontColor-XXで指定します。以下のサンプルも単純なもので、文字色を指定した文字列を列挙するだけです。

<!DOCTYPE html>
<html ng-app="App">
  <head>
    <meta charset="utf-8" />
    <title>Font Color Sample</title>
    <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
    <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <style>
      .lightColorBG { border: thin dashed; padding: 3px; }
      .darkColorBG  { background: black;   padding: 3px; }
    </style>
  </head>
  <body ng-controller="AppController">
    <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg12"> <!-- 明るめの色 -->
      <span ng-repeat="color in LightBackColors">
        <label class="ms-fontColor-{{color}} lightColorBG">{{color}}</label>
      </span>
    </div>
    <div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg12"> <!-- 暗めの色 -->
      <span ng-repeat="color in DarkBackColors">
        <label class="ms-fontColor-{{color}} darkColorBG">{{color}}</label>
      </span>
    </div>
    <script>
      var app = angular.module('App', []);
      app.controller('AppController', ['$scope',
        function($scope) {
          $scope.LightBackColors = [  /* 明るめの色リスト */
            "alert", "black", "blue", "blueDark", "blueLight", "blueMid",
            "error", "green", "greenDark", "greenLight", "info",
            "magenta", "magentaDark", "magentaLight", "neutralDark",
            "neutralPrimary", "neutralSecondary", "neutralSecondaryAlt",
            "neutralTertiary", "neutralTertiaryAlt", "officeAccent10",
            "officeAccent2", "officeAccent4", "officeAccent5", "officeAccent6",
            "officeAccent7", "officeAccent8", "officeAccent9", "orange",
            "orangeLight", "purple", "purpleDark", "purpleLight",
            "red", "redDark", "success", "teal", "tealDark", "tealLight",
            "themeDark", "themeDarkAlt", "themeDarker", "themePrimary", "themeSecondary",
            "themeTertiary", "yellow", "yellowLight",
          ];
          $scope.DarkBackColors = [  /* 暗めの色リスト */
            "neutralLight", "neutralLighter", "neutralLighterAlt", "officeAccent1",
            "officeAccent3", "themeLight", "themeLighter", "themeLighterAlt", "white",
          ];
        }
      ]);
    </script>
  </body>
</html>

実行結果は以下のようになります。

まとめ

OfficeUIの文字サイズと文字色について、簡単なサンプルを踏まえつつ紹介してみました。文字色には"alert"とか"info"等があるので、適切な文字色を指定することで、情報が伝わりやすい画面(とHTMLコード)が作れそうですね。

明日以降もOfficeUIの基本コンポーネントまわりの解説を行う予定です。