レシピ番号168

レシピ集 · 第12章 · 教科書

小学校の学習ワークの1単元

4ページの理科ワークの単元。11の活動は Markdown に書いた :::exercise のブロックで、ひとつの演習スタイルが番号の円、語群、結ぶ点まで組みます。

このページの内容
出力
Canvas · PDF
レベル
中級
Postext
Postext 1.59.0で検証済み
1.59.0以上が必要 · postext-pdf ≥ 1.59.0
ライセンス
2026年10月24日更新
コードMIT · 本文CC BY 4.0

1ページ（全4ページ）

このレシピをテキストで読む →
  • スペイン語の見本：日本語版はまだありません
  • 仕上がり210 × 297 mm
  • 1段
  • Atkinson Hyperlegible Next 12/17
  • Grandstander
  • 4ページ
  • レベル
  • Postext 1.59.0
  • 組版時間18 ms
  • コード182行

かんたんな説明

8歳の子ども向けの、背骨のある動物を学ぶ学習ワークです。問題と答えは本文に書き、どの活動がページでどう見えるかはひとつのスタイルが決めます。

できあがり

小学3年生向け理科ワークの第5単元を A4 判で組みます。題は Animals with backbones（背骨のある動物）です。単元のとびらでは、緑の帯の下に池の絵を置きます。そのあとに11の活動が続き、どれも緑の円に入った番号と、えんぴつ、ふきだし、ペアのいずれかのアイコンを持ちます。点線で囲んだ色付きの枠の語群、T か F に印をつける文、動物をその仲間に線で結ぶ問題、一文と短い文章の中で丸で囲む語、番号をつけるカエルの成長段階、文字さがし、動物の仲間分け、罫線に書く自由記述の問い、方眼に書くもうひとつの問いが並びます。スペイン語版は同じ単元をスペインの学校の流儀で組み、V と F、une con flechas を使います。挿絵の3枚は拡散モデルで生成しました。

このレシピが答える質問

  • 丸数字、語群、正誤問題、線結びのあるワークブックのページはどう組む？
  • 問題番号の横に活動アイコン（書く、話す、ペア）を置くには？
  • 記入線、解答欄、語群、チェックリストのあるワークシートのページを作るには？

手短な答え

script.js · 34〜61行コード全体で見る
// The Markdown says what each activity asks (:::exercise, [[answers]], - A -> B, - [x]);
// this style says how a Spanish workbook prints it: the number in a disc of the unit
// colour, the instruction in bold, blanks on a line, V/F boxes at the line's end, dots to
// join, the bank in a tinted box, squared paper for writing and the activity icons.
const icon = (id, alt) => ({ resourceId: `icon-${id}`, alt, size: 1.05 });
const actividad = {
  id: 'actividad',
  number: { shape: 'disc', background: col('unit'), color: col('paper'),
    fontFamily: DISPLAY, fontSize: em(1.05), fontWeight: 800 },
  instruction: { bold: true, color: col('ink') },
  options: { marker: 'circle' },
  blank: { look: 'line', color: col('ink'), weight: pt(0.75), extra: em(2) },
  trueFalse: { look: 'boxes' }, // V F in Spanish, T F in English: the language's own words
  match: { look: 'dots', gap: em(7), dotSize: em(0.42), color: col('unit') },
  bank: { box: 'banco', order: 'alpha', separator: ' ' },
  area: { kind: 'lines', spacing: mm(9), color: col('rule'), weight: pt(0.6) },
  grid: { cell: mm(9.5), fontFamily: DISPLAY, fontSize: pt(13), rule: col('rule'),
    color: col('ink') },
  icons: {
    escribe: icon('write', t({ es: 'Escribe', en: 'Write' })),
    oral: icon('oral', t({ es: 'Actividad oral', en: 'Speaking' })),
    pareja: icon('pair', t({ es: 'En pareja', en: 'In pairs' })),
  },
  marginTop: mm(7), marginBottom: mm(2), itemSpacing: em(0.8),
};
// The same activity written on squared paper (cuadrícula): `style="cuadricula"`.
const cuadricula = { id: 'cuadricula', extends: 'actividad',
  area: { kind: 'grid', spacing: mm(5), weight: pt(0.4) } };

材料

種類
Atkinson Hyperlegible Next, Grandstander (SIL OFL 1.1)
素材
  • charca-1088.jpg
  • ciclo-1088.jpg
  • nina-720.jpg
  • Animals at a pond: a frog, a kingfisher, a trout, a turtle and a rabbit. (Generated With Diffusion Models, オリジナル)
  • Five stages of a frog's life, in a jumbled order. (Generated With Diffusion Models, オリジナル)
  • A girl with a magnifying glass watching a sparrow and a lizard on a wall. (Generated With Diffusion Models, オリジナル)

作り方

#1 · 活動は Markdown に書き、スタイルは一度だけ決める

script.js · 34〜61行コード全体で見る
// The Markdown says what each activity asks (:::exercise, [[answers]], - A -> B, - [x]);
// this style says how a Spanish workbook prints it: the number in a disc of the unit
// colour, the instruction in bold, blanks on a line, V/F boxes at the line's end, dots to
// join, the bank in a tinted box, squared paper for writing and the activity icons.
const icon = (id, alt) => ({ resourceId: `icon-${id}`, alt, size: 1.05 });
const actividad = {
  id: 'actividad',
  number: { shape: 'disc', background: col('unit'), color: col('paper'),
    fontFamily: DISPLAY, fontSize: em(1.05), fontWeight: 800 },
  instruction: { bold: true, color: col('ink') },
  options: { marker: 'circle' },
  blank: { look: 'line', color: col('ink'), weight: pt(0.75), extra: em(2) },
  trueFalse: { look: 'boxes' }, // V F in Spanish, T F in English: the language's own words
  match: { look: 'dots', gap: em(7), dotSize: em(0.42), color: col('unit') },
  bank: { box: 'banco', order: 'alpha', separator: ' ' },
  area: { kind: 'lines', spacing: mm(9), color: col('rule'), weight: pt(0.6) },
  grid: { cell: mm(9.5), fontFamily: DISPLAY, fontSize: pt(13), rule: col('rule'),
    color: col('ink') },
  icons: {
    escribe: icon('write', t({ es: 'Escribe', en: 'Write' })),
    oral: icon('oral', t({ es: 'Actividad oral', en: 'Speaking' })),
    pareja: icon('pair', t({ es: 'En pareja', en: 'In pairs' })),
  },
  marginTop: mm(7), marginBottom: mm(2), itemSpacing: em(0.8),
};
// The same activity written on squared paper (cuadrícula): `style="cuadricula"`.
const cuadricula = { id: 'cuadricula', extends: 'actividad',
  area: { kind: 'grid', spacing: mm(5), weight: pt(0.4) } };

活動はどれも :::exercise のブロックです。児童が読む文も正解も本文にあります。[[hair]] は答えが hair の空欄、- [x] は正しい文、- Dolphin -> Mammal は線で結ぶ組、[[pelo | (plumas)]] は正しい語をかっこに入れた選択肢です。スタイルが持つのは見た目だけなので、11の活動はひとつの actividad を共有し、2つ目の cuadricula が extends でそれを受け継いで、罫線を方眼に替えます。エンジンは活動に番号をふり、結ぶ問題の右の列と並べかえの項目をシードで混ぜ、どの空欄もいちばん長い答えの幅にそろえて答えが透けないようにします。英語版には T と F、スペイン語版には V と F を印刷し、設定にそのための語はひとつも書きません。

#2 · 活動にアイコンを付ける

script.js · 277〜288行コード全体で見る
const disc = (body) => '<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" '
  + `viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="${palette.unit}"/>`
  + `<g fill="none" stroke="#fff" stroke-width="1.7" stroke-linecap="round" `
  + `stroke-linejoin="round">${body}</g></svg>`;
const ICONS = {
  write: disc('<path d="M7 17l1-4 7.5-7.5 3 3L11 16l-4 1z"/><path d="M14 7l3 3"/>'),
  oral: disc('<path d="M6 7.5h12v7.5H11l-3.5 3v-3H6z"/><path d="M9.5 11.2h.01M12 11.2h.01M14.5'
    + ' 11.2h.01" stroke-width="2.2"/>'),
  pair: disc('<circle cx="9" cy="9" r="2.3"/><circle cx="15.3" cy="9.6" r="2"/>'
    + '<path d="M4.8 17.5c.4-2.8 2.1-4.3 4.2-4.3s3.8 1.5 4.2 4.3M13.6 13.9c.6-.3 1.1-.4 1.7-.4'
    + ' 1.9 0 3.3 1.3 3.7 3.8"/>'),
};

exerciseStyles[].icons のアイコンは本の画像をひとつ指し、:::exercise{icon="oral pareja"} は書いた順に画像を番号のあとに並べます。読み上げでは alt が読まれます。アイコンは単元の色の円の上にコードで描いた平らな記号なので、PDF でもくっきりし、パレットに合わせて色が変わります。書く活動の横にはえんぴつを置きます。話すアイコンとペアのアイコンは最後の活動の印で、そこには書く欄がありません（area="none"）。

#3 · 単元を帯と絵で始める

script.js · 65〜81行コード全体で見る
const at = (to, edge, x = 0, y = 0, size) => ({ anchor: { to, edge },
  offset: { x: mm(x), y: mm(y) }, ...(size && { size }) });
const PIC = 75; // mm: the painting's height (it is 176 × 75 mm, 2.35:1)
const opener = { enabled: true, minHeight: mm(20 + PIC + 4), slot: { elements: [
  { kind: 'box', id: 'band', style: { backgroundColor: col('unit'), borderRadius: mm(4) },
    placement: at('container', 'top-left', 0, 0, { width: mm(176), height: mm(18) }) },
  { kind: 'text', id: 'unit', content: '{attr.unidad}', fontFamily: DISPLAY, fontSize: pt(11),
    fontWeight: 800, color: col('unit'), align: 'center', verticalAlign: 'middle',
    textTransform: 'uppercase', letterSpacing: pt(1.4), lineHeight: 1.1,
    box: { backgroundColor: col('paper'), borderRadius: mm(4) },
    placement: at('container', 'top-left', 4, 4, { width: mm(30), height: mm(10) }) },
  { kind: 'text', id: 'title', content: '{titleText}', fontFamily: DISPLAY, fontSize: pt(27),
    fontWeight: 800, color: col('paper'), align: 'left', lineHeight: 1,
    placement: at('container', 'top-left', 40, 4.4, { width: mm(132) }) },
  { kind: 'image', id: 'picture', resourceId: '{attr.pic}', decorative: true,
    placement: at('container', 'top-left', 0, 22, { width: mm(176), height: mm(PIC) }) },
] } };

単元のレベル1の見出しが、属性（unidad="Unit 5" pic="charca"）から帯、単元番号の角丸、題を描き、帯の下に 176 × 75 mm の絵を置きます。活動の中の絵には、キャプションも番号もないリソースの種類（dibujo）を使います。ワークの絵はそう印刷するものだからです。本文は子どもにも読みやすく組みます。Atkinson Hyperlegible Next の 12 pt、行送り 17 pt、ハイフネーションなし、左揃えです。

レシピの全体

Sandbox
// ═══ Postext Cookbook · Nº 168 · Primary workbook unit of activities ═══════════
// https://postext.dev/en/cookbook/primary-workbook-activities
// Code: MIT · Text: original (CC BY 4.0) · Pictures: generated with diffusion models
// Fonts: Atkinson Hyperlegible Next, Grandstander (SIL OFL 1.1) · Needs postext ≥ 1.59.0
import {
  buildDocumentWithFonts, renderPageToCanvas, registerResourceImage,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'es'; // @lang: the language of the sample document ('es' | 'en')
const RECIPE = 'primary-workbook-activities';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: one unit colour (green for this unit), a pale tint of it, a sun yellow
const palette = {
  ink: '#1f2b27', // text: a green-tinted near-black
  unit: '#2b7a3d', // the unit's colour: discs, band, folio, dots to join
  deep: '#1d5a2b', // the bank's words and the kicker on white
  tint: '#e6f2e2', // the reminder box, the bank
  sun: '#f2b330', // the reminder's stripe
  rule: '#9cc3a2', // writing lines, the squared paper
  muted: '#5c6b64', // running heads, colophon
  paper: '#ffffff',
};
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = [
  ...Object.entries(palette).map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } })),
  { id: 'main-color', name: 'unit (defaults)', value: { hex: palette.unit, model: 'hex' } },
];
// #endregion
const [TEXT, DISPLAY] = ['Atkinson Hyperlegible Next', 'Grandstander'];

// #region answer: the workbook's activity style, one for every kind of exercise
// The Markdown says what each activity asks (:::exercise, [[answers]], - A -> B, - [x]);
// this style says how a Spanish workbook prints it: the number in a disc of the unit
// colour, the instruction in bold, blanks on a line, V/F boxes at the line's end, dots to
// join, the bank in a tinted box, squared paper for writing and the activity icons.
const icon = (id, alt) => ({ resourceId: `icon-${id}`, alt, size: 1.05 });
const actividad = {
  id: 'actividad',
  number: { shape: 'disc', background: col('unit'), color: col('paper'),
    fontFamily: DISPLAY, fontSize: em(1.05), fontWeight: 800 },
  instruction: { bold: true, color: col('ink') },
  options: { marker: 'circle' },
  blank: { look: 'line', color: col('ink'), weight: pt(0.75), extra: em(2) },
  trueFalse: { look: 'boxes' }, // V F in Spanish, T F in English: the language's own words
  match: { look: 'dots', gap: em(7), dotSize: em(0.42), color: col('unit') },
  bank: { box: 'banco', order: 'alpha', separator: ' ' },

組み立てたscript.jsはそのまま動きます。任意のページのモジュールスクリプトに貼り付けるか、レシピをCodePenで開いてください。 GitHub上のレシピのフォルダー ↗ (新しいタブで開きます)

アレンジ

#先生用に答えを印刷する

同じ Markdown から先生用の版ができます。空欄はすべて埋まり、正しい文のボックスには印が付き、正しい語はマゼンタの丸で囲まれます。

   exerciseStyles: [actividad, cuadricula],
+  exercises: { edition: 'teacher' },

#活動の番号を四角に入れる

単元の色の角丸の四角にすると、別の出版社の体裁に見えます。

-  number: { shape: 'disc', background: col('unit'), color: col('paper'),
+  number: { shape: 'rounded', background: col('unit'), color: col('paper'),

よくあるつまずき

  • 文章の中で丸で囲む語は、丸のために左右に少し余白を取ります。そのため、カンマやピリオドの直前にある語は、その記号から少し離れて見えます。

クレジット

レシピ
Ignacio Ferro
本文
書き下ろしの文章, CC BY 4.0
画像
  • Animals at a pond: a frog, a kingfisher, a trout, a turtle and a rabbit. · Generated With Diffusion Models · オリジナル
  • Five stages of a frog's life, in a jumbled order. · Generated With Diffusion Models · オリジナル
  • A girl with a magnifying glass watching a sparrow and a lizard on a wall. · Generated With Diffusion Models · オリジナル
フォント
Atkinson Hyperlegible Next (SIL OFL 1.1) · Grandstander (SIL OFL 1.1)

この解説を編集 ↗ (新しいタブで開きます)GitHub上のレシピのフォルダー ↗ (新しいタブで開きます)

答えを逆さに刷ったパズルページ

No. 174PDF

教科書

子ども向け雑誌のパズルページです。クロスワード、ワードサーチ、なぞなぞ、話の並べ替えなどをカードに載せ、答えはそれぞれ逆さに刷ります。

レベル2/3: 中級雑誌とジン2ページ

右から左へ組むアラビア語の練習帳

No. 173PDF

教科書

右から左へ組んだアラビア語の小学校練習帳。أ ب جの選択肢、線で結ぶ2列、語群の枠、صحとخطأの欄、単語探し、アラビア・インド数字が入ります。

レベル2/3: 中級ワークブックと練習問題8ページ

国ごとの書き方で組む筆算プリント

No. 170回避策PDFライブ

教科書

Markdown の1行 - 864 ÷ 4 がそのまま筆算になる計算プリント。数字を1マスに1つずつ置き、わり算の筆算は国ごとの学校の書き方に合わせます。

レベル3/3: 上級ワークブックと練習問題4ページ

SandboxPDF