diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c2658d7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/README.md b/README.md
index 47a6dd4..a49c826 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,172 @@
-# layout-lab
-破滅派でHTML+CSSによる組版のパターンを試すためのリポジトリです。
+# hametuha-reader-lab
+
+日本語縦書き長文のための Web閲覧UI実験リポジトリ。
+
+このリポジトリは、小説投稿サイト「破滅派」での閲覧体験を改善するために、
+長文日本語テキストをブラウザで快適に読むためのレイアウトとUIを検証するための実験環境です。
+
+WordPress本体の実装とは切り離し、HTML / CSS / JavaScriptのみで
+さまざまな表示方法を試しながら最適な閲覧体験を探索します。
+
+⸻
+
+## 背景
+
+破滅派では以下のような特徴があります。
+
+ • 原稿用紙20枚程度（約8000文字）の作品が中心
+ • 100枚以上（約4万文字以上）の長文作品も存在
+ • 作者によって文字サイズ・記号・改行などの使い方が大きく異なる
+ • 閲覧環境（PC / タブレット / スマートフォン）が多様
+ • フォントサイズ変更など読者側のカスタマイズも想定される
+
+そのため、
+ • 固定ページ組版（PDFのようなページ分割）
+ • 事前に決められた段組
+
+などは破綻しやすく、Webブラウザ上での動的なレイアウト設計が必要になります。
+
+このリポジトリでは、長文小説に適した閲覧UIを検証します。
+
+⸻
+
+## このリポジトリで検証すること
+
+主に次の要素を組み合わせて比較します。
+
+レイアウト
+ • 横書き
+ • 縦書き（writing-mode: vertical-rl）
+
+段組
+ • 1段
+ • 2段（見開き風）
+
+スクロール方式
+ • 通常スクロール
+ • Scroll Snapによるページ単位スクロール
+
+操作方式
+ • スクロール操作
+ • キーボード操作
+ • ボタンによるページ送り
+
+表示環境
+ • Desktop
+ • Tablet
+ • Smartphone
+
+テキスト長
+ • 約8000文字（短編）
+ • 約40000文字（長編）
+
+⸻
+
+目標
+
+このプロジェクトの目標は 紙の本を再現することではありません。
+
+Web上で長文を読む際に重要な次の点を満たすことです。
+ • 長時間読んでも疲れない
+ • 読書位置を見失わない
+ • フォントサイズ変更に耐える
+ • 画面サイズの違いで破綻しない
+ • 長文でもパフォーマンスが落ちない
+ • ブラウザのジェスチャー（戻る操作など）と衝突しない
+
+⸻
+
+検証予定のUI案
+
+A. シンプル縦書きスクロール
+
+最もシンプルな方式。
+
+縦書き
+↓
+通常スクロール
+
+メリット
+ • 実装が簡単
+ • 長文に強い
+ • パフォーマンスが良い
+
+デメリット
+ • 本を読む感覚は弱い
+
+⸻
+
+B. 縦書き2段 + 縦スクロールページ
+
+1画面を「見開き」として扱う方式。
+
+┌─────────────┐
+│ ページ1 │ ページ2 │
+└─────────────┘
+ ↓
+ 次の見開き
+
+Scroll Snap を使い、
+1画面単位でページ送りを行う。
+
+メリット
+ • 本に近い体験
+ • 横スワイプの戻るジェスチャー問題を回避
+
+デメリット
+ • レイアウト調整が必要
+
+⸻
+
+C. 疑似ページめくりUI
+
+電子書籍のようなページめくり表現。
+
+メリット
+ • 視覚的に楽しい
+
+デメリット
+ • 実装コストが高い
+ • 可変テキストと相性が悪い
+
+⸻
+
+プロジェクト構成（予定）
+
+.
+├── index.html
+├── styles.css
+├── reader.js
+└── samples
+ ├── short.html # 約8000文字
+ └── long.html # 約40000文字
+
+
+⸻
+
+実験方針
+
+このリポジトリでは次の方針で開発します。
+ 1. WordPress依存を持たない
+ 2. UIのみを検証する
+ 3. JavaScriptは最小限にする
+ 4. CSSレイアウトを中心に実験する
+
+最終的に安定したUIが見つかった場合、
+破滅派本体の閲覧ページへ統合します。
+
+⸻
+
+将来的な展望
+
+この実験が発展すると、次のような用途に拡張できる可能性があります。
+ • 小説サイト向け閲覧UIライブラリ
+ • 日本語縦書きWebリーダー
+ • EPUB / PDFビューアのWeb版
+ • @hametuha/novel での閲覧エンジン
+
+⸻
+
+License
+
+MIT
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..b284cda
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,839 @@
+{
+ "name": "layout-lab",
+ "version": "0.1.0",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {
+ "": {
+ "name": "layout-lab",
+ "version": "0.1.0",
+ "dependencies": {
+ "express": "^5.1.0",
+ "marked": "^15.0.0"
+ }
+ },
+ "node_modules/accepts": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+ "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+ "license": "MIT",
+ "dependencies": {
+ "mime-types": "^3.0.0",
+ "negotiator": "^1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/body-parser": {
+ "version": "2.2.2",
+ "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
+ "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+ "license": "MIT",
+ "dependencies": {
+ "bytes": "^3.1.2",
+ "content-type": "^1.0.5",
+ "debug": "^4.4.3",
+ "http-errors": "^2.0.0",
+ "iconv-lite": "^0.7.0",
+ "on-finished": "^2.4.1",
+ "qs": "^6.14.1",
+ "raw-body": "^3.0.1",
+ "type-is": "^2.0.1"
+ },
+ "engines": {
+ "node": ">=18"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/bytes": {
+ "version": "3.1.2",
+ "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+ "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/call-bind-apply-helpers": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+ "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "function-bind": "^1.1.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/call-bound": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+ "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bind-apply-helpers": "^1.0.2",
+ "get-intrinsic": "^1.3.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/content-disposition": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.1.tgz",
+ "integrity": "sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=18"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/content-type": {
+ "version": "1.0.5",
+ "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+ "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/cookie": {
+ "version": "0.7.2",
+ "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+ "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/cookie-signature": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+ "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6.6.0"
+ }
+ },
+ "node_modules/debug": {
+ "version": "4.4.3",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+ "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+ "license": "MIT",
+ "dependencies": {
+ "ms": "^2.1.3"
+ },
+ "engines": {
+ "node": ">=6.0"
+ },
+ "peerDependenciesMeta": {
+ "supports-color": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/depd": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+ "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/dunder-proto": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+ "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bind-apply-helpers": "^1.0.1",
+ "es-errors": "^1.3.0",
+ "gopd": "^1.2.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/ee-first": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+ "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+ "license": "MIT"
+ },
+ "node_modules/encodeurl": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+ "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/es-define-property": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+ "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/es-errors": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+ "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/es-object-atoms": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+ "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/escape-html": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+ "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+ "license": "MIT"
+ },
+ "node_modules/etag": {
+ "version": "1.8.1",
+ "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+ "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/express": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+ "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+ "license": "MIT",
+ "dependencies": {
+ "accepts": "^2.0.0",
+ "body-parser": "^2.2.1",
+ "content-disposition": "^1.0.0",
+ "content-type": "^1.0.5",
+ "cookie": "^0.7.1",
+ "cookie-signature": "^1.2.1",
+ "debug": "^4.4.0",
+ "depd": "^2.0.0",
+ "encodeurl": "^2.0.0",
+ "escape-html": "^1.0.3",
+ "etag": "^1.8.1",
+ "finalhandler": "^2.1.0",
+ "fresh": "^2.0.0",
+ "http-errors": "^2.0.0",
+ "merge-descriptors": "^2.0.0",
+ "mime-types": "^3.0.0",
+ "on-finished": "^2.4.1",
+ "once": "^1.4.0",
+ "parseurl": "^1.3.3",
+ "proxy-addr": "^2.0.7",
+ "qs": "^6.14.0",
+ "range-parser": "^1.2.1",
+ "router": "^2.2.0",
+ "send": "^1.1.0",
+ "serve-static": "^2.2.0",
+ "statuses": "^2.0.1",
+ "type-is": "^2.0.1",
+ "vary": "^1.1.2"
+ },
+ "engines": {
+ "node": ">= 18"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/finalhandler": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+ "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+ "license": "MIT",
+ "dependencies": {
+ "debug": "^4.4.0",
+ "encodeurl": "^2.0.0",
+ "escape-html": "^1.0.3",
+ "on-finished": "^2.4.1",
+ "parseurl": "^1.3.3",
+ "statuses": "^2.0.1"
+ },
+ "engines": {
+ "node": ">= 18.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/forwarded": {
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+ "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/fresh": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+ "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/function-bind": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+ "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+ "license": "MIT",
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/get-intrinsic": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+ "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bind-apply-helpers": "^1.0.2",
+ "es-define-property": "^1.0.1",
+ "es-errors": "^1.3.0",
+ "es-object-atoms": "^1.1.1",
+ "function-bind": "^1.1.2",
+ "get-proto": "^1.0.1",
+ "gopd": "^1.2.0",
+ "has-symbols": "^1.1.0",
+ "hasown": "^2.0.2",
+ "math-intrinsics": "^1.1.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/get-proto": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+ "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+ "license": "MIT",
+ "dependencies": {
+ "dunder-proto": "^1.0.1",
+ "es-object-atoms": "^1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/gopd": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+ "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/has-symbols": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+ "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/hasown": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+ "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+ "license": "MIT",
+ "dependencies": {
+ "function-bind": "^1.1.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/http-errors": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+ "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+ "license": "MIT",
+ "dependencies": {
+ "depd": "~2.0.0",
+ "inherits": "~2.0.4",
+ "setprototypeof": "~1.2.0",
+ "statuses": "~2.0.2",
+ "toidentifier": "~1.0.1"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/iconv-lite": {
+ "version": "0.7.2",
+ "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.2.tgz",
+ "integrity": "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==",
+ "license": "MIT",
+ "dependencies": {
+ "safer-buffer": ">= 2.1.2 < 3.0.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/inherits": {
+ "version": "2.0.4",
+ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+ "license": "ISC"
+ },
+ "node_modules/ipaddr.js": {
+ "version": "1.9.1",
+ "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+ "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
+ "node_modules/is-promise": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+ "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+ "license": "MIT"
+ },
+ "node_modules/marked": {
+ "version": "15.0.12",
+ "resolved": "https://registry.npmjs.org/marked/-/marked-15.0.12.tgz",
+ "integrity": "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==",
+ "license": "MIT",
+ "bin": {
+ "marked": "bin/marked.js"
+ },
+ "engines": {
+ "node": ">= 18"
+ }
+ },
+ "node_modules/math-intrinsics": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+ "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ }
+ },
+ "node_modules/media-typer": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
+ "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/merge-descriptors": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+ "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=18"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/mime-db": {
+ "version": "1.54.0",
+ "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+ "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/mime-types": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+ "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+ "license": "MIT",
+ "dependencies": {
+ "mime-db": "^1.54.0"
+ },
+ "engines": {
+ "node": ">=18"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/ms": {
+ "version": "2.1.3",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+ "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+ "license": "MIT"
+ },
+ "node_modules/negotiator": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
+ "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/object-inspect": {
+ "version": "1.13.4",
+ "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+ "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/on-finished": {
+ "version": "2.4.1",
+ "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+ "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+ "license": "MIT",
+ "dependencies": {
+ "ee-first": "1.1.1"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/once": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+ "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+ "license": "ISC",
+ "dependencies": {
+ "wrappy": "1"
+ }
+ },
+ "node_modules/parseurl": {
+ "version": "1.3.3",
+ "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+ "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/path-to-regexp": {
+ "version": "8.3.0",
+ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
+ "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
+ "license": "MIT",
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/proxy-addr": {
+ "version": "2.0.7",
+ "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+ "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
+ "license": "MIT",
+ "dependencies": {
+ "forwarded": "0.2.0",
+ "ipaddr.js": "1.9.1"
+ },
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
+ "node_modules/qs": {
+ "version": "6.15.0",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz",
+ "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==",
+ "license": "BSD-3-Clause",
+ "dependencies": {
+ "side-channel": "^1.1.0"
+ },
+ "engines": {
+ "node": ">=0.6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/range-parser": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+ "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/raw-body": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+ "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+ "license": "MIT",
+ "dependencies": {
+ "bytes": "~3.1.2",
+ "http-errors": "~2.0.1",
+ "iconv-lite": "~0.7.0",
+ "unpipe": "~1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.10"
+ }
+ },
+ "node_modules/router": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+ "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+ "license": "MIT",
+ "dependencies": {
+ "debug": "^4.4.0",
+ "depd": "^2.0.0",
+ "is-promise": "^4.0.0",
+ "parseurl": "^1.3.3",
+ "path-to-regexp": "^8.0.0"
+ },
+ "engines": {
+ "node": ">= 18"
+ }
+ },
+ "node_modules/safer-buffer": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+ "license": "MIT"
+ },
+ "node_modules/send": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+ "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+ "license": "MIT",
+ "dependencies": {
+ "debug": "^4.4.3",
+ "encodeurl": "^2.0.0",
+ "escape-html": "^1.0.3",
+ "etag": "^1.8.1",
+ "fresh": "^2.0.0",
+ "http-errors": "^2.0.1",
+ "mime-types": "^3.0.2",
+ "ms": "^2.1.3",
+ "on-finished": "^2.4.1",
+ "range-parser": "^1.2.1",
+ "statuses": "^2.0.2"
+ },
+ "engines": {
+ "node": ">= 18"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/serve-static": {
+ "version": "2.2.1",
+ "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+ "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+ "license": "MIT",
+ "dependencies": {
+ "encodeurl": "^2.0.0",
+ "escape-html": "^1.0.3",
+ "parseurl": "^1.3.3",
+ "send": "^1.2.0"
+ },
+ "engines": {
+ "node": ">= 18"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/express"
+ }
+ },
+ "node_modules/setprototypeof": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+ "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+ "license": "ISC"
+ },
+ "node_modules/side-channel": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+ "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "object-inspect": "^1.13.3",
+ "side-channel-list": "^1.0.0",
+ "side-channel-map": "^1.0.1",
+ "side-channel-weakmap": "^1.0.2"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/side-channel-list": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+ "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+ "license": "MIT",
+ "dependencies": {
+ "es-errors": "^1.3.0",
+ "object-inspect": "^1.13.3"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/side-channel-map": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+ "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bound": "^1.0.2",
+ "es-errors": "^1.3.0",
+ "get-intrinsic": "^1.2.5",
+ "object-inspect": "^1.13.3"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/side-channel-weakmap": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+ "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+ "license": "MIT",
+ "dependencies": {
+ "call-bound": "^1.0.2",
+ "es-errors": "^1.3.0",
+ "get-intrinsic": "^1.2.5",
+ "object-inspect": "^1.13.3",
+ "side-channel-map": "^1.0.1"
+ },
+ "engines": {
+ "node": ">= 0.4"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
+ "node_modules/statuses": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+ "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/toidentifier": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+ "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.6"
+ }
+ },
+ "node_modules/type-is": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
+ "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
+ "license": "MIT",
+ "dependencies": {
+ "content-type": "^1.0.5",
+ "media-typer": "^1.1.0",
+ "mime-types": "^3.0.0"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/unpipe": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+ "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/vary": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+ "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+ "license": "MIT",
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
+ "node_modules/wrappy": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+ "license": "ISC"
+ }
+ }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..4ad749b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,13 @@
+{
+ "name": "layout-lab",
+ "version": "0.1.0",
+ "private": true,
+ "description": "日本語縦書き長文のための Web閲覧UI実験",
+ "scripts": {
+ "start": "node server.js"
+ },
+ "dependencies": {
+ "express": "^5.1.0",
+ "marked": "^15.0.0"
+ }
+}
diff --git a/public/css/composition.css b/public/css/composition.css
new file mode 100644
index 0000000..c11753a
--- /dev/null
+++ b/public/css/composition.css
@@ -0,0 +1,82 @@
+/* ============================================
+ composition.css — 組版
+ 行間(line-height)、字間(letter-spacing)、
+ マージン、インデントなど
+ 「文字をどう並べるか」に関するスタイル。
+ すべてのスペーシングは --rhythm の倍数で統一。
+ ============================================ */
+
+/* --- 本文の基本組版 --- */
+.reader article {
+ text-align: justify;
+ letter-spacing: var(--letter-spacing);
+}
+
+/* --- 見出しの組版 ---
+ line-height は rem 長さ指定で rhythm に揃える。
+ unitless だと font-size に比例して崩れるため。 */
+.reader article h1 {
+ line-height: calc(var(--rhythm) * 2);
+ margin-block-start: calc(var(--rhythm) * 2);
+ margin-block-end: var(--rhythm);
+}
+
+.reader article h2 {
+ line-height: calc(var(--rhythm) * 1.5);
+ margin-block-start: calc(var(--rhythm) * 1.5);
+ margin-block-end: calc(var(--rhythm) * 0.5);
+}
+
+.reader article h3 {
+ line-height: calc(var(--rhythm) * 1);
+ margin-block-start: var(--rhythm);
+ margin-block-end: calc(var(--rhythm) * 0.5);
+}
+
+/* --- 段落 --- */
+.reader article p {
+ text-indent: 0;
+ margin-block: 0;
+}
+
+/* 自動段落下げ: 役物で始まらない段落をインデント */
+.reader.auto-indent article p.indent {
+ text-indent: 1em;
+}
+
+/* 空行段落 */
+.reader article p:empty,
+.reader article p br:only-child {
+ min-block-size: var(--rhythm);
+}
+
+/* --- blockquote --- */
+.reader article blockquote {
+ margin-block: var(--rhythm);
+ padding-inline-start: var(--rhythm);
+ border-inline-start: 2px solid #ccc;
+}
+
+/* --- リスト --- */
+.reader article ul,
+.reader article ol {
+ margin-block: var(--rhythm);
+ padding-inline-start: calc(var(--rhythm) * 1.5);
+}
+
+.reader article li {
+ margin-block: calc(var(--rhythm) * 0.25);
+}
+
+/* --- 区切り線 --- */
+.reader article hr {
+ border: none;
+ margin-block: calc(var(--rhythm) * 2);
+ text-align: center;
+}
+
+.reader article hr::after {
+ content: "＊ ＊ ＊";
+ color: #999;
+ font-size: var(--scale--1);
+}
diff --git a/public/css/controls.css b/public/css/controls.css
new file mode 100644
index 0000000..38403d9
--- /dev/null
+++ b/public/css/controls.css
@@ -0,0 +1,80 @@
+/* ============================================
+ controls.css — UI部品
+ ツールバー、ページナビ、プログレスバー。
+ 本文の組版とは独立したコントローラー。
+ ============================================ */
+
+/* --- ツールバー --- */
+.controls {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.5rem 1rem;
+ background: rgba(255, 255, 255, 0.95);
+ border-bottom: 1px solid #ddd;
+ font-family: sans-serif;
+ font-size: 14px;
+ backdrop-filter: blur(4px);
+}
+
+.controls label {
+ display: flex;
+ align-items: center;
+ gap: 0.3rem;
+}
+
+.controls select,
+.controls input,
+.controls button {
+ font-size: 14px;
+ padding: 0.2rem 0.5rem;
+}
+
+.controls .spacer {
+ flex: 1;
+}
+
+/* --- ページナビ (Mode A用) --- */
+.page-nav {
+ display: none;
+ position: fixed;
+ bottom: 1rem;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 100;
+ font-family: sans-serif;
+ font-size: 14px;
+}
+
+.page-nav button {
+ padding: 0.5rem 1rem;
+ margin: 0 0.25rem;
+ cursor: pointer;
+ border: 1px solid #ccc;
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 4px;
+}
+
+.page-nav button:hover {
+ background: #eee;
+}
+
+.reader[data-mode="vertical-columned"] ~ .page-nav {
+ display: none;
+}
+
+/* --- プログレスバー --- */
+.progress-bar {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ height: 3px;
+ background: #666;
+ transition: width 0.1s;
+ z-index: 101;
+}
diff --git a/public/css/reader.css b/public/css/reader.css
new file mode 100644
index 0000000..ba31f7b
--- /dev/null
+++ b/public/css/reader.css
@@ -0,0 +1,48 @@
+/* ============================================
+ reader.css — 閲覧モードのコンテナ制御
+ writing-mode, 段組, overflow, スクロール方向。
+ 「テキストをどの器に入れるか」の定義。
+ ============================================ */
+
+/* --- 共通 --- */
+.reader {
+ margin-top: 3rem;
+ padding: var(--page-padding);
+ overflow: auto;
+}
+
+/* --- Mode A: 縦書き横スクロール --- */
+.reader[data-mode="vertical-scroll"] {
+ writing-mode: vertical-rl;
+ width: 100vw;
+ height: calc(100vh - 3rem);
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+
+/* --- Mode B: 縦書き段組スクロール --- */
+.reader[data-mode="vertical-columned"] {
+ writing-mode: vertical-rl;
+ width: 100vw;
+ height: auto;
+ column-count: 2;
+ column-gap: var(--column-gap);
+ column-rule: solid 1px #ddd;
+ overflow: visible;
+}
+
+/* scroll-padding でツールバー分を考慮 */
+html:has(.reader[data-mode="vertical-columned"]) {
+ scroll-padding-top: 3rem;
+}
+
+/* --- Mode C: 横書き中央配置 --- */
+.reader[data-mode="horizontal-scroll"] {
+ writing-mode: horizontal-tb;
+ max-width: 40em;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 3rem;
+ height: auto;
+ overflow: visible;
+}
diff --git a/public/css/reset.css b/public/css/reset.css
new file mode 100644
index 0000000..45e2508
--- /dev/null
+++ b/public/css/reset.css
@@ -0,0 +1,24 @@
+/* ============================================
+ reset.css — リセットとベーススタイル
+ ブラウザのデフォルトを打ち消し、
+ html/body に変数を適用する。
+ ============================================ */
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ font-size: calc(var(--font-size-base) * var(--font-scale));
+}
+
+body {
+ font-family: var(--font-family);
+ color: var(--text-color);
+ background-color: var(--bg-color);
+ line-height: var(--line-height);
+}
diff --git a/public/css/responsive.css b/public/css/responsive.css
new file mode 100644
index 0000000..c1220d6
--- /dev/null
+++ b/public/css/responsive.css
@@ -0,0 +1,32 @@
+/* ============================================
+ responsive.css — メディアクエリ
+ 全関心事のレスポンシブ調整を一箇所に集約。
+ ブレイクポイントの全体像が一目でわかるように。
+ ============================================ */
+
+/* --- タブレット (768px以下) --- */
+@media (max-width: 768px) {
+ :root {
+ --page-padding: 1rem;
+ }
+
+ /* 段組を1段に */
+ .reader[data-mode="vertical-columned"] {
+ column-count: 1;
+ }
+}
+
+/* --- スマートフォン (480px以下) --- */
+@media (max-width: 480px) {
+ .controls {
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ font-size: 12px;
+ }
+
+ .controls select,
+ .controls input,
+ .controls button {
+ font-size: 12px;
+ }
+}
diff --git a/public/css/typography.css b/public/css/typography.css
new file mode 100644
index 0000000..4fd716d
--- /dev/null
+++ b/public/css/typography.css
@@ -0,0 +1,32 @@
+/* ============================================
+ typography.css — 書体と文字の見た目
+ font-size, font-weight, text-combine-upright,
+ ruby など「文字そのもの」に関するスタイル。
+ スペーシングは composition.css が担当。
+ ============================================ */
+
+/* 見出しサイズ: modular scale */
+.reader article h1 {
+ font-size: var(--scale-3);
+ font-weight: bold;
+}
+
+.reader article h2 {
+ font-size: var(--scale-2);
+ font-weight: bold;
+}
+
+.reader article h3 {
+ font-size: var(--scale-1);
+ font-weight: bold;
+}
+
+/* 自動縦中横 */
+.tcy {
+ text-combine-upright: all;
+}
+
+/* ルビ */
+.reader ruby rt {
+ font-size: 0.5em;
+}
diff --git a/public/css/variables.css b/public/css/variables.css
new file mode 100644
index 0000000..cda021d
--- /dev/null
+++ b/public/css/variables.css
@@ -0,0 +1,33 @@
+/* ============================================
+ variables.css — 設計トークン
+ すべてのCSSファイルが参照する変数定義。
+ ここを変えれば全体のトーンが変わる。
+ ============================================ */
+
+:root {
+ /* --- 書体 --- */
+ --font-scale: 1;
+ --font-size-base: clamp(14px, 2.2vh, 20px);
+ --font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS 明朝", serif;
+
+ /* --- Modular scale (ratio 1.25 = Major Third) --- */
+ --scale-ratio: 1.25;
+ --scale-0: 1rem;
+ --scale-1: calc(1rem * var(--scale-ratio));
+ --scale-2: calc(1rem * var(--scale-ratio) * var(--scale-ratio));
+ --scale-3: calc(1rem * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio));
+ --scale--1: calc(1rem / var(--scale-ratio));
+
+ /* --- 組版 --- */
+ --line-height: 1.8;
+ --letter-spacing: 0em;
+ --rhythm: calc(1rem * var(--line-height));
+
+ /* --- 配色 --- */
+ --bg-color: #faf8f5;
+ --text-color: #333;
+
+ /* --- レイアウト --- */
+ --page-padding: 2rem;
+ --column-gap: 2rem;
+}
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..d07df1e
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,90 @@
+
+
+
+
+
+ layout-lab — 日本語縦書き閲覧UI実験
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ layout-lab v0.1
+
+
+
+
+
+
+ 上のメニューからサンプルテキストを選択してください。
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/public/reader.js b/public/reader.js
new file mode 100644
index 0000000..8521a01
--- /dev/null
+++ b/public/reader.js
@@ -0,0 +1,388 @@
+/**
+ * layout-lab: 日本語縦書き閲覧UI - Reader Script
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+ const reader = document.querySelector('.reader');
+ const modeSelect = document.getElementById('mode-select');
+ const fontSizeSelect = document.getElementById('font-size-select');
+ const sampleSelect = document.getElementById('sample-select');
+ const tcyToggle = document.getElementById('tcy-toggle');
+ const indentToggle = document.getElementById('indent-toggle');
+ const progressBar = document.querySelector('.progress-bar');
+ const prevBtn = document.getElementById('prev-page');
+ const nextBtn = document.getElementById('next-page');
+
+ // 読み込んだ生HTMLを保持（トグル切替時に再適用するため）
+ let rawHTML = '';
+
+ // =============================================
+ // 縦書き段組: 行頭スナップ
+ // CSS columnsの段行(row)境界を検出し、
+ // スクロール停止時に最寄りの境界にスナップする。
+ // =============================================
+ const TOOLBAR_HEIGHT = 48; // 3rem ≒ 48px
+ let rowBoundaries = []; // 段行の開始Y座標のリスト
+
+ function getPageHeight() {
+ return window.innerHeight - TOOLBAR_HEIGHT;
+ }
+
+ // 段行の境界を検出する。
+ // 縦書き2段組では column 1 = 右半分、column 2 = 左半分。
+ // DOM順で「左カラム→右カラム」へX座標が戻る瞬間が
+ // 新しい段行の開始を意味する。
+ function detectRowBoundaries() {
+ rowBoundaries = [0]; // 先頭は常に0
+ if (reader.dataset.mode !== 'vertical-columned') return;
+
+ const article = reader.querySelector('article');
+ if (!article) return;
+
+ const readerRect = reader.getBoundingClientRect();
+ const midX = readerRect.left + readerRect.width / 2;
+ const children = article.children;
+ if (children.length === 0) return;
+
+ let prevInRightCol = true; // 最初は右カラム（column 1）
+
+ for (const child of children) {
+ const rect = child.getBoundingClientRect();
+ if (rect.height === 0) continue; // 空要素スキップ
+
+ const centerX = rect.left + rect.width / 2;
+ const inRightCol = centerX > midX;
+
+ // 左カラム → 右カラムへ戻った = 新しい段行
+ if (inRightCol && !prevInRightCol) {
+ const absTop = rect.top + window.scrollY;
+ rowBoundaries.push(absTop);
+ }
+
+ prevInRightCol = inRightCol;
+ }
+ }
+
+ // 段行境界からスクロール先を計算（ツールバー分を差し引く）
+ function scrollTargetForBoundary(boundary) {
+ return Math.max(0, boundary - TOOLBAR_HEIGHT);
+ }
+
+ // 最寄りの段行境界にスナップ
+ function snapToRowBoundary() {
+ if (reader.dataset.mode !== 'vertical-columned') return;
+ if (rowBoundaries.length < 2) return;
+
+ const scrollY = window.scrollY;
+ let nearestTarget = 0;
+ let minDist = Infinity;
+
+ for (const boundary of rowBoundaries) {
+ const target = scrollTargetForBoundary(boundary);
+ const dist = Math.abs(scrollY - target);
+ if (dist < minDist) {
+ minDist = dist;
+ nearestTarget = target;
+ }
+ }
+
+ if (Math.abs(scrollY - nearestTarget) < 4) return;
+
+ window.scrollTo({ top: nearestTarget, behavior: 'smooth' });
+ }
+
+ let snapTimer = null;
+ function onColumnedScroll() {
+ if (reader.dataset.mode !== 'vertical-columned') return;
+ clearTimeout(snapTimer);
+ snapTimer = setTimeout(snapToRowBoundary, 200);
+ }
+
+ window.addEventListener('scroll', onColumnedScroll, { passive: true });
+
+ // 次の段行境界へ移動
+ function goToNextRow() {
+ const scrollY = window.scrollY;
+ for (const boundary of rowBoundaries) {
+ const target = scrollTargetForBoundary(boundary);
+ if (target > scrollY + 4) {
+ window.scrollTo({ top: target, behavior: 'smooth' });
+ return;
+ }
+ }
+ window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
+ }
+
+ // 前の段行境界へ移動
+ function goToPrevRow() {
+ const scrollY = window.scrollY;
+ for (let i = rowBoundaries.length - 1; i >= 0; i--) {
+ const target = scrollTargetForBoundary(rowBoundaries[i]);
+ if (target < scrollY - 4) {
+ window.scrollTo({ top: target, behavior: 'smooth' });
+ return;
+ }
+ }
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+ }
+
+ // --- Load sample list from API ---
+ async function loadSampleList() {
+ try {
+ const res = await fetch('/api/samples');
+ const samples = await res.json();
+ for (const s of samples) {
+ const opt = document.createElement('option');
+ opt.value = s.slug;
+ opt.textContent = s.slug;
+ sampleSelect.appendChild(opt);
+ }
+ } catch {
+ // API unavailable
+ }
+ }
+
+ loadSampleList();
+
+ // スクロール位置を先頭にリセット
+ function scrollToStart() {
+ const mode = reader.dataset.mode;
+ if (mode === 'horizontal-scroll') {
+ reader.scrollTop = 0;
+ window.scrollTo(0, 0);
+ } else if (mode === 'vertical-columned') {
+ reader.scrollTop = 0;
+ window.scrollTo(0, 0);
+ } else {
+ // vertical-scroll: scrollLeft=0 が右端（先頭）
+ reader.scrollLeft = 0;
+ reader.scrollTop = 0;
+ }
+ }
+
+
+ // --- Mode switching ---
+ modeSelect.addEventListener('change', () => {
+ reader.dataset.mode = modeSelect.value;
+ scrollToStart();
+ requestAnimationFrame(() => {
+ detectRowBoundaries();
+ updateProgress();
+ });
+ });
+
+ // --- Typography controls ---
+ const lineHeightRange = document.getElementById('line-height-range');
+ const lineHeightValue = document.getElementById('line-height-value');
+ const letterSpacingRange = document.getElementById('letter-spacing-range');
+ const letterSpacingValue = document.getElementById('letter-spacing-value');
+
+ // CSS custom propertiesを :root に設定（remの基準を変えるため）
+ fontSizeSelect.addEventListener('change', () => {
+ document.documentElement.style.setProperty('--font-scale', fontSizeSelect.value);
+ });
+
+ lineHeightRange.addEventListener('input', () => {
+ document.documentElement.style.setProperty('--line-height', lineHeightRange.value);
+ lineHeightValue.textContent = lineHeightRange.value;
+ });
+
+ letterSpacingRange.addEventListener('input', () => {
+ document.documentElement.style.setProperty('--letter-spacing', letterSpacingRange.value + 'em');
+ letterSpacingValue.textContent = letterSpacingRange.value;
+ });
+
+ // --- Sample loading ---
+ sampleSelect.addEventListener('change', () => {
+ loadSample(sampleSelect.value);
+ });
+
+ async function loadSample(slug) {
+ if (!slug) return;
+ try {
+ const res = await fetch(`/api/samples/${slug}`);
+ if (!res.ok) throw new Error(res.statusText);
+ rawHTML = await res.text();
+ applyPostProcessing();
+ requestAnimationFrame(() => {
+ scrollToStart();
+ detectRowBoundaries();
+ updateProgress();
+ });
+ } catch {
+ reader.innerHTML = 'サンプルの読み込みに失敗しました。
';
+ }
+ }
+
+ // --- Post-processing toggles ---
+ tcyToggle.addEventListener('change', applyPostProcessing);
+ indentToggle.addEventListener('change', applyPostProcessing);
+
+ function applyPostProcessing() {
+ if (!rawHTML) return;
+
+ reader.innerHTML = rawHTML;
+
+ if (tcyToggle.checked) {
+ applyTCY(reader);
+ }
+
+ if (indentToggle.checked) {
+ reader.classList.add('auto-indent');
+ applyAutoIndent(reader);
+ } else {
+ reader.classList.remove('auto-indent');
+ }
+ }
+
+ // =============================================
+ // 自動縦中横 (Tate-Chu-Yoko)
+ // =============================================
+ function applyTCY(container) {
+ const pattern = /(? lastIndex) {
+ frag.appendChild(
+ document.createTextNode(text.slice(lastIndex, match.index)),
+ );
+ }
+ const span = document.createElement('span');
+ span.className = 'tcy';
+ span.textContent = match[1];
+ frag.appendChild(span);
+ lastIndex = match.index + match[0].length;
+ }
+
+ if (lastIndex < text.length) {
+ frag.appendChild(document.createTextNode(text.slice(lastIndex)));
+ }
+
+ textNode.parentNode.replaceChild(frag, textNode);
+ }
+ }
+
+ // =============================================
+ // 自動段落下げ
+ // =============================================
+ const YAKUMONO = /^[「『（〈《"'｛【〔≪\u3000―─…──]/;
+
+ function applyAutoIndent(container) {
+ const paragraphs = container.querySelectorAll('article p');
+ for (const p of paragraphs) {
+ const text = p.textContent.trimStart();
+ if (text && !YAKUMONO.test(text)) {
+ p.classList.add('indent');
+ }
+ }
+ }
+
+ // --- Scroll progress ---
+ reader.addEventListener('scroll', updateProgress);
+
+ function updateProgress() {
+ const mode = reader.dataset.mode;
+ let ratio = 0;
+
+ if (mode === 'horizontal-scroll' || mode === 'vertical-columned') {
+ const scrollTop = reader.scrollTop || window.scrollY;
+ const scrollHeight =
+ (reader.scrollHeight || document.documentElement.scrollHeight) -
+ window.innerHeight;
+ ratio = scrollHeight > 0 ? scrollTop / scrollHeight : 0;
+ } else {
+ const scrollLeft = Math.abs(reader.scrollLeft);
+ const scrollWidth = reader.scrollWidth - reader.clientWidth;
+ ratio = scrollWidth > 0 ? scrollLeft / scrollWidth : 0;
+ }
+
+ progressBar.style.width = `${Math.min(ratio * 100, 100)}%`;
+ }
+
+ window.addEventListener('scroll', () => {
+ const mode = reader.dataset.mode;
+ if (mode === 'horizontal-scroll' || mode === 'vertical-columned') {
+ updateProgress();
+ }
+ });
+
+ // --- Keyboard navigation ---
+ document.addEventListener('keydown', (e) => {
+ const mode = reader.dataset.mode;
+ if (mode === 'horizontal-scroll') return;
+
+ // Mode B: 段行境界ベースのページ送り
+ if (mode === 'vertical-columned') {
+ if (['ArrowDown', 'PageDown', ' '].includes(e.key)) {
+ e.preventDefault();
+ goToNextRow();
+ } else if (['ArrowUp', 'PageUp'].includes(e.key)) {
+ e.preventDefault();
+ goToPrevRow();
+ }
+ return;
+ }
+
+ switch (e.key) {
+ case 'ArrowLeft':
+ case 'PageDown':
+ case ' ':
+ e.preventDefault();
+ navigateForward();
+ break;
+ case 'ArrowRight':
+ case 'PageUp':
+ e.preventDefault();
+ navigateBackward();
+ break;
+ }
+ });
+
+ // --- Page navigation buttons ---
+ prevBtn.addEventListener('click', navigateBackward);
+ nextBtn.addEventListener('click', navigateForward);
+
+ function navigateForward() {
+ // Mode A: 縦書き横スクロール（左方向へ進む）
+ const pageWidth = reader.clientWidth;
+ reader.scrollBy({ left: -pageWidth, behavior: 'smooth' });
+ }
+
+ function navigateBackward() {
+ // Mode A: 縦書き横スクロール（右方向へ戻る）
+ const pageWidth = reader.clientWidth;
+ reader.scrollBy({ left: pageWidth, behavior: 'smooth' });
+ }
+});
diff --git a/samples/secdioned.md b/samples/secdioned.md
new file mode 100644
index 0000000..b4dac95
--- /dev/null
+++ b/samples/secdioned.md
@@ -0,0 +1,464 @@
+マルチン・ルターの小信仰問答書
+===============
+
+マルチン・ルター著 結城浩訳
+
+目次
+--
+
+* [第一部：十戒について](#part1)
+ * [第一の戒め](#c1)
+ * [第二の戒め](#c2)
+ * [第三の戒め](#c3)
+ * [第四の戒め](#c4)
+ * [第五の戒め](#c5)
+ * [第六の戒め](#c6)
+ * [第七の戒め](#c7)
+ * [第八の戒め](#c8)
+ * [第九の戒め](#c9)
+ * [第十の戒め](#c10)
+ * [結び](#cconc)
+* [第二部：使徒信条について](#part2)
+ * [第一の記事：創造について](#a1)
+ * [第二の記事：あがないについて](#a2)
+ * [第三の記事：聖めについて](#a3)
+* [第三部：主の祈りについて](#part3)
+ * [神への呼びかけ](#pintro)
+ * [一番目の願い](#p1)
+ * [ニ番目の願い](#p2)
+ * [三番目の願い](#p3)
+ * [四番目の願い](#p4)
+ * [五番目の願い](#p5)
+ * [六番目の願い](#p6)
+ * [七番目の願い](#p7)
+ * [アーメン。](#pamen)
+* [第四部：洗礼について](#part4)
+* [第五部：罪の告白について](#part5)
+* [第六部：聖餐式について](#part6)
+* [朝と夕べの祈り](#part7)
+ * [朝の祈り](#morning_devitions)
+ * [夕べの祈り](#evening_devotions)
+* [食事の祈り](#part7_1)
+* [訳者あとがき](#memo)
+ * [マルチン・ルターの小信仰問答書について](#about)
+ * [この翻訳について](#abouttrans)
+ * [参考文献](#refer)
+ * [修正履歴](#history)
+
+* * *
+
+第一部：十戒について
+----------
+
+父親が家族に十戒を簡潔に示すには
+
+〔 訳注： ここでのルターの番号のつけ方は、 アウグスティヌスおよびラテン教会の区分法に従っています（『信仰要義』p.188）。 他の区分法では、 第二の戒めとして「偶像礼拝の禁止」が入り、順に番号がずれていき、 最後の二つ「第九の戒め」と「第十の戒め」が一つにまとめられて「第十の戒め」になります。 聖書そのものには番号はつけられていません。 〕
+
+### 第一の戒め
+
+_他の神々を神としてはいけません。_
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 私たちは他の何よりも唯一の神を畏れ、愛し、信頼しなければならないということです。
+
+### 第二の戒め
+
+_神の名前を誤った目的に使ってはいけません。_
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 私たちは神を畏れ、愛さなければなりません。 ですから、神の御名を用いて呪ったり、誓ったり、呪文を唱えたり、 嘘をついたり欺いたりしてはなりません。 そうではなく、神を求め、神に祈り、神を賛美し、 いかなる困難なときにおいても神に感謝するために、神の御名を用いなさい、 という意味です。
+
+### 第三の戒め
+
+_安息日を聖なるものとして守りなさい。_
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 私たちは神を畏れ、愛さなければなりません。 ですから、説教や神の御言葉を軽視してはいけません。 そうではなく、神の言葉を聖なるものと考え、 喜んで自分から耳を傾け、それを学びなさい、 という意味です。
+
+### 第四の戒め
+
+_あなたのお父さんとお母さんを敬いなさい。_
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 私たちは神を畏れ、愛さなければなりません。 ですから、両親や目上の人を馬鹿にしたり、 わずらわせたりしてはいけません。 そうではなくて、両親や目上の人を敬い、 仕え、従い、愛し、大切な存在として扱いなさい、 という意味です。
+
+### 第五の戒め
+
+_殺してはいけません。_
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 私たちは神を畏れ、愛さなければなりません。 ですから、私たちは隣人の体に害を与えたり、傷つけたりしてはいけません。 そうではなくて、病気のときに隣人を助け、看病してあげるのです。
+
+### 第六の戒め
+
+_姦淫をしてはいけません。_
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 私たちは神を畏れ、愛さなければなりません。 ですから、私たちは言葉においても行いにおいても、 きよくあり、つつましやかでなければなりません。 そして自分の配偶者を愛し敬うべきです。
+
+### 第七の戒め
+
+_盗みをしてはいけません。_
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 私たちは神を畏れ、愛さなければなりません。 ですから、私たちは隣人のお金や所有物を奪ったり、 詐欺によって得たり、 貧弱に作られたものを売りつけたりしてはいけません。 そうではなくて、 隣人が財産や経歴を増し加えたり、 守ったりできるように手助けしなければなりません。
+
+### 第八の戒め
+
+_隣人について、嘘をついてはいけません。_
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 私たちは神を畏れ、愛さなければなりません。 ですから、私たちは嘘をついたり、裏切ったり、 名誉を毀損したり、隣人の評判を落としたりして欺いてはなりません。 そうではなくて、むしろ隣人について弁護し、隣人に関して良いことを言い、 隣人がなすことの良い面を見るようにしなければなりません。
+
+### 第九の戒め
+
+_隣人の家を欲しがってはなりません。_
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 私たちは神を畏れ、愛さなければなりません。 ですから、私たちは隣人をだまして遺産や家を奪おうとしたり、 自分に権利があるような振る舞いをして奪い取ろうとしたりしてはなりません。 そうではなくて、隣人が財産を保ち、さらに増し加えられるように手助けをすべきです。
+
+### 第十の戒め
+
+_あなたは、隣人の妻、男性の奴隷、女性の奴隷、家畜、 そのほかどんなものであれ、隣人のものを欲しがってはいけません。_
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 私たちは神を畏れ、愛さなければなりません。 ですから、私たちは隣人の牛を放したり、雇い人を奪ったり、妻を誘惑したりしてはいけません。 そうではなくて、彼らが隣人のところにとどまりつづけ、 それぞれの義務を果たすようにしなければなりません。
+
+### 結び
+
+_問い_ これらの戒め全体について、神様は私たちに何とおっしゃっていますか。
+
+_答え_ 以下が神様の語っておられることです。 「わたしは主、あなたの神である。わたしはねたむ神である。 わたしを憎む者に対しては、祖先の罪をその孫、さらにその孫にまで負わせる。 しかし、わたしを愛する者に対しては千代に及ぶまで恵みを施す」
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 神様はこれらの戒めを破る者をすべて罰すると警告を与えています。 それゆえ、私たちは神様の御怒りをおそれるべきであり、 これらの戒めに違反しないようにすべきです。 しかし、神様はこれらの戒めを守る者には恵みとすべての良い物を約束してくださいます。 それゆえ、私たちは神様を愛し、神様を信頼し、神様の戒めが求めることを喜んで行うべきなのです。
+
+* * *
+
+第二部：使徒信条について
+------------
+
+父親が家族に使徒信条を簡潔に示すには
+
+### 第一の記事：創造について
+
+_われは天地の造り主、全能の父なる神を信ず。_
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 私は、神様が他の被造物とともに私を作ったということを信じています。 神様は私に、肉体と魂、目と耳と体のすべて、心と全感覚をお与えになりました。 そしてそれらを保っていてくださいます。 また神様は、衣服と靴、食べ物と飲み物、家と土地、妻と子、 田畑と家畜と私の所有物すべてを与えてくださいます。 神様は、毎日絶えることなく、 私の体と命を養うために必要なすべてを与えてくださいます。 神様はすべての危険から私を守り、すべての邪悪なものから守ってくださいます。 神様がこれらのことを行うのは、 父なる神様の、純粋で聖なる義と恵みのためであり、 私が自分の力で得たわけでもなく、私にその資格があるからでもありません。 これらのすべてのことのゆえに、 私は神様に感謝し、神様を賛美し、神様に仕え、神様に従わなければなりません。 はい、そうです。このことは真実です。
+
+### 第二の記事：あがないについて
+
+_われはその独り子、われらの主、イエス・キリストを信ず。主は聖霊によりてやどり、処女マリアより生まれ、 ポンテオ・ピラトの元に苦しみを受け、十字架につけられ、死にて葬られ、黄泉（よみ）に下り、 三日目に死人のうちよりよみがえり天に上り、父なる神の右に座したまえり。かしこより来たりて、 生けるものと死にたるものとをさばきたまわん。_
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 私はイエス・キリストがとこしえの父なる神により生まれたまことの神であることを信じます。 私はまた、イエス・キリストが処女マリアから生まれたまことの人間であることを信じます。 イエス・キリストこそ私の主です。 イエスは私をあがないました。 私は道に迷い、呪われた人間でした。 すべての罪、死、悪魔の支配下から、イエスは、私を買い取り、私を勝ち取りました。 それは金や銀で買い取ったのではありません。 イエスさまの聖なる貴い血潮、イエスさまの無実の体 —— イエスさまの死によってです。 このようにして、私はイエスさまのものとなり、イエスさまの王国でイエスさまの元で暮らし、 義とされ、罪ゆるされ、祝福をうけて、永遠にイエスさまに仕えるのです。 イエスさまが死から復活し、永遠に治めるのと同じように。 はい、そうです。このことは真実です。
+
+### 第三の記事：聖めについて
+
+_われは聖霊を信ず、聖なる公同の教会、聖徒のまじわり、罪の赦し、からだのよみがえり、 とこしえの命を信ず。アーメン。_
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 私は、私の主であるイエス・キリストのもとへ自分自身の知性や力で向かうことはできません。 しかし聖霊様が福音によって私を召してくださり、 聖霊の賜物によって私の目を開かせてくださり、 まことの信仰のうちにあって私を聖なるものにし、保ってくださるのです。 それはちょうど、 聖霊が地上の全教会を召してくださり、 一つに集めてくださり、 目を開かせてくださり、 イエスとともに唯一のまことの信仰のうちにあって聖なるものとし、保ってくださるのと同じです。 この教会において、 神様は毎日、私やすべての信仰者がおかした罪をすべてゆるしてくださいます。 そして終わりの日に神様は、私とすべての死んだ人を墓から引き上げてくださいます。 神様は、私と、キリストを信じるすべての人に永遠の命を与えてくださいます。 はい、そうです。このことは真実です。
+
+* * *
+
+第三部：主の祈りについて
+------------
+
+父親が家族に主の祈りを簡潔に示すには
+
+### 神への呼びかけ
+
+_天にまします、われらの父よ。_
+
+〔 天にいらっしゃる、私たちのお父さん。 〕
+
+_問い_ これはどういう意味ですか。
+
+_答え_ この祈りを始めるにあたり、 神様が私たちの本当のお父さんであり、 私たちが神様の本当の子どもたちであるように信じなさい と神様は私たちを招いていらっしゃるのです。 そうして私たちは、神様を信頼し、完全な確信を持って祈るのです。 愛する子どもたちが、愛する父へ願いごとを持っていくのと同じように。
+
+### 一番目の願い
+
+_ねがわくは、御名（みな）をあがめさせたまえ。_
+
+〔 あなたの名前が聖なるものとなりますように。 〕
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 言うまでもなく、神様のお名前はそれ自体聖なるものです。 でもこの願いを通して、 神様が私たちのうちにおいても御名を聖なるものとしてくださるように、 と私たちは祈るのです。
+
+_問い_ どうすれば、そのようなことが起こりますか。
+
+_答え_ 神様の御言葉である聖書がはっきりとそのままの形で教えられ、 私たちが御言葉を土台として神の子どものように聖い生活をするときにそうなります。 天にいらっしゃる お父様、そのように私たちを助けてください。 しかし、神の御言葉以外の何かによって教えたり、生活したりする者は、 私たちの間に働く神様の御名をけがすのです。 天にいらっしゃる お父様、そのようなことから私たちをお守りください。
+
+### ニ番目の願い
+
+_御国（みくに）を来たらせたまえ。_
+
+〔 神の国が来ますように。 〕
+
+_問い_ これはどういう意味ですか。
+
+_答え_ もちろん、私たちが祈らなくても、神の御国はやってきます。 しかし、私たちはこの願いを通して、神の国が私たちのところにもやってくるようにと祈るのです。
+
+_問い_ どうすれば、そのようなことが起こるのでしょうか。
+
+_答え_ 天の父なる神様は私たちに聖霊を送って下さいますので、 私たちは神の恵みによって神の聖なる御言葉を信じることができます。 そして私たちは、現在のこの世においても、さらに永遠の命においても、 神の御心に従った生活を送ることができるのです。
+
+### 三番目の願い
+
+_みこころの天になるごとく、地にもなさせたまえ。_
+
+〔 あなたの意志が天国で成就するように、地上においても成就しますように。 〕
+
+_問い_ これはどういう意味ですか。
+
+_答え_ もちろん、神の正しく恵み深い御心は、私たちが祈らなくても成就します。 しかし、私たちはこの願いを通して、 神様の御心が私たちにおいても成就するようにと祈るのです。
+
+_問い_ どのようにしてそれが起こりますか。
+
+_答え_ 神様が、 神の国を到来させまいとする すべての悪しき意志、すべての悪しき助言を打ち砕き、阻止するときです。 それらの悪しきものとは、悪魔や、この世、それに私たちの肉の欲からでた意志です。 また神の御心が私たちの上に成就するのは、 神様が信仰と神の御言葉によって私たちを強め、 人生の終わりに至るまで私たちを信仰深く生かしてくださるときです。 これこそ、正しく、恵みにあふれた神様の御心なのです。
+
+### 四番目の願い
+
+_われらの日用（にちよう）の糧（かて）を今日もあたえたまえ。_
+
+〔 私たちに毎日の糧を今日も与えてください。 〕
+
+_問い_ これはどういう意味ですか。
+
+_答え_ もちろん、私たちが祈らなくても、 神様は、悪い人間たちに対しても日々の糧をお与えになります。 けれども、この願いを通して、 日々の糧を神様が与えてくださることを意識し、 感謝をもって日々の糧を受け取れるようにと私たちは祈るのです。
+
+_問い_ 「日用の糧」とはどういう意味ですか。
+
+_答え_ 私たちのからだを養い、 必要を満たしてくれるすべてのもののことです。 例えば、食べ物、飲み物、着る物、靴、家、庭、土地、家畜、 金銭、所有物、献身的な配偶者、献身的な子供たち、献身的な雇い人、献身的で信仰深い施政者、 よい政府、よい天気、平和、 健康、学問、名誉、よい友人、信仰深い隣人、 そしてこれに類する他の全てのもののことです。
+
+### 五番目の願い
+
+_われらに罪をおかすものを、われらがゆるすごとく、 われらの罪をもゆるしたまえ。_
+
+〔 私たちに対して罪をおかした人を私たちはゆるしますから、 あなたも私たちの罪をゆるしてくださいますように。 〕
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 私たちはこの願いを通して、 天にいらっしゃる私たちの父なる神様が私たちの罪に目を留めたりなさらず、 また私たちが罪深いからとか私たちが祈り求めるものにふさわしくないからということを理由にして、 私たちの願いを退けたりしないようにと祈るのです。 しかし神様は私たちに、そのすべてのものを恵みによって与えたいと思っています。 毎日何度も私たちは罪を犯し、刑罰を受けるのが当然の身でありながら、神様はそうしてくださるのです。 だから、私たちも当然のこととして、私たちに罪をおかす人々に心から喜んで良いことをしたいと願うのです。
+
+### 六番目の願い
+
+_われらを試みにあわせず、_
+
+〔 私たちを誘惑にあわせないでください。 〕
+
+_問い_ これはどういう意味ですか。
+
+_答え_ もちろん、神様は誰も誘惑したりはしません。 でも、私たちはこの願いを通して、 神様が私たちを守り、救ってくださるようにと祈るのです。 そして、悪魔・この世・私たちの肉の欲が、 私たちを欺いたり、異教や異端・絶望・他の恐ろしい不品行・悪徳へ誘い込んだりすることのないように。 また、たとえそれらが私たちを攻撃してきても、 私たちはそれらに打ち勝ち、最後には勝利するようにと祈るのです。
+
+### 七番目の願い
+
+_悪より救い出だしたまえ。_
+
+〔 邪悪なものから、私たちを自由にしてください。 〕
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 全体の結びとして、私たちはこの願いを通して、 天にいらっしゃる私たちの父なる神様が、 私たちの肉体・魂・財産・名誉を脅かす全ての悪しきものから私たちを守ってくださるようにと祈ります。 そして、ついに最後の時がやってきたとき、 祝福のうちに死を迎えることを神様がおゆるしになり、 主の恵みのうちに、涙の谷から神様のみもとへ連れて行ってくださるようにと、 私たちは祈るのです。
+
+### アーメン。
+
+_問い_ これはどういう意味ですか。
+
+_答え_ 天にいらっしゃる父なる神様が、 この祈りを受け入れてくださり、聞き入れてくださるのを、 私は確信しています。 また、このように祈りなさいと私たちにお命じになったのは神様ご自身であり、 神様が私たちの祈りにこたえると約束しておられることを、 私は確信しています。 アーメン。アーメン。 これは「そうです、そうです。このようになります」という意味です。
+
+* * *
+
+第四部：洗礼について
+----------
+
+父親が家族に洗礼を簡潔に示すには
+
+_問い_ 洗礼とは何ですか。
+
+_答え_ 洗礼は単なる水ではありません。 神の命令に含まれ、神の御言葉と結びついている水なのです。
+
+_問い_ それはどのような御言葉ですか。
+
+_答え_ 私たちの主キリストがマタイによる福音書の最終章で語られた 「世界中に行き、すべての異邦の国々に教え、 父、子、聖霊の御名によって洗礼を行いなさい」 という御言葉です。
+
+_問い_ 洗礼によって何が与えられるのですか。洗礼にどんなよいことがあるのでしょうか。
+
+_答え_ 洗礼によって罪が赦され、死と悪魔からあがない出され、 信じるものすべてに永遠の救いが与えられます。 それは神の御言葉と約束が宣言している通りです。
+
+_問い_ その神の御言葉と約束とは何ですか。
+
+_答え_ 私たちの主キリストがマルコによる福音書の最終章で語られた 「信じて、洗礼を受ける者は誰でも救われます。 しかし、信じないものは誰でものろわれます」という言葉です。
+
+_問い_ どうしてそのようなすばらしいことが水にできるのですか。
+
+_答え_ もちろん、水にはそのようなことを行う力はありません。 水とともにあり、水のうちに働く神の御言葉がそのようなことをなすのです。 なぜなら、神の御言葉がなければ、水はただの水にすぎず、洗礼ではないからです。 しかし神の御言葉があるとき、 水は洗礼となり、恵みに満ちた命の水、聖霊による新生の洗いとなるのです。 それは、聖パウロがテトスへの手紙３章で次のように述べている通りです。 「神が私たちの上に救い主イエスキリストを通して豊かに注いで下さった、 聖霊による新生と更新の洗いを通して、 私たちは同じ恵みによって義とされ、 永遠の命という希望によって相続人となったのです。 これは信じることができる言葉です」
+
+_問い_ 水による洗礼にはどんな意味があるのですか。
+
+_答え_ 私たちの内なる古いアダムは、日々の悲しみと悔い改めによって、 すべての罪と邪な欲望とともに溺れ死に、 そして、その反対に、 新しい人間が日々生まれ、死から再び復活する、 という意味があります。 その新しい人間は神の御前で、正しく聖い者として永遠に生きるのです。
+
+_問い_ どこにそれが書いてありますか。
+
+_答え_ 聖パウロがローマ人への手紙６章で次のように言っています。 「私たちは洗礼を通してキリストといっしょに死へと葬られました。 ですからキリストが父の栄光によって死から復活したのと同じように、 私たちも新しい命のうちに歩むのです」
+
+* * *
+
+第五部：罪の告白について
+------------
+
+教育を受けていない人に罪の告白を教えるには
+
+_問い_ 懺悔とは何ですか。
+
+_答え_ 懺悔は二つの部分からなっています。 一つ目は、自分の罪を認めることです。 二つ目は、神ご自身から受け取るように、 懺悔師(confessor)から滅罪(absolution)すなわち罪の赦しを受け取ることです。 自分の罪が天の神様によって赦されたということを、疑わずに堅く信じて受け取るのです。 〔訳注：滅罪とは罪が完全に赦されたことの祝福を指す（『信仰要義』p.58）〕
+
+_問い_ どのような罪を懺悔しなければならないのでしょうか。
+
+_答え_ 神様に話すときは、たとえ自分が知らない罪であっても、 私たちはすべての罪を、負っていることを認めなくてはなりません。 それはちょうど「私たちの父」に対してするのと同じです。 でも、懺悔師(confessor)に対して話すときは、私たちが知っている罪、 心に覚え、感じている罪だけを告白するのです。
+
+_問い_ それはどのような罪ですか。
+
+_答え_ ここで、十戒に照らして自分の生活の中での立場を考えてみましょう。 あなたは父ですか。母ですか。息子ですか。娘ですか。 夫ですか。妻ですか。召使ですか。あなたは不従順、不信仰、不熱心だったりしませんか。 言葉や行動で人を傷つけたことはありませんか。 盗んだり、義務を怠ったり、物事をほったらかしにしたり、誰かを傷つけたりしたことはありませんか。
+
+〔 訳注：『信仰要義』ではこの後に懺悔の方法が書かれていますが、 Project Wittenburgのテキストでは書かれていません。 〕
+
+* * *
+
+第六部：聖餐式について
+-----------
+
+父親が家族に聖餐式を簡潔に示すには
+
+_問い_ 聖餐式とは何ですか。
+
+_答え_ 聖餐式は、私たちの主、イエスキリストのまことの体と血潮であり、 パンとぶどう酒によって私たちクリスチャンが食べそして飲むようにと キリストご自身によって制定されたものです。
+
+_問い_ どこにそのことが書いてありますか。
+
+_答え_ 聖なる使徒マタイ、マルコ、ルカ、そして聖パウロが書いています。
+
+「私たちの主イエスキリストは、売られていく夜、パンを取り、 感謝をささげてから裂いて弟子たちに渡してこう言いました。 「これを取りなさい。これを食べなさい。これは私のからだであり、 あなたたちのために与えられるものです。私を忘れないように取って食べなさい」 同じようにして食後の杯も取り、感謝をささげてから弟子たちに渡してこう言いました。 「みんな、この杯を取って飲みなさい。この杯は私の血による新しい契約〔新約〕です。 あなたたちの罪を赦すために流されるものです。 これを飲むたびに、私を忘れないようにこれを行いなさい」
+
+_問い_ 食べたり飲んだりすることがどんなよいことをなすのでしょう。
+
+_答え_ 「あなたたちのために与えられる」および「あなたたちの罪を赦すために流される」 という言葉が示しています。 すなわち聖餐式のこれらの言葉を通して、罪の赦し、命と救いが私たちに与えられます。 なぜならば罪が赦されるところでは、命と救いも同じようにあるからです。
+
+_問い_ どうして物理的な食べたり飲んだりすることがそんなにすばらしいことをなすのでしょうか。
+
+_答え_ もちろん、 食べたり飲んだりすることがそのようなことをなすわけではありません。 ここに書かれている 「あなたたちのために与えられる」および「あなたたちの罪を赦すために流される」 という言葉が、それらのよいことをなすのです これらの言葉は、物理的な食べたり飲んだりすることとともに聖餐式の重要な部分を占めているのです。 これらの言葉を信じる人は、ここで述べている通りのもの、ここに記されている通りのものを得るのです。 すなわち、罪の赦しを得るのです。
+
+_問い_ それでは誰がこのような聖餐にあずかることができるのでしょうか。
+
+_答え_ もちろん、断食やそのほかの物理的な準備というのは、 体にとってすばらしい訓練となるでしょう。しかし、 「あなたたちのために与えられる」および「あなたたちの罪を赦すために流される」 という言葉を信じる人なら誰でも、 聖餐にあずかる十分な資格があり、準備ができているのです。 しかしながら、これらの言葉を疑ったり信じなかったりする人は聖餐にあずかる資格がないのであり、 準備ができていないのです。 なぜなら「あなたたちのために」という言葉は、 完全に信ずる心を求めるからです。
+
+* * *
+
+朝と夕べの祈り
+-------
+
+父親が家族に朝と夕べの祈りを教えるには
+
+### 朝の祈り
+
+朝、起きたらすぐに、 聖なる十字架のしるしによって自分自身を祝福し、 次のように言いましょう。
+
+_父、子、聖霊なる神様の御心がなされますように。アーメン。_
+
+それから、ひざまづいても立ったままでもよいですから、 使徒信条を述べ、主の祈りを祈りなさい。 次の小さな祈りを祈ってもよいでしょう。
+
+_天にいらっしゃる、わたしのお父様。 あなたの愛する御子（みこ）イエス・キリストを通して、感謝します。 昨晩も、 あらゆる悪いものや危ないことから私を守ってくださり、ありがとうございます。 今日一日もまた、あらゆる悪と罪からわたしをお救いください。 そして、私の行動や生活があなたを喜ばせるようにと祈ります。 私自身を、すなわち私の体と、私の心と、私の持っているものすべてを、 あなたの御手（みて）におゆだねいたします。 悪しき敵が私に力を振るうことがないように、 聖なる天使を私のところにおつかわし下さい。 アーメン。_
+
+その後で、喜びをもって仕事をはじめたり、 十戒やあなた自身の考えから示された歌を歌ったりしてもよいでしょう。
+
+### 夕べの祈り
+
+夜、寝床に入るとき、十字架のしるしによって自分自身を祝福し、次のように言いましょう。
+
+_父、子、聖霊なる神様の御心がなされますように。アーメン。_
+
+それから、ひざまづいても立ったままでも、使徒信条を述べ、主の祈りを祈りなさい。 次の小さな祈りを祈ってもよいでしょう。
+
+_天にいらっしゃる、わたしのお父様。 あなたの愛する御子（みこ）イエス・キリストを通して、感謝します。 あなたの恵みによって私を守ってくださり、ありがとうございます。 今日私がおかした罪と悪をどうかおゆるし下さい。 今晩も、神様のお恵みによって私をお守りください。 私自身を、すなわち私の体と、私の心と、私の持っているものすべてを、 あなたの御手（みて）におゆだねいたします。 悪しき敵が私に力を振るうことがないように、 聖なる天使を私のところにおつかわし下さい。 アーメン。_
+
+その後すぐに、喜びながら眠りましょう。
+
+* * *
+
+食事の祈り
+-----
+
+父親が食事の恵みと感謝の祈りを教えるには
+
+子ども達と使用人たちは食卓に集まって慎みつつ両手を組み、次のように言いましょう。
+
+_主よ、いまあなたに目を向けます。 あなたは皆に食べ物をちょうどよい時に与えてくださいます。 あなたは惜しみなく与えてくださる御手を開き、 すべての生きるものの飢えを、望むもので満たしてくださいます。_
+
+原注： 「望むもの」というのは、 すべての生き物がたくさん食べて、 幸福で、喜びにあふれるようなものを意味します。 なぜなら、思い悩みや強欲はそのような望みを妨害するからです。
+
+その後で、主の祈りと次のお祈りを祈りましょう。
+
+_主なる神様。天のお父様。 私たちを祝福し、これらの賜物を祝福してください。 これらは、あなたの惜しみなく与えてくださる御手からいただいたものです。 私たちの主、イエスさまを通して祈ります。 アーメン。_
+
+〔 訳注：『信仰要義』ではこの後に「食後の祈り」および「家庭訓」が書かれていますが、 Project Wittenburgのテキストでは書かれていません。 〕
+
+* * *
+
+訳者あとがき
+------
+
+### マルチン・ルターの小信仰問答書について
+
+『マルチン・ルターの小信仰問答書』(1529年)は、 宗教改革を行なったマルチン・ルターが キリスト教の教義のエッセンスを問答形式でまとめたものです。 学者や教育程度の高い人に向けたものではなく、 一般の民衆、特にあまり教育を受けていない人向けに書かれています。
+
+宗教改革後、ルターは各地の教会を巡視しました。 しかし、多くの人がキリスト教の教義を知らずにおり、 また牧師にも指導力が不足していることを見て、 ルターは大きなショックを受けました。 そこでルターはまず牧師向けに『ドイツ・カテキズム』 （後に『大信仰問答書』） という大きな信仰書を著し、 そしてその後、一般の信徒向けに短くまとめた信仰書を編纂しました。 それがここで紹介している『マルチン・ルターの小信仰問答書』です。
+
+『マルチン・ルターの小信仰問答書』は、 キリスト教における十戒、使徒信条、 主の祈り、洗礼、罪の告白、聖餐式などの意味を 問答形式で簡潔・平明にまとめており、 キリスト教の全体像をとらえるためのよきテキストになっています。
+
+マルチン・ルター(1483-1546)は、ドイツの宗教改革者で、 1517年、免罪符販売を行なっていた当時の教会に対して、 95カ条にのぼる抗議文を公開しました。 その中でルターは、 人は免罪符によってではなく神を信ずる信仰によってのみ救われることを主張します。 これをきっかけとして宗教改革がはじまりました。
+
+### この翻訳について
+
+この『マルチン・ルターの小信仰問答書』は、 [Project Wittenburg](https://christian.net/pub/resources/text/wittenberg/wittenberg-home.html)の、 Luther's Little Instruction Book (The Small Catechism of Martin Luther), translated by Robert E. Smith, May 22, 1994, (Version 1.1 -- December 22, 1994), PW# 001-003-002Ea の全訳です。
+
+訳注は〔訳注： 〕で示しました。
+
+聖書の言葉は英文を翻訳しました。
+
+主の祈りの文章は、 多くのプロテスタントの教会で唱えられているものを記述したものです。 ルターの文章との呼応を補うために〔 〕の形で訳文を示しました。
+
+使徒信条の文章は、 多くのプロテスタントの教会で唱えられているものを記述したものです。
+
+訳者はプロテスタントの一信徒に過ぎません。 誤訳などの指摘を歓迎します。
+
+### 参考文献
+
+* 『信仰要義』マルチン・ルター著、石原 謙訳、岩波書店（岩波文庫）
+
+### 修正履歴
+
+* 1999年11月6日、「主の祈りについて」のみを公開しました。
+* 1999年12月10日、「マルチン・ルターの小信仰問答書」全体を公開しました。
+* 2000年4月25日、「マルチン・ルターの小信仰問答書」全体をパブリックドメインに置きました。
+* 2000年5月9日、「マルチン・ルターの小信仰問答書について」を加筆しました。
+* 2017年10月29日、レスポンシブデザインに変更しました。
+
+[マルチン・ルターの小信仰問答書](https://www.hyuki.com/trans/smallct)
+
diff --git a/samples/test.md b/samples/test.md
new file mode 100644
index 0000000..1e5028c
--- /dev/null
+++ b/samples/test.md
@@ -0,0 +1,17 @@
+# テストサンプル
+
+これは動作確認用のテストテキストです。
+
+## 段落テスト
+
+ 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
+
+ 吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
+
+## ルビのテスト
+
+ 漱石は明治の文豪である。
+
+## 長めの段落
+
+ ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居りました。極楽は丁度朝なのでございましょう。
diff --git a/samples/whisky.md b/samples/whisky.md
new file mode 100644
index 0000000..744acda
--- /dev/null
+++ b/samples/whisky.md
@@ -0,0 +1,35 @@
+# 問わずがたりの洋酒外史
+佐藤 章
+
+洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕ではWhiskey,〔英〕ではWhisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ごくまれに〈ウヰスキー〉という書き方を見かけるが、これとて差別化を意図したものではなく単にカナづかいの時代性にすぎない。
+
+現在、カナ表記は〈ウイスキー〉に一本化しており、そこに国産・舶来の区別はない。最近は価格面での差もちぢまり、20年前に￥10,000だった本場のスコッチが半値近くになるなど、ウイスキーは一層ポピュラーなものになってきた。しかし、消費量についていえば、洋酒のトップは何といってもビールだろう。よっぽどの下戸はともかく、まず誰でもタシナミ程度には口にする。
+
+そのビールも明治中期には、せいぜい好事家が味わう程度だったらしい。当時流行した川上音二郎の《おっぺけぺ節》では、まるでゲテモノ扱い。「むやみに西洋を鼻にかけ／日本酒なんぞは飲まれない／ビールにブランデーベルモット／腹にも馴れない洋食を／やたらに喰うのも負け惜しみ／ないしょで後架でヘドついて／まじめな顔してコーヒのむ」と、特権階級をギューの目にあわせるネタにしている。観客も「ざまぁみやがれ！」とばかり同調して西洋カブレをオチョクり、日々のうっぷんを晴らしていた。
+
+もっとも、オッペケペッポーの攻勢に、ぐぅのネを上げた紳士や淑女がいたかどうか…西洋カブレとは、要するに欧米文化への信奉者のこと。〈鰯ノ頭ヲ信心〉する者があるならヨーロッパやアメリカの文物を信仰する者がいても一向に不思議はない。信ずる者の強さで、依然グラス片手に舞踏会、アン・ドゥ・トロヮとやっていたように思われる。
+
+憶測になるが、むしろ辛かったのは庶民の中の飲んべぇ連中ではなかったか。ハイカラ族にユサぶりをかけた手前、泰西の酒には手を出しづらい。「なに、ビールだとぉ、べらぼーめ、こちとら人間サマでぃ、カニじゃあるめぇしアブクなんか飲めるかってんだ」などと強がりながらも、サゾ飲みたかったろうという気がする。
+
+しかし明治32年７月４日、恵比寿ビールのＰＲを目的にしたビアホールが新橋に登場。ジャムパン１ヶ２銭の時代に0.25リットル５銭でビールの１ぱい売りを始めたことから様相は一転する。レンガづくりのモダンな店ながら、法被姿の車夫も金バッヂの紳士もゼニを払えば平等の客。誰はゞかることなくビールをグィとやって舌ツヾミを打てる。当初から評判になって人々がワッと集まり、ファンの数もふえた。２ヵ月後の９月には中央新聞がその盛況ぶりを図入りで伝えたほどだった。
+
+この年は西暦1899年。まさに19世紀の〆くくりの年にビールのヌーヴェルバーグがぼっこうしたことになる。恵比寿は文字通り“福の神”となったわけだが、そのころは仮名表記も〈えびす〉・〈エビス〉ならぬ〈ゑびす〉・〈ヱビス〉で、いかにもゴリヤクのありそうな字ヅラになっていた。
+
+20世紀に入って1906年になると、夏目漱石は小説『二百十日』（中央公論・明治39年10月号）の中で次のようなエピソードを創作した。舞台は阿蘇のひなびた温泉宿。
+
+「ビールは御坐りまつせん」
+
+「ビールがない？───君ビールはないとさ。何だか日本の領地でない様な気がする。情ない所だ」
+
+「なければ、飲まなくつても、いゝさ」と圭さんは又泰然たる挨拶をする。
+
+「ビールは御坐りませんばつてん、恵比寿なら御坐ります」
+
+「ハヽヽヽ愈妙になつて来た。おい君ビールでない恵比寿があるつて云ふんだが、その恵比寿でも飲んで見るかね」
+
+「うん、飲んでもいゝ。───その恵比寿は矢つ張り瓶に這入つてるんだらうね、姉さん」と圭さんは此時漸く下女に話かけた。
+
+ゆ上がりの男２人と、着物を「つんつるてんに着てゐる」下女のやりとりは、いささかマンザイのボケとツッコミのセリフを思わせるが、ビールもこの時期には日本のスミズミまでじゅうぶんに出回っていたのがわかる。
+
+こうして19〜20世紀初頭に日本人に受け入れられたビールは、いまでは日常生活にすっかりとけこんでいる。それだけに洋酒という感じがうすい。豚カツが〈和食〉でカステラが〈わぐゎし〉なら、ビールが〈日本の味〉であっても何ら不都合はないはずだ。実際、国産ビールの製造には米が一役かっている。
+――了
\ No newline at end of file
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..09f1b75
--- /dev/null
+++ b/server.js
@@ -0,0 +1,43 @@
+const express = require('express');
+const { readdir, readFile } = require('fs/promises');
+const path = require('path');
+const { marked } = require('marked');
+
+const app = express();
+const SAMPLES_DIR = path.join(__dirname, 'samples');
+const PORT = process.env.PORT || 3456;
+
+// Static files
+app.use(express.static(path.join(__dirname, 'public')));
+
+// List available samples
+app.get('/api/samples', async (_req, res) => {
+ try {
+ const files = await readdir(SAMPLES_DIR);
+ const samples = files
+ .filter((f) => f.endsWith('.md'))
+ .map((f) => ({
+ slug: f.replace(/\.md$/, ''),
+ filename: f,
+ }));
+ res.json(samples);
+ } catch {
+ res.json([]);
+ }
+});
+
+// Get sample as HTML
+app.get('/api/samples/:slug', async (req, res) => {
+ const filePath = path.join(SAMPLES_DIR, `${req.params.slug}.md`);
+ try {
+ const md = await readFile(filePath, 'utf-8');
+ const html = marked(md);
+ res.type('html').send(`\n${html}\n`);
+ } catch {
+ res.status(404).json({ error: 'Sample not found' });
+ }
+});
+
+app.listen(PORT, () => {
+ console.log(`layout-lab running at http://localhost:${PORT}`);
+});