化粧品紹介 / 1ページ目のコード

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

実際の1ページ作例の 1ページ目 に対応するソースです。数値・企業・提案は架空です。単独実行用の文書ではありません。共通テーマ・設定と依存ファイルが必要です。

プレビュー一覧へ戻る共通CSSと設定

このページのMarkdown

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

document.md

<!-- wwpo:page flow=fixed background=assets/images/background.png -->
# Petal Note

**架空の化粧品コレクション / デザイン案**

<!-- wwpo:block class="illustration-panel" width=100% align=center min-scale=0.3 -->
![オリジナルの抽象的な容器イラスト](assets/images/illustration.png "実在の商品ではない容器の作例")

## 小さなコレクションを、やわらかく

淡いピンクとシンプルな形で、架空の三つのアイテムを紹介します。商品紹介の構成を示す作例で、美容・健康効果は主張しません。

| 架空のアイテム | 形 | 紹介のポイント |
| --- | --- | --- |
| 朝のボトル | 背の高い容器 | 静かな導入 |
| 小さなジャー | 丸い容器 | やわらかな中心 |
| 旅のチューブ | 細い容器 | コンパクトな相棒 |

> やさしい色で、伝えたいことを明瞭に。

名前と容器は架空です。実在ブランドの推薦ではありません。

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

assets/images/illustration.png

画像ファイルを見る · 生成元と来歴

この図版はこの架空の作例のために独自に作成した素材です。実在のブランド・商品・人物ではありません。ソースZIPに画像と生成元の記録を含めています。

assets/images/background.png

画像ファイルを見る · 生成元と来歴

この図版はこの架空の作例のために独自に作成した素材です。実在のブランド・商品・人物ではありません。ソースZIPに画像と生成元の記録を含めています。

デザインと再生成

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

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