English

doc-uiを使う

スタイルシートを読み込み、レイアウトを選んで、完全なHTML文書からはじめます。

1. スタイルシートを読み込む

このリンクを文書の<head>に追加します。完全なリリースバージョンを指定すると、公開・保存する文書の見た目を固定できます。

HTML
<link rel="stylesheet"
      href="https://k-kinzal.github.io/document-design/v1.2.1/document-design.css">

2. 配色を選ぶ

ライト・ダークがペアになった32種類の配色。4つの紙面色と8つのアクセント色で、文字組み、余白、意味は共通です。

Paperはニュートラル、Linenは暖色、Mistは寒色、Sageは穏やかな緑の紙面です。アクセントはBlue、Cyan、Teal、Indigo、Violet、Plum、Citron、Slateの8色。従来の標準配色はPaper / Blueです。

アクセント・分類色・状態色を一組として整えた配色です。色の強さを揃えて調整し、意味は共通に保ちます。赤は欠落・未解決を示します。すべての配色で、5つの背景面と各色の淡い背景に対する文字のコントラスト比4.5:1を満たします。

選んだ配色を使う

選択中の配色： Paper / Blue

基本のスタイルシートの後に、配色のスタイルシートを1つ読み込みます。ライト・ダークは閲覧者の設定に従います。文書での利用にJavaScriptは必要ありません。

HTML
<link rel="stylesheet"
      href="https://k-kinzal.github.io/document-design/v1.2.1/document-design.css">
<link rel="stylesheet"
      href="https://k-kinzal.github.io/document-design/v1.2.1/palettes/paper-blue.css">
選択中の配色をダウンロード ↓32種類の配色を比較 ↓

オフラインで使う場合は、両方のスタイルシートをHTMLと同じ場所に保存し、相対パスで指定します。各カードからのCSSダウンロードはJavaScriptなしでも利用できます。

ライト・ダークのペアを比較

すべてのカードに、WordPress SQLカタログの同じ978件の検出事項を表示しています。カードを選ぶとサイト全体で配色を試せます。上のスタイルシートのリンクをコピーして使ってください。選んだ配色は、ヘッダーの選択欄とともにページを移動しても維持されます。

Paper / Blue

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Paper / Cyan

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Paper / Teal

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Paper / Indigo

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Paper / Violet

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Paper / Plum

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Paper / Citron

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Paper / Slate

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Linen / Blue

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Linen / Cyan

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Linen / Teal

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Linen / Indigo

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Linen / Violet

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Linen / Plum

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Linen / Citron

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Linen / Slate

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Mist / Blue

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Mist / Cyan

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Mist / Teal

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Mist / Indigo

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Mist / Violet

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Mist / Plum

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Mist / Citron

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Mist / Slate

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Sage / Blue

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Sage / Cyan

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Sage / Teal

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Sage / Indigo

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Sage / Violet

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Sage / Plum

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Sage / Citron

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓

Sage / Slate

ライト
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
ダーク
978検出結果
SELECTINSERTUPDATE
✓ 解決済み! 一部解決? 未解決
CSSをダウンロード ↓
選択中のスタイルシートをコピー ↑

3. 読み方を選ぶ

探すための .doc

APIリファレンス、カタログ、検索結果に。高い密度のまま走査できるレイアウトです。

ドキュメントを組む →

理解するための .sheet

レポート、調査、レビューに。結論とその根拠が一目でわかるレイアウトです。

レポートを組む →

4. 完全なページを作る

これをreport.htmlとして保存し、ブラウザで開いてください。

HTML
<!doctype html>
<html lang="ja" data-dd-paper="a4">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>出典を結び、空白を残す。</title>
  <link rel="stylesheet"
        href="https://k-kinzal.github.io/document-design/v1.2.1/document-design.css">
  <link rel="stylesheet"
        href="https://k-kinzal.github.io/document-design/v1.2.1/palettes/paper-blue.css">
</head>
<body>
  <article class="sheet">
    <p class="eyebrow">BISON-PARSER / 出典カバレッジ</p>
    <h1>出典を結び、空白を残す。</h1>
    <p class="stand">カバレッジは68.97%から96.67%へ。導入文は未解決のままです。</p>
    <div class="hero">
      <div class="was">
        <span class="cap">変更前</span>
        <span class="fig">68.97</span>
        <span class="unit">% 出典カバレッジ · 29単位中20単位</span>
      </div>
      <div class="now">
        <span class="cap">変更後</span>
        <span class="fig">96.67</span>
        <span class="unit">% 出典カバレッジ · 30単位中29単位</span>
      </div>
    </div>
    <section class="sec">
      <h2 class="label">01 / 根拠</h2>
      <div class="field">
        <p class="lead">実装は存在し、出典との結び付きが欠けていました。</p>
        <div class="compare">
          <div class="was">
            <h3 class="cap">変更前</h3>
            <p class="note">29の出典単位のうち9単位に解釈がありませんでした。</p>
          </div>
          <div class="now">
            <h3 class="cap">変更後</h3>
            <p class="note">30の出典単位のうち29単位に解釈が付きました。導入文は未解決のままです。</p>
          </div>
        </div>
        <p class="caveat">出典カバレッジは、すべての挙動がテスト済みであることを意味しません。未解決の導入文も結果の一部です。</p>
      </div>
    </section>
    <section class="sec">
      <h2 class="label">02 / 記録</h2>
      <div class="field">
        <p class="lead">割合の根拠になる件数を残す。</p>
        <div class="table-wrap">
          <table>
            <caption>bison-parserの出典カバレッジ</caption>
            <thead><tr><th scope="col">時点</th><th scope="col">解釈のある単位</th><th scope="col">単位の総数</th></tr></thead>
            <tbody>
              <tr><th scope="row">変更前</th><td>20</td><td>29</td></tr>
              <tr><th scope="row">変更後</th><td>29</td><td>30</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  </article>
</body>
</html>

ダウンロードできる実例には、選んだ配色とすべてのスタイルが含まれます。HTMLファイル1つでオフラインでも開けます。

作例をダウンロード ↓作例を開く ↗

文書の言語を指定する

HTML要素に、英語ならlang="en"、日本語ならlang="ja"を指定します。言語に応じて、和文の見出しの文節改行や図の接頭辞が切り替わります。本文はベタ組を保ち、見出しや短いラベルにはプロポーショナルメトリクスを使います。

ヘッダーの言語リンクで、同じページの日英の組版を比較できます。通読する文章はProse、大きな型スケールはReportで確認できます。

オフラインで保存する

HTMLファイルの隣にスタイルシートを保存し、相対パスで指定します。

HTML
<link rel="stylesheet" href="./document-design.css">

ファイルを一緒に保存すれば、file://でも開けます。スタイルシートはWebフォントや画像サービスに依存しません。

必要な操作を追加する

検索・並べ替え・コピー・テーマ切り替えは任意です。クラシックスクリプトを読み込み、各コンポーネントに指定のdata属性を付けます。

HTML
<script src="https://k-kinzal.github.io/document-design/v1.2.1/document-design.js" defer></script>

オフラインではスクリプトを保存し、相対パスで読み込みます。

スクリプトの初期化後にだけ表示する操作部品には、 data-dd-enhance hidden を付けます。JavaScriptなしでも元の内容を読める状態にしてください。

テーマを設定する

既定ではシステム設定に従います。固定する場合はHTML要素にdata-dd-theme="light"または"dark"を指定します。デザイントークンは--dd-カスタムプロパティで上書きできます。

CSS
:root {
  --dd-accent: var(--dd-teal);
  --dd-accent-tint: var(--dd-teal-tint);
  --dd-link: var(--dd-teal);
}

識別の色はblue・violet・amber・teal・pink・indigo・slate。状態の色はok・warn・dangerです。違いはChipで説明しています。

どの形式でも意味を保つ

  • 意味に沿った見出し、見える入力ラベル、内容がわかるリンク名を使います。
  • 色には文字・記号・枠線を添えます。
  • 印刷時はナビゲーションや操作部品を隠し、省略された行や非表示のタブ内容を展開します。
  • 対応ブラウザではCSSで閉じたdetailsを展開します。任意のスクリプトも印刷前に展開します。
  • 生成したレポートを配布する前に印刷プレビューを確認してください。

長いレポートをPDFにする

PDFとして読まれるレポートは、ルート要素で用紙サイズを指定します。スタイルシートが用紙サイズと余白を設定し、全ページにページ番号を付けるので、印刷用のCSSを自分で書く必要はありません。

HTML
  • data-dd-paperにはa4またはletterを指定します。省略すると、読者が選んだ用紙サイズで印刷されます。
  • data-dd-print-urlsはリンク先URLを印刷する場所を選びます。既定では本文の各リンクの後に、sourcesなら出典一覧にのみ、noneならどこにも印刷しません。
  • 見出し、セクションラベル、年表の項目、出典は、続く内容と同じページに収まります。表とコードブロックは必要な位置で改ページします。
  • ブラウザの「PDFとして保存」で印刷するか、ヘッドレスブラウザでファイルを生成します。背景のグラフィックはオフのままで構いません。スタイルシートがチップやバーを輪郭線で描き直します。

下の完成例は、複数ページにわたる年表、62件の出典、長い日本語タイトルを含む人物紹介のレポートです。使っているのは上記のスタイルシートだけです。

人物紹介を開く ↗HTMLをダウンロード ↓

対応ブラウザとバージョン

現在のChrome、Edge、Firefox、Safari向けの設計です。CSSではlight-dark()、color-mix()、カスケードレイヤー、コンテナクエリ、subgridを使っています。

/v1.0.0/のような完全なバージョンと40文字のコミットパスは変更されません。/v1.0/と/v1/は互換性のあるリリースを、/latest/はmainを追います。このサイトは最新の安定版リリースに基づきます。破壊的変更は新しいメジャーバージョンに分けます。

このスタイルシートは文書全体を受け持ちます。既存アプリケーションへ組み込む場合は、別文書として表示するか、周囲のUIへの影響を確認してください。

45種類のコンポーネントを見る →ソースコード ↗