doc-uiv1.2.1

ドキュメントとレポートのためのCSS

情報を、
見やすく。

doc-uiは、情報量の多いページのために、組版・図・表・コードを一つにまとめたデザインシステムです。

リファレンスは探しやすく。レポートには明快な読む順序を。

コンポーネントを見る はじめに

01 / 読む順序

一覧から探す。レポートを読む。

A ドキュメント

  1. 一覧名前を探す
  2. 項目属性を比較する
  3. 詳細出典を確かめる

B レポート

  1. 問い全体をつかむ
  2. 根拠事実をつなぐ
  3. 意味結果を読み解く

図1.読む順序が違えば、型と余白のスケールも変わる。リファレンスでは比較する情報を近くに置き、レポートでは主張・根拠・但し書きを順に読める余地をつくる。

矢印は読む順序を示します。情報をたどる道筋であり、ページ構成を強制するものではありません。

A 比べる情報を、近くに。

リファレンスは名前・型・値を横断して読みます。余白を詰め、行を揃えることで、読んでいる場所を見失わずに項目を比較できます。

コンポーネントの一覧を見る →

B 主張に、読む順序を。

レポートは主張・根拠・意味を順に読みます。型と余白に別のスケールを用いて、最も伝えたいことを前に出し、注釈をその説明対象のそばに置きます。

レポートのレイアウトを使う →

関係を見せることが、デザイン。

見出しが問いを示し、図が関係を見せ、キャプションが読み取るべきことを説明する。その間の余白も、説明の一部です。

文字の組み方は、読み方に従う。

密度の高いリファレンスでも、名前と値は読みやすく保ちます。密度は文字を小さくせず、余白から取ります。レポートでは大きな型スケールで、主張とそれを支える詳細を分けます。

印には、意味を伴わせる。

Aはドキュメント、Bはレポートを一貫して指します。記号を添えることで、単色でも関係が残ります。状態や情報の不在には、種別の色と区別した語彙を用います。

図版と注釈 →ラベルと状態 →

03 / コンポーネント

一文から、文書全体まで。

45種類のコンポーネントとレイアウトが、型・余白・色の体系を共有します。各ガイドに実物の例、構文強調したHTML、使い方の説明を載せています。

伝えたい情報の種類から選ぶdoc-uiのコンポーネント
組みたいもの使うコンポーネント
レイアウト
一覧とデータ
図とグラフ
文章
コードと変更
ナビゲーション
状態とフィードバック
すべてのコンポーネントの実例を見る →

04 / 使いはじめる

読み方を選び、内容に必要な部品を組み合わせます。

あなたの情報を、ページに。

文書のheadにスタイルシートを読み込み、HTMLやテンプレートにレイアウトのクラスを指定します。このページは.sheet、コンポーネントのリファレンスは.docで組んでいます。

はじめに →32種類の配色から選ぶ →
HTML
<article class="sheet">
  <h1>明快な、読む順序。</h1>
  <p class="stand">最も伝えたいことを、最初に。</p>
  <section class="sec">
    <h2 class="label">根拠</h2>
    <div class="field">詳細は、そのあとに。</div>
  </section>
</article>
スタイルシートのURL
HTML
<link rel="stylesheet"
      href="https://k-kinzal.github.io/document-design/v1.2.1/document-design.css">
見た目を変更できますか？

型・余白・色の--dd-トークンを上書きします。カスケードレイヤーを使っているため、利用側のCSSでスタイルを変更できます。

ライトとダークで同じコンポーネントを使えます。テーマの設定を見る →

どんな操作が用意されていますか？

任意のスクリプトで、検索・並べ替え・絞り込み・タブ・コピー・テーマ切り替えを追加できます。スクリプトがなくても文書は読めます。

Search · 絞り込み · Tabs

どんな用途に向いていますか？

文章・構造化データ・コードを内容とするドキュメントやレポートに使えます。基本スタイルは文書全体に適用する設計です。既存アプリケーションに組み込む場合は、別文書として表示するか、周囲のUIへの影響を確認してください。

導入ガイドでは、対応ブラウザ、印刷、オフライン保存についても説明しています。