# テンプレートページで作る本

> Sandboxで、テンプレートページでできた小学校の教科書を作る手順：ページテンプレートを作り、Markdownから内容を流し込み、地図にラベルを付け、ページを翻訳し、収まらない枠を直し、ページとテキストの両方で選択する

- HTML版: https://postext.dev/ja/docs/composed-page-books
- 最終更新: 2026-10-17
- 読了時間: 12分
- 他の言語: [en](https://postext.dev/en/docs/composed-page-books.md), [es](https://postext.dev/es/docs/composed-page-books.md), [ca](https://postext.dev/ca/docs/composed-page-books.md), [de](https://postext.dev/de/docs/composed-page-books.md), [fr](https://postext.dev/fr/docs/composed-page-books.md), [it](https://postext.dev/it/docs/composed-page-books.md), [pt](https://postext.dev/pt/docs/composed-page-books.md), [zh](https://postext.dev/zh/docs/composed-page-books.md), [ar](https://postext.dev/ar/docs/composed-page-books.md)

## かんたんな説明

このページでは、Sandboxで小学校の教科書の1ページを作る手順を、順を追って説明します。作るのは、見出しの帯と本文と色付きの囲みを持つページです。出来上がっている例の本を開き、そこへ1ページ足していきます。最初にページをテンプレートとして描き、次にMarkdownから文章を流し込み、そのあと地図の地名に名前を付けてページを別の言語に翻訳します。最後に、文章が囲みに入りきらないときの直し方と、ページとテキストのあいだを行き来する方法を確かめます。

**教科書の1ページをテンプレートから作り、Markdownで中身を入れ、地図にラベルを付け、ページを翻訳し、収まらない枠を直します。**

小学校の教科書のページは、いくつかの箱の集まりです。見出しの帯、本文、定義の箱、活動の箱、地図などです。Postextは、こうしたページを、箱（枠）を持つ**ページテンプレート**から組みます。Markdownには、どの言葉をどの枠に入れるかだけを書きます。このページでは、すでにある本を使って、1ページを足すまでの作業をSandboxで通して行います。各フィールドやMarkdownの各行が何をするかは、リファレンスのページにあります。ここでは一つずつ順に実行して、何が変わるかを見ていきます。Markdownについては[テンプレートページ](https://postext.dev/ja/docs/composed-pages.md)、テンプレートについては[設定：テンプレートページ](https://postext.dev/ja/docs/configuration-composed-pages.md)、画面については[Sandbox：テンプレートページ](https://postext.dev/ja/docs/sandbox-composed-pages.md)を参照してください。

必要なものはブラウザだけです。作業はすべてSandboxの中で行い、変更はお使いのブラウザに残ります。

## 1. 本を開く

使う本は*Our river*です。Year 3 向けの教科書の1単元で、[レシピ集](https://postext.dev/ja/cookbook/children-textbook-pages.md)にレシピ Nº 156 として載っています。川も町も絵も、この本のために作った架空のものです。全部で9ページあり、向かい合う2ページにまたがる地図が入っています。スペイン語、カタルーニャ語、英語の三つの版があります。

[Sandboxで開く](https://postext.dev/ja/sandbox.md#recipe=children-textbook-pages&lang=en)。最初に開くと、**本**に自分の本として追加されるので、自由に変更できます。リンクの `lang=es` や `lang=ca` に変えると、ほかの版が開きます。あとで同じリンクをもう一度開くと、自分のコピーを開くか、公開されている本に置き換えるかをSandboxが尋ねます。

触る前に、二つのことを知っておいてください。

- プレビューの上のバーに、**内容**と**デザイン**のスイッチがあります。内容モードでは、**本文**パネルかページの上で言葉を編集します。デザインモードでは、ページテンプレートとスタイルを編集し、本文は読み取り専用になります。**Alt+Shift+M**（Macでは**⌥⇧M**）で切り替えられます。
- **本文**パネルには、1章分のMarkdownが出ます。テンプレートページは、`::::page{template="…"}` で始まり、コロン4つで終わるブロックです。プレビューのページで言葉をクリックすると、Markdownのその位置にカーソルが移ります。

## 2. ページテンプレートを作る

新しいページは復習のページにします。見出しの帯、その下の短い文章、そして学んだことを思い出す箱と試してみる箱の二つです。必要なのは、四つの枠を持つテンプレートです。

1. プレビュー上のスイッチを**デザイン**にして、左の**デザイン**パネルを開きます。**ページと段組み**から**ページテンプレート**を選びます。一覧には、この本のテンプレートが、枠の図とともに並びます。
2. **新規**を押します。新しいテンプレートが開くので、**ID**を `review`（Markdownがこの名前で指定します）、**名前**を `Review page`（このパネルに表示される名前です）にします。IDには、小文字、数字、ハイフンが使えます。
3. テンプレートには、**ページの本文を受け取る**枠 `text` が最初から一つあります。これを見出しの帯にします。**名前（スロット）**を `title`、**囲みのスタイル**を `portada`（この本が見出しに使っている青い帯）にし、**ページの本文を受け取る**をオフにして、**最初の見出しを受け取る**を*レベル 1*にします。この枠が、ページの最初の `#` 見出しを受け取ります。
4. **枠を追加**を押します。新しい枠が、枠の一覧の下に開きます。**名前（スロット）**を `text` にして、**ページの本文を受け取る**をオンにします。ページの中で枠の外に書いたものは、ここに入ります。
5. 枠をもう一つ追加します。**名前（スロット）**は `remember`、**囲みのスタイル**は `dato-campo`（タブの付いた緑の箱）にします。**最小の高さ**は30 mmにします。文章が短くても、箱が十分な大きさを保ちます。
6. 最後の枠を追加します。**名前（スロット）**は `try`、**囲みのスタイル**は `actividad-sol`、**最小の高さ**は30 mmにします。
7. `text`、`remember`、`try` の三つで、**幅**を*端まで*、**高さ**を*内容に合わせる*にします。これで、枠はページの幅いっぱいに広がり、高さは中の文章に合わせて決まります。
8. **グループ**の下の**グループを追加**を押します。名前を `column` とし、*縦に積む*のままにして、**枠の間隔**を6 mmにします。**グループの枠（ページ順）**で四つの枠すべてにチェックを入れます。グループは、枠の一覧の順に枠を並べるので、見出しが先頭になります。グループは枠を上から下へ並べ、枠が大きくなると下の枠を押し下げます。そのため、最初の箱の文章が長くなっても、二つ目の箱に重なることはありません。

![デザインパネルのページテンプレートに表示された Review page テンプレート。四つの枠とグループの設定があり、ページ上には同じ枠が破線の輪郭で描かれている。](https://postext.dev/docs-shots/ja/template.webp)

*テンプレートは四つの枠と一つのグループでできています。ページ上の破線の箱が枠で、緑のラベルが各枠の大きさの決まり方を示します。*

テンプレートには、言葉が一つも入っていません。見出しが何か、箱に何を入れるかは、どの設定にも書かれていません。箱のスタイルが枠の見た目を決め、グループが順序を決めます。同じテンプレートは、ほかの方法でも作れます。デザインモードでは、テンプレートページの何もない所をマウスでドラッグして枠を描いたり、既存の枠を動かしたりサイズを変えたりできます（[Sandbox：テンプレートページ](https://postext.dev/ja/docs/sandbox-composed-pages.md#ページテンプレート)を参照）。**複製**は、テンプレートをコピーして手を入れるときに使い、**レイアウトをテンプレートとして保存**は、気に入ったテンプレートページを新しいテンプレートにします。

## 3. Markdownからページを埋める

1. プレビュー上のスイッチを**内容**にして、**本文**パネルを開き、**Ctrl+End**（Macでは**Cmd+↓**）で章の末尾へ移ります。
2. **本文**パネルのツールバーで**テンプレートページ**を押します。**ページテンプレートを選択**の一覧に、この本のページテンプレートが、空の枠の図とともに並びます。*Review page*を選びます。
3. Sandboxが、スロットごとに空の枠を一つずつ置いたページを書き、見出しの `title` という語を選択状態にします。その上から見出しを入力します。

```md
::::page{template="review"}
# Check what you have learned

A river changes as it runs from the mountains to the sea. Read the boxes, then answer them in your own words.

:::frame{slot="remember" label="Remember"}
A spring gives a trickle, streams join into a river, and the river widens as it nears the sea.
:::

:::frame{slot="try" label="Try it"}
Draw a river from its spring to the sea. Write the names of the three courses on your drawing.
:::
::::
```

見出しはレベル1を受け取る枠に、続く段落はページの本文を受け取る枠に入ります。`:::frame` は、それぞれ `slot` が同じ枠に入ります。`label` は、箱のタブに書かれる言葉です。ページはキャンバスの10ページ目に出ます。単元の9ページの次です。テンプレートページは、必ず新しいページから始まります。

![本文パネルに新しいページのMarkdownがあり、その隣に、青い見出しと段落とタブ付きの箱二つを持つ出来上がったページが表示されている。](https://postext.dev/docs-shots/ja/fill.webp)

*Markdownとキャンバスに表示されたページ。*

Markdownに書かれていないものに注目してください。位置も、大きさも、色もありません。それらはテンプレートが持っていて、同じMarkdownでも別のテンプレートで組めば見た目が変わります。

## 4. 地図にラベルを付ける

6ページと7ページには、見開きにまたがる地図の絵があります。地図の上の言葉は、絵の一部ではありません。それぞれの名前は、地図の `:::figure` の中にあるMarkdownの1行です。

```md
:::figure{resource="mapa" slot="mapa"}
::label[Spring]{at="nacimiento"}
::label[Molinar]{at="molinar"}
::label[Lower course]{at="bajo"}
:::
```

`at` は**アンカー**を指定します。アンカーは絵の上の1点で、絵のリソースに一度だけ定義し、すべての言語で共有します。Molinarの石橋を足してみます。

1. **本文**パネルで地図の図へ移り（`at="bajo"` で検索できます）、最後のラベルの下に次の行を足します。`::label[Stone bridge]{at="bridge"}`
2. **検査**を開きます。6ページについて*存在しないアンカーのラベル*というエントリが出ています。絵に `bridge` というアンカーがないためです。エントリのピンのボタン（*アンカー bridge を画像に配置*）を押します。
3. ダイアログに、アンカーが付いた地図が出ます。*アンカーのないラベル*の下で、`bridge` という名前が選ばれています。絵の上の橋がある場所をクリックします。
4. 新しいアンカーの**ラベルスタイル**を、町の名前に使っているスタイルの `pueblo` にして、**保存**を押します。

![アンカーのダイアログ。点の付いた地図と、選択された新しいアンカー bridge、そのラベルスタイルの欄が表示されている。](https://postext.dev/docs-shots/ja/anchor.webp)

*新しいアンカーは、絵の上のクリック1回で付きます。ラベルスタイルを選ぶと、町の名前と同じ見た目になります。*

![6ページと7ページにまたがる地図。橋の位置に新しいラベル Stone bridge があり、そばに町の名前のラベルが並んでいる。](https://postext.dev/docs-shots/ja/map.webp)

*ラベルは、クリックした位置に、この本のフォントで置かれます。*

*Stone bridge*という語はMarkdownにあり、点は絵に属します。ページを翻訳するときは、同じアンカーに別の言葉を付けます。

## 5. ページを翻訳する

翻訳は、同じテンプレートに別の言葉を入れることです。Sandboxには、それを持つ方法が二つあります。一つは、複数の言語を同時に持つ本にすることです。`.postext` ファイルに版を一つずつ入れておくと、キャンバスの上のバーで版を切り替えられ、検査パネルはすべての版を読みます（[本の版](https://postext.dev/ja/docs/sandbox-previews.md#本の版)を参照）。ファイルが要らない簡単な方法は、本を別の言語でコピーすることです。

1. **本**を開き、自分の本の**⋯**を押して**複製**を選びます。または**新規**を押して**開いている本の複製**を選びます。コピーを開きます。コピーは元の本と同じ名前なので、同じメニューの**名前を変更…**で別の名前にします。
2. **デザイン**パネルで**表記体系**を開き、**言語と書字方向**の**文書の言語**を設定します。ハイフネーション、引用符、エンジンが自分で書く語（囲みの切れ目に出る*Continued*など）は、この設定に従います。
3. **本文**パネルで言葉を翻訳し、それ以外はそのままにします。

| 翻訳するもの | そのままにするもの |
| --- | --- |
| 見出し、段落、リストの文章 | コロン4つ、`page` という語、フェンスの `template="…"` |
| 枠の `label="…"` | 枠の `slot="…"` |
| `::label[…]`、`::alt[…]`、`::caption[…]` のかっこの中の文章 | ラベルの `at="…"` と図の `resource="…"` |

絵、アンカー、箱、箱の色はコピーに付いてくるので、作業は要りません。復習のページをスペイン語にしたコピーは、次のようになります。

```md
::::page{template="review"}
# Repasa lo aprendido

Un río cambia mientras baja de las montañas al mar. Lee los recuadros y respóndelos con tus propias palabras.

:::frame{slot="remember" label="Recuerda"}
Un manantial da un hilo de agua, los arroyos se unen en un río y el río se ensancha al acercarse al mar.
:::

:::frame{slot="try" label="Inténtalo"}
Dibuja un río desde su manantial hasta el mar. Escribe en tu dibujo el nombre de los tres cursos.
:::
::::
```

![別の言語にした本のコピー。翻訳したページを表示した本文パネルと、翻訳した見出し、本文、タブが付いたキャンバス上のページ。](https://postext.dev/docs-shots/ja/translate.webp)

*翻訳したページです。テンプレートは同じで、言葉だけが違います。*

## 6. 収まらないものを直す

言葉の長さは言語によって違い、英語の文章が入っていた箱にスペイン語の文章が入らないことがあります。そうした枠は、検査パネルが見つけてくれます。確かめるには、翻訳したページの `remember` 枠に、適当な文章を3、4段落貼り付けて、ページに入る量より多くします。

ページには、赤く囲まれた枠と、その下端の下に不足量を示す帯（*26 mm 不足*）が出ます。**検査**の*テンプレートページ*の下に、*枠に収まらないテキスト*というエントリが出ます。ここには、レイアウトが諦める前に試したこと（周りの枠から場所をもらう、文字を小さくする）と、打てる手がボタンで並びます。

- *文字を82.5 %まで縮められるようにする（fit.minScale）*は、この枠の文字をその大きさまで小さくできるようにします。数行あふれるだけのときに向いています。
- *次のページへ続ける（overflow.continueIn）*は、収まらない分を、このページの後ろに足したページへ送ります。もっと長い文章に向いています。
- *約495文字削る*は、何も変えません。枠の文章を選択し、削る量を教えてくれます。

テンプレート（それで組んだすべてのページ）を変えるボタンは、先に設定の名前を挙げて確認を求めます。**変更する**を押します。ページが組み直され、箱は切れ目の語（*Continúa*）で終わり、残りは足されたページの先頭に続きます。変更は**Cmd/Ctrl+Z**で元に戻せます。キャンバスの上のバーにある**再配置**を押すと、*動いたものとその理由*が開きます。内容に合わせて大きさや位置が変わった枠が、理由とともに言葉で示されます。

![検査パネルに「枠に収まらないテキスト」のエントリと、三つの対処のボタン。ページでは最初の箱が赤く囲まれ、26 mm 不足と書かれた帯が付いている。](https://postext.dev/docs-shots/ja/checks.webp)

*収まらない枠と、レイアウトが用意した対処です。*

## 7. ページとテキストで選択する

ページとMarkdownは、互いに連動します。

- **ページからテキストへ。** 枠の言葉をクリックすると、**本文**パネルのその段落にカーソルが移り、プレビューの下のパスに今いる場所が出ます（*10ページ › column › try › 段落 1*）。デザインモードでは、同じクリックでテンプレートエディタ用にその枠が選ばれます。
- **テキストからページへ。** 段落にカーソルを置くと、それを収めた枠と段落そのものがページ上で囲まれ、同じパスに位置が出ます。
- **検査から。** 検査パネルのエントリをクリックすると、Sandboxがそのページへ移り、枠を選んで、その文章にカーソルを置きます。複数の版がある本では、問題のある版に切り替わります。
- **箱のタブで。** ダブルクリックすると、タブの上に `label` の入力欄が開きます。Enterで変更を確定し、Escで閉じます。

![二つ目の箱がオレンジで囲まれたページと、選択された枠のMarkdownを示す本文パネル。](https://postext.dev/docs-shots/ja/select.webp)

*ページをクリックすると、そのMarkdownにカーソルが移り、プレビューの下のパスがどの枠かを示します。*

## 次に読むもの

- [本をテンプレートページへ移す](https://postext.dev/ja/docs/migrating-to-composed-pages.md)：ページのテキストをスタイルの中に持っている本は、そのテキストをMarkdownへ移せます。
- [テンプレートページ](https://postext.dev/ja/docs/composed-pages.md)：ページフェンスのすべての属性、図とラベルの行、ページの組み方、すべての警告とその直し方。
- [設定：テンプレートページ](https://postext.dev/ja/docs/configuration-composed-pages.md)：テンプレート、枠、グループのすべてのフィールド、継承、見開き。
- [Sandbox：テンプレートページ](https://postext.dev/ja/docs/sandbox-composed-pages.md)：テンプレート、枠のスタイル、すべての版での検査、修正の画面。