設計仕様書 / 2ページ目のコード

実際のビルド結果 · 2/3ページ · 画像を選んで拡大

実際の3ページ作例の 2ページ目 に対応するソースです。内容は架空で、教育内容・設計要件は利用前に担当者が確認します。共通CSS・設定と参照ファイルを組み合わせて使います。

プレビュー一覧へ戻る共通CSSと設定前のページ次のページ

このページのMarkdown

document.md の明示的な区切りで分けた抜粋です。ページ間には <!-- wwpo:break --> を置きます。

document.md

<!-- wwpo:page flow=fixed -->
# 予約要求のやり取り

**提案する動作 / 架空の設計**

## シーケンス図

<!-- wwpo:block width=100% align=center -->
![予約確認と保存の順序](assets/diagrams/sequence.mmd "提案する処理の順序")

## 成功と競合

確認画面では部屋と時間を表示します。保存時に空き状況をもう一度確認し、競合があれば別の時間を選び直します。

| 条件 | 期待する結果 |
| --- | --- |
| 空きあり | 予約を保存し、内容を表示 |
| 重複あり | 競合を説明し、入力を保持 |

関連する図表定義とデータ

assets/diagrams/sequence.mmd

sequenceDiagram
    actor Reader as 利用者
    participant Demo as デモ
    participant Store as 保存先
    Reader->>Demo: 部屋と時間を選ぶ
    Demo-->>Reader: 確認内容を表示
    Reader->>Demo: 要求を確定
    Demo->>Store: 空きを再確認
    alt 空きあり
        Store-->>Demo: 空きあり
        Demo->>Store: 予約を保存
        Demo-->>Reader: 保存内容を表示
    else 競合
        Store-->>Demo: 予約済み
        Demo-->>Reader: 入力を保持し、競合を説明
    end

デザインと再生成

見出し・余白・色・表・ページ注記は共通CSSとbusinessプリセットによって整えられます。上に表示したページ固有の指示や図表定義も出力に影響します。作例一覧のソースZIPに、全体の文書と必要なファイルがあります。変更後は保存し、プレビュー・検証・書き出しで確認してください。

共通CSSと設定を見る · 作例全体の紹介へ