# 国ごとの書き方で組む筆算プリント > Markdown の1行 - 864 ÷ 4 がそのまま筆算になる計算プリント。数字を1マスに1つずつ置き、わり算の筆算は国ごとの学校の書き方に合わせます。 - HTML版: https://postext.dev/ja/cookbook/column-arithmetic-by-country - レシピ No. 170 · 教科書 · 難易度 3 (上級) · 出力: Canvas, PDF, ライブ操作 - ジャンル: ワークブックと練習問題, 教科書 - 必要なもの postext ≥ 1.59.0, postext-pdf ≥ 1.59.0 · テスト環境 1.59.0, postext-pdf 1.59.0 ／テスト日 2026-10-24 - ページ: [1](https://postext.dev/cookbook/column-arithmetic-by-country/es/p01.webp?v=745a9023), [2](https://postext.dev/cookbook/column-arithmetic-by-country/es/p02.webp?v=745a9023), [1](https://postext.dev/cookbook/column-arithmetic-by-country/es/p03.webp?v=745a9023), [2](https://postext.dev/cookbook/column-arithmetic-by-country/es/p04.webp?v=745a9023) - PDF: https://postext.dev/cookbook/column-arithmetic-by-country/es/column-arithmetic-by-country.pdf?v=745a9023 - Sandboxで開く: https://postext.dev/ja/sandbox#recipe=column-arithmetic-by-country&lang=es (.postext: https://postext.dev/cookbook/column-arithmetic-by-country/es/column-arithmetic-by-country.postext) - 最終更新: 2026-10-24 - 他の言語: [en](https://postext.dev/en/cookbook/column-arithmetic-by-country.md), [es](https://postext.dev/es/cookbook/column-arithmetic-by-country.md), [ca](https://postext.dev/ca/cookbook/column-arithmetic-by-country.md), [de](https://postext.dev/de/cookbook/column-arithmetic-by-country.md), [fr](https://postext.dev/fr/cookbook/column-arithmetic-by-country.md), [it](https://postext.dev/it/cookbook/column-arithmetic-by-country.md), [pt](https://postext.dev/pt/cookbook/column-arithmetic-by-country.md), [zh](https://postext.dev/zh/cookbook/column-arithmetic-by-country.md), [ar](https://postext.dev/ar/cookbook/column-arithmetic-by-country.md) ## かんたんな説明 9歳の子ども向けの計算プリントを、スペイン語、英語、フランス語、ドイツ語で作ります。わり算の書き方は国ごとに違い、プリントもそれに合わせます。スイッチで、答えをすべて書き込んだ先生用に切り替わります。 ## できあがり 小学4年の計算ドリルの第3単元『四則計算』を、4つの版で組みます。まず3列に並べた暗算、次にたし算・ひき算・かけ算の筆算を1マスに1けたずつ、答えを書くマスの列をつけて置き、最後にわり算と方眼紙の文章題が来ます。版ごとの違いが出るのはわり算です。英語版はわる数を ⟌ の外に書き、商を上に置きます。スペイン語版とフランス語版は、わる数をわられる数の右のかこみに入れ、商をその下に書きます。ドイツ語版は `864 : 4 =` を1行に書いて下に途中の計算を書く場所を空け、かけ算の記号には点を使います。暗算に出てくる小数点がコンマか点かも、言語に合わせて変わります。ページの上のスイッチで児童用のプリントが先生用に変わり、答えがすべてオレンジ色でそれぞれのマスに入ります。 **このレシピが答える問い:** - わり算の筆算を、国ごとの学校の書き方どおりに組むにはどうしますか？ - 生徒用から、答えを欄に刷り込んだ教師用を作るには？ ## 手短な答え ```js // script.js, 行 26–42 // `- 864 : 4` in the Markdown is one operation; the style sets it digit by digit in squares // of 7.2 mm, a cell for each figure of the answer. Long division follows the country: the // divisor in an L right of the dividend in Spain and France (potence), `864 : 4 =` on one // line in Germany, the bracket ⟌ in English-speaking schools. const calculo = { id: 'calculo', number: { shape: 'disc', background: col('accent'), fontFamily: LABEL, fontWeight: 700 }, instruction: { bold: true, color: col('ink') }, grid: { cell: mm(9), fontFamily: TEXT, fontSize: pt(15), rule: col('rule'), color: col('ink') }, arithmetic: { columns: 4, division: t({ es: 'potence', fr: 'potence', de: 'inline', en: 'bracket' }) }, blank: { look: 'box', width: em(3.2), color: col('rule'), weight: pt(0.8) }, area: { kind: 'grid', spacing: mm(5), color: col('rule'), weight: pt(0.4) }, answers: { color: col('accent'), fontFamily: LABEL }, // the teacher's copy, in the accent marginTop: mm(7), marginBottom: mm(2), itemSpacing: em(0.5), }; ``` ## 材料 **学べること** - [筆算](https://postext.dev/ja/docs/exercises.md#筆算): 筆算（+ − ×）を一桁一マスで組む。わり算は各言語の学校の書き方に従う。英語圏の ⟌、ヨーロッパ南部のかぎ形、ドイツの 864 : 4 = の横書き。 - [教師用指導書](https://postext.dev/ja/docs/exercises.md#教師用の赤刷り版): exercises.edition: 'teacher' で、すべての答えを第二色で欄の中に印刷し、正しい選択肢に丸をつける。生徒用から教師用を作る。 - [練習問題のスタイル](https://postext.dev/ja/docs/exercises.md#練習問題スタイル): exerciseStyles。練習問題の組み方を決める。番号（丸、四角、見出し語）、指示文、選択肢の記号、空欄、正誤の欄、線結びの点、語群、解答欄、マス目、活動アイコン、難易度。 **ほかに使うもの** - [練習問題](https://postext.dev/ja/docs/exercises.md#練習問題) - [穴埋めと語群](https://postext.dev/ja/docs/exercises.md#穴埋めと語群) - [記述問題と解答欄](https://postext.dev/ja/docs/exercises.md#記述問題と解答欄) - [デザインした章扉](https://postext.dev/ja/docs/configuration-headings.md#幅と詳細デザイン) - [見出しの属性](https://postext.dev/ja/docs/document-format.md#見出しの属性) - [セマンティックカラーパレット](https://postext.dev/ja/docs/configuration-fonts-colors-viewers.md#カラーパレット) - [ハイフネーションと文書の言語](https://postext.dev/ja/docs/justification.md#対応するロケール) - [キャンバス上のページ](https://postext.dev/ja/docs/configuration-programmatic-usage.md#ページをビットマップに描画する) - [PDFの書き出し](https://postext.dev/ja/docs/configuration-pdf-output.md#pdfの生成) - [段落スタイル](https://postext.dev/ja/docs/configuration-styles.md#段落スタイル) - [囲みの中や本文中の段組み](https://postext.dev/ja/docs/document-format-directives.md#columns) - [解答](https://postext.dev/ja/docs/exercises.md#解答) - [PDFに埋め込むフォント](https://postext.dev/ja/docs/configuration-pdf-output.md#なぜフォントプロバイダーが必要か) **設定の一覧** - [`bodyText`](https://postext.dev/ja/docs/configuration-text.md#本文), [`colorPalette`](https://postext.dev/ja/docs/configuration-fonts-colors-viewers.md#カラーパレット), `exerciseStyles`, `exercises`, [`footer`](https://postext.dev/ja/docs/configuration-headers-footers.md#柱とノンブル), [`header`](https://postext.dev/ja/docs/configuration-headers-footers.md#柱とノンブル), [`headings`](https://postext.dev/ja/docs/configuration-headings.md#見出し), [`layout`](https://postext.dev/ja/docs/configuration-page-layout.md#レイアウト), [`locale`](https://postext.dev/ja/docs/configuration-language.md#ハイフネーション), [`orderedLists`](https://postext.dev/ja/docs/configuration-lists-math.md#番号付きリスト), [`page`](https://postext.dev/ja/docs/configuration-page-layout.md#ページ), [`paragraphStyles`](https://postext.dev/ja/docs/configuration-styles.md#段落スタイル) **API** - [`buildDocument`](https://postext.dev/ja/docs/configuration-programmatic-usage.md#文書のビルド), [`buildDocumentWithFonts`](https://postext.dev/ja/docs/configuration-programmatic-usage.md#レイアウトの前にフォントを読み込む), [`decompressWoff2`](https://postext.dev/ja/docs/configuration-pdf-output.md#ブラウザー向けフォントプロバイダーfontsource--woff2), [`renderPageToCanvas`](https://postext.dev/ja/docs/configuration-programmatic-usage.md#ページをビットマップに描画する), [`renderToPdf`](https://postext.dev/ja/docs/configuration-pdf-output.md#pdfの生成) **書体** - Fira Sans (OFL-1.1), Lexend (OFL-1.1) ## 作り方 ### 1 · 計算を Markdown に1行ずつ書く ```js // script.js, 行 26–42 // `- 864 : 4` in the Markdown is one operation; the style sets it digit by digit in squares // of 7.2 mm, a cell for each figure of the answer. Long division follows the country: the // divisor in an L right of the dividend in Spain and France (potence), `864 : 4 =` on one // line in Germany, the bracket ⟌ in English-speaking schools. const calculo = { id: 'calculo', number: { shape: 'disc', background: col('accent'), fontFamily: LABEL, fontWeight: 700 }, instruction: { bold: true, color: col('ink') }, grid: { cell: mm(9), fontFamily: TEXT, fontSize: pt(15), rule: col('rule'), color: col('ink') }, arithmetic: { columns: 4, division: t({ es: 'potence', fr: 'potence', de: 'inline', en: 'bracket' }) }, blank: { look: 'box', width: em(3.2), color: col('rule'), weight: pt(0.8) }, area: { kind: 'grid', spacing: mm(5), color: col('rule'), weight: pt(0.4) }, answers: { color: col('accent'), fontFamily: LABEL }, // the teacher's copy, in the accent marginTop: mm(7), marginBottom: mm(2), itemSpacing: em(0.5), }; ``` `:::exercise{type="arithmetic"}` には、リストの項目ひとつにつき1問を、`- 864 ÷ 4` のようにその国の記号（`÷`、`:`、`×`、`·`）で書きます。答え、商、余りはエンジンが計算し、筆算の描き方はスタイルが決めます。マスは 7.2 mm、`arithmetic.division` は `t()` で版ごとに選びます。暗算の列はふつうの穴埋め問題で、そのリストを `:::columns{count=3}` のグループに入れると、どの `[[70]]` もほかと同じ幅のマスになります。 ### 2 · プリントの見出しを組む ```js // script.js, 行 46–67 const at = (to, edge, x = 0, y = 0, size) => ({ anchor: { to, edge }, offset: { x: mm(x), y: mm(y) }, ...(size && { size }) }); const field = (id, attr, x, width) => [ { kind: 'text', id, content: `{attr.${attr}}`, fontFamily: LABEL, fontSize: pt(9.5), fontWeight: 600, color: col('muted'), align: 'left', placement: at('container', 'top-left', x, 26) }, { kind: 'rule', id: `${id}-line`, direction: 'horizontal', thickness: pt(0.75), color: col('rule'), placement: at('container', 'top-left', x + 17, 31, { width: mm(width) }) }, ]; const head = { enabled: true, minHeight: mm(36), slot: { elements: [ { kind: 'box', id: 'band', style: { backgroundColor: col('accent'), borderRadius: mm(3) }, placement: at('container', 'top-left', 0, 0, { width: 'fill', height: mm(19) }) }, { kind: 'text', id: 'unit', content: '{attr.unidad}', fontFamily: LABEL, fontSize: pt(9), fontWeight: 700, color: col('accent'), align: 'center', verticalAlign: 'middle', textTransform: 'uppercase', letterSpacing: pt(1.2), lineHeight: 1.1, box: { backgroundColor: col('paper'), borderRadius: mm(3.5) }, placement: at('container', 'top-left', 5, 5, { width: mm(26), height: mm(9) }) }, { kind: 'text', id: 'title', content: '{titleText}', fontFamily: LABEL, fontSize: pt(21), fontWeight: 700, color: col('paper'), align: 'left', lineHeight: 1.1, placement: at('container', 'top-left', 37, 5.2) }, ...field('name', 'nombre', 0, 100), ...field('date', 'fecha', 124, 38), ] } }; ``` 単元のレベル1見出しが、オレンジの帯、札、題を描きます。名前と日付の欄は見出しの属性（`nombre="Name" fecha="Date"`）から作るので、どの版にもその言語で欄の名前が入ります。 ### 3 · 児童用と先生用を切り替える ```js // script.js, 行 180–194 const form = document.getElementById('controls'); const labels = t({ es: ['Alumno', 'Profesor'], en: ['Pupil', 'Teacher'], fr: ['Élève', 'Enseignant'], de: ['Schüler', 'Lehrkraft'] }); form.querySelectorAll('label span').forEach((span, k) => { span.textContent = labels[k]; }); function render() { // The same config, edited in place: the next build sees the edition the form asks for. config.exercises.edition = form.elements.edition.value; const doc = buildDocument({ markdown }, config); // the faces are loaded by now showPages(doc, { title }); document.querySelectorAll('#pt-actions a, [data-postext-pdf]').forEach((old) => old.remove()); offerPdf(() => renderToPdf(doc, { fontProvider: fontsourceProvider }), `${RECIPE}-${LANG}-${config.exercises.edition}.pdf`); } form.addEventListener('change', render); render(); ``` `exercises.edition: 'teacher'` を指定すると、すべての答えがそれぞれの位置に `answers.color` の色（ここではアクセント色）で刷られます。暗算のマス、各答えの数字、商と余り、文章題の解答例です。ページの上のフォームは設定をその場で書き換えて組み直します。フォントは読み込み済みなので、ふつうの `buildDocument` で足ります。キャプチャでは先に両方のプリントを組むので、公開されるページは児童用、先生用の順に並びます。 ## レシピの全体 下のファイルはレシピのフォルダーから合成したもので、サンプルのテキストとレシピ集の共通キットを埋め込んであります。1つのページとして動かすには、HTMLを``に、CSSを``); document.body.insertAdjacentHTML('afterbegin', '
'); document.getElementById('pt-title').textContent = document.title || 'Postext'; addEventListener('error', (event) => kitFail(event.error ?? event.message)); addEventListener('unhandledrejection', (event) => kitFail(event.reason)); } if (title) document.getElementById('pt-title').textContent = title; return document.getElementById('pages') ?? document.body.appendChild(Object.assign(document.createElement('main'), { id: 'pages' })); } function kitStatus(text) { viewer(); document.getElementById('pt-status').textContent = text; } function kitFail(error) { document.documentElement.dataset.postext = 'error'; kitStatus(`Error: ${error?.message ?? error}`); } // ─── Kit · pdf v3 ── the same in every recipe that exports a PDF /** The Fontsource files the screen used, as TrueType, with their range and * place: the nearest weight the family ships in that style, upright with no italic; * latin, then what its letters need (kitSubsetsFor). */ async function fontsourceProvider(family, weight, style, request) { const id = fontsourceId(family); const meta = await fontsourceMeta(family); const s = style === 'italic' && meta && !meta.styles.includes('italic') ? 'normal' : style; const shipped = meta ? await fontsourceWeights(family, s) : []; const weights = shipped.length ? shipped : [400, 700]; const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a)); const text = String.fromCodePoint(...(request?.codePoints ?? [])); const files = await Promise.all(['latin', ...kitSubsetsFor(text, meta)].map(async (subset, order) => { const res = await fetch(`${await fontsourceAt(id)}files/${id}-${subset}-${w}-${s}.woff2`); if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} ${subset}`); return Object.assign(await decompressWoff2(new Uint8Array(await res.arrayBuffer())), { unicodeRange: kitRanges()[subset], order }); })); return files.length === 1 ? files[0] : files; } /** A "Build the PDF" button; then "Open the PDF" (a new tab: CodePen's frame * shows no PDFs) and a download link. */ function offerPdf(makePdf, filename) { viewer(); const button = Object.assign(document.createElement('button'), { type: 'button', textContent: 'Build the PDF' }); button.dataset.postextPdf = filename; button.addEventListener('click', async () => { button.disabled = true; button.textContent = 'Building the PDF…'; try { const bytes = await makePdf(); const url = URL.createObjectURL(new Blob([bytes], { type: 'application/pdf' })); const size = `${Math.max(1, Math.round(bytes.length / 1024))} KB`; button.replaceWith( Object.assign(document.createElement('a'), { href: url, target: '_blank', rel: 'noopener', textContent: 'Open the PDF ↗' }), Object.assign(document.createElement('a'), { href: url, download: filename, textContent: `Download ${filename} · ${size}` })); } catch (error) { button.disabled = false; button.textContent = 'Build the PDF'; kitFail(error); } }); document.getElementById('pt-actions').append(button); } // ─── /Kit ─────────────────────────────────────────────────────────────────────── ``` ## アレンジ ### 答えを逆さにして問題の下に置く パズル本でよく見るやり方です。各問題の答えを180°回して、その下に置きます。 ```diff - exercises: { edition: 'student' }, // the switch above the pages sets 'teacher' + exercises: { edition: 'student', solutions: { placement: 'inverted', layout: 'key' } }, ``` ### どの版でも ⟌ でわり算を書く 日本や中国の学校もこの形を使います。リストにない言語は、その言語の既定の形になります。 ```diff - division: t({ es: 'potence', fr: 'potence', de: 'inline', en: 'bracket' }) }, + division: 'bracket' }, ``` ## よくあるつまずき - 計算に使えるのは整数だけです。`12,5 + 3,75` のような小数の計算は読み取られず、書いたとおりに印刷されます。小数は暗算の穴埋めに入れてください。そこでは答えをテキストとして扱います。 ## クレジット - レシピ: Ignacio Ferro ([@drnachio](https://github.com/drnachio)) - 書体: Fira Sans (OFL-1.1), Lexend (OFL-1.1) - コード: MIT · サンプルの内容: CC-BY-4.0 ## 関連レシピ - [No. 168 · 小学校の学習ワークの1単元](https://postext.dev/ja/cookbook/primary-workbook-activities.md): 4ページの理科ワークの単元。11の活動は Markdown に書いた :::exercise のブロックで、ひとつの演習スタイルが番号の円、語群、結ぶ点まで組みます。 · 難易度 2 (中級) · ワークブックと練習問題, 教科書 - [No. 172 · こたえを逆さまに刷った小学生ドリル](https://postext.dev/ja/cookbook/japanese-drill-upside-down-answers.md): ドリルのシリーズから2ページ。算数は横組み、国語は縦組みで、どの問題の下にもこたえを逆さまに刷ります。 · 難易度 2 (中級) · ワークブックと練習問題, 教科書 - [No. 174 · 答えを逆さに刷ったパズルページ](https://postext.dev/ja/cookbook/puzzle-page-upside-down-answers.md): 子ども向け雑誌のパズルページです。クロスワード、ワードサーチ、なぞなぞ、話の並べ替えなどをカードに載せ、答えはそれぞれ逆さに刷ります。 · 難易度 2 (中級) · 雑誌とジン, ワークブックと練習問題