エディタのアドオン用の CSS パッケージ

エディタ アドオンの外観を Google スプレッドシート、ドキュメント、スライド、フォームに似せるために、以下の CSS パッケージをリンクして、フォント、ボタン、フォーム要素に Google のスタイルを適用します。使用されている CSS パッケージのサンプルについては、ドキュメント アドオンのクイックスタートをご覧ください。CSS パッケージを使用するには、各 HTML ファイルの上部に次の行を含めます。

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">

ただし、すべてのブラウザでフォーム要素のスタイルを完全に制御できるわけではありません。特に、<select> 要素は Firefox と Internet Explorer で視覚的なアーティファクトが表示されますが、機能は正常です。特定のブラウザでスタイルがどのように表示されるかを確認するには、そのブラウザでこのページを読み込むだけです。

タイポグラフィ

すべてのテキストに Arial フォントを使用し、用途に応じて次のスタイルを使用します。

使用方法と外観 CSS パッケージを使用したマークアップ 
<h1>Titles and headers</h1>
<b>Bold text</b>
Normal text
<a href="">Links</a>
<span class="current">Current navigation selection</span>
<span class="error">Form input errors</span>
<span class="gray">Gray text</span>
<span class="secondary">Secondary text</span>

ボタン

標準のボタン タイプ（<button>、<input type="button">、<input type="submit">、<a class="button">）を使用できます。横方向に隣接するボタンは自動的に間隔が空きます。さまざまな用途に合わせて、複数の色からお選びいただけます。

使用 デザイン CSS パッケージを使用したマークアップ
メイン アクション 
<button class="action">Translate</button>
サブアクション 
<button>Close</button>
アクションを作成する 
<button class="create">Create</button>
アクションを共有する 
<button class="share">Share</button>

チェックボックス

例 CSS パッケージを使用したマークアップ 
<div>
  <input type="checkbox" id="checkbox1" checked>
  <label for="checkbox1">Checked</label>
</div>
<div>
  <input type="checkbox" id="checkbox2">
  <label for="checkbox2">Unchecked</label>
</div>
<div>
  <input type="checkbox" id="checkbox3" checked disabled>
  <label for="checkbox3">Checked, disabled</label>
</div>
<div>
  <input type="checkbox" id="checkbox4" disabled>
  <label for="checkbox4">Unchecked, disabled</label>
</div>

ラジオボタン

例 CSS パッケージを使用したマークアップ 
<div>
  <input type="radio" name="radio-a" id="radio1" checked>
  <label for="radio1">Checked</label>
</div>
<div>
  <input type="radio" name="radio-a" id="radio2">
  <label for="radio2">Unchecked</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio3"
      checked disabled>
  <label for="radio3">Checked, disabled</label>
</div>
<div>
  <input type="radio" name="radio-b" id="radio4" disabled>
  <label for="radio4">Unchecked, disabled</label>
</div>

メニューを選択する

例 CSS パッケージを使用したマークアップ 
<div class="block form-group">
  <label for="select">Select</label>
  <select id="select">
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>
<div class="block form-group">
  <label for="disabled-select">Disabled select</label>
  <select id="disabled-select" disabled>
    <option selected>Google Docs</option>
    <option>Google Forms</option>
    <option>Google Sheets</option>
  </select>
</div>

テキスト エリア

例 CSS パッケージを使用したマークアップ 
<div class="form-group">
  <label for="sampleTextArea">Label</label>
  <textarea id="sampleTextArea" rows="3"></textarea>
</div>

テキスト フィールド

例 CSS パッケージを使用したマークアップ 
<div class="inline form-group">
  <label for="city">City</label>
  <input type="text" id="city" style="width: 150px;">
</div>
<div class="inline form-group">
  <label for="state">State</label>
  <input type="text" id="state" style="width: 40px;">
</div>
<div class="inline form-group">
  <label for="zip-code">Zip code</label>
  <input type="text" id="zip-code" style="width: 65px;">
</div>

サイドバーのスタイル設定は難しい場合があります。これは、高さは可変ですが、多くのアドオンでスクロールしないブランディング領域を含める必要があるためです。以下は、Google ドキュメント アドオンのクイックスタートのサイドバーを簡素化したものです。テキスト領域の右下をドラッグしてコンテンツをサイドバーよりも高くすると、コンテンツ領域は自動的にスクロールしますが、下部にあるブランディングはスクロールされません。

この例では、sidebar クラスを使用して適切なパディングを適用し、bottom クラスを使用してブランディング領域を強制的に下部に配置しています。ローカルクラス branding-below は、サイドバーのメイン領域が下部から空ける領域を定義します。

例 CSS パッケージを使用したマークアップ 
<style>
.branding-below {
  bottom: 56px;
  top: 0;
}
</style>

<div class="sidebar branding-below">
  <div class="block form-group">
    <label for="translated-text">
      <b>Translation</b></label>
    <textarea id="translated-text" rows="15">
    </textarea>
  </div>

  <div class="block">
    <input type="checkbox" id="save-prefs">
    <label for="save-prefs">
      Use these languages by default</label>
  </div>

 <div class="block">
    <button class="blue">Translate</button>
    <button>Insert</button>
  </div>
</div>

<div class="sidebar bottom">
  <span class="gray">
    Translate sample by Google</span>
</div>