へ分割して出力している (自動折り返しの行と項目の切れ目が同じ間隔になって読みにくいため)。 2つめ以降の
にだけ、地の文の段落間より控えめな上マージンを付ける。 */ .markdown-body blockquote p + p { margin-block-start: 0.4em; } /* 実務テキスト・設計資料の引用は「対象読者」「担当者の心得」のような 囲み注記として使われる。薄い罫一本では飛ばし読みで見落とされるので、 淡い地色を敷いた枠にして、文字も本文と同じ濃さに戻す(注記のほうが むしろ読ませたい箇所であるため)。 小説の引用(付録の掲げ方など)は地の文に寄り添う静かな体裁のままにする。 */ html[data-kind="textbook"] .markdown-body blockquote, html[data-kind="document"] .markdown-body blockquote { border-inline-start: 3px solid var(--accent); border-block: var(--hairline); border-inline-end: var(--hairline); border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); padding-block: var(--sp-3); padding-inline: var(--sp-4); color: var(--text); } .markdown-body table { border-collapse: collapse; width: 100%; /* rem 固定だと文字サイズ「大」でも表だけ小さいままになる。本文に対する 比で持たせて、文字サイズの切替に追従させる。 */ font-size: 0.92em; line-height: 1.7; margin: var(--sp-5) 0; } .markdown-body th, .markdown-body td { border: var(--hairline); padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: top; } /* 器に収まらない表は、reader.js の layoutTableColumns が列幅を配り直す (和文には語の切れ目が無く、ブラウザの自動列幅は「貸/付/額」のように列を 1文字幅まで潰してしまう)。配った幅は先頭行のセルの inline-size に入って いるので、そのとおりに置く固定レイアウトで組む。**reader.js 側と対で 維持すること。** */ .markdown-body table.sized-table { table-layout: fixed; } /* 表頭と偶数行に淡い地色を敷いて、横方向に目を滑らせても行を見失わない ようにする。縦組みの表 (.v-table) は行と列の向きが入れ替わり、縞が 列方向に出てしまうので対象にしない。 */ html:not([data-vertical="1"]) .markdown-body thead th { background: color-mix(in srgb, var(--hagane) 9%, var(--surface)); font-weight: 600; color: var(--text); } html:not([data-vertical="1"]) .markdown-body tbody tr:nth-child(even) { background: color-mix(in srgb, var(--text) 3%, var(--surface)); } .markdown-body code { font-family: var(--font-data); font-size: 0.9em; background: var(--bg); padding: 0.1em 0.35em; border-radius: var(--radius); } .markdown-body pre code { background: none; padding: 0; } .markdown-body pre { background: var(--bg); border: var(--hairline); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); /* 本文の 1.9 のままだとコードの字面が間延びして塊として読めない */ line-height: 1.65; font-size: 0.9em; overflow-x: auto; } /* 本文中のリンクは、下線を字面から離して和文の可読性を落とさないようにする */ .markdown-body a { text-decoration-thickness: 1px; text-underline-offset: 0.25em; } /* ---------------------------------------------------------------- LaTeX数式 (MathJax の tex-svg で組む) 組版前 / JSが動かないときは TeX ソースが \[ … \] のまま出る。読めなく はないので、独立数式だけは中央寄せの余白付きで置いておく。長い式は スマホ幅で必ずはみ出すため、枠を横スクロールさせて逃がす。 ---------------------------------------------------------------- */ .markdown-body .math-block { margin: var(--sp-4) 0; text-align: center; overflow-x: auto; overflow-y: hidden; /* 行内数式より少し大きく組み、分数・総和記号が潰れないようにする */ font-size: 1.05em; } .markdown-body .math-inline { /* 行内数式が行の高さを押し広げて行間が暴れるのを防ぐ */ display: inline-block; max-width: 100%; vertical-align: middle; /* 長い行内数式(項が多い等式など)は、max-width だけでは収まりきらない ことがある。.math-block と同じ理由・同じ逃がし方(横スクロール)を 行内数式にも揃えておく。 */ overflow-x: auto; overflow-y: hidden; } /* 描画前 / JSが動かないときの mermaid ソース。描画後は .diagram に置き換わる。 */ .markdown-body pre.mermaid { background: var(--surface); color: var(--text-muted); overflow-x: auto; } /* ---------------------------------------------------------------- Mermaid図 (描画後) 図の実寸は reader.js が viewBox から px で与える。ここでは枠を スクロールさせるだけにして、拡大縮小と食い違わないようにする。 ---------------------------------------------------------------- */ .diagram { margin: var(--sp-4) 0; border: var(--hairline); border-radius: var(--radius); background: var(--surface); } .diagram-bar { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border-bottom: var(--hairline); font-family: var(--font-data); font-size: var(--fs-xs); color: var(--text-muted); } .diagram-bar button { font-family: var(--font-body); font-size: var(--fs-xs); border: var(--hairline); background: var(--surface); color: var(--text); border-radius: var(--radius); min-width: 34px; min-height: 30px; padding: 0 var(--sp-2); cursor: pointer; } .diagram-bar button:hover { border-color: var(--hagane); } .diagram-bar [data-zoom-label] { min-width: 4em; text-align: center; } .diagram-bar [data-zoom="full"] { margin-left: auto; } .diagram-body { overflow: auto; padding: var(--sp-3); /* 縮小しても図の判別がつく高さは残し、それを超えたら縦もスクロールさせる */ max-height: 70vh; -webkit-overflow-scrolling: touch; } .diagram-body svg { display: block; margin: 0 auto; } /* 全画面表示。スマホでは指のピンチ操作にまかせる。 */ .diagram-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: none; background: var(--surface); color: var(--text); } .diagram-dialog::backdrop { background: rgba(11, 18, 32, 0.7); } .diagram-dialog-bar { display: flex; justify-content: flex-end; padding: var(--sp-2) var(--sp-3); border-bottom: var(--hairline); } .diagram-dialog-bar button { font-family: var(--font-body); font-size: var(--fs-sm); border: var(--hairline); background: var(--surface); color: var(--text); border-radius: var(--radius); padding: var(--sp-1) var(--sp-3); min-height: 38px; cursor: pointer; } .diagram-dialog-body { height: calc(100dvh - 55px); overflow: auto; padding: var(--sp-3); touch-action: pinch-zoom; -webkit-overflow-scrolling: touch; } .markdown-body hr { border: none; border-block-start: var(--hairline); margin-block: var(--sp-6); margin-inline: 0; } /* ---------------------------------------------------------------- 文字サイズ切替 (表示設定) 文字サイズと一行の長さ (--measure) は必ず組で動かす。文字だけ大きくすると 一行の字数が減り(小さくすると増え)、読みやすさの当たりがそのぶん外れる。 どの段でも和文で41字前後になるように --measure を合わせてある。 --measure を rem で持つのは、em だと見出し(文字が大きい)と段落で解決値が 食い違い、行の左端が揃わなくなるため。 ---------------------------------------------------------------- */ .page-paper[data-font-scale="small"] { --doc-size: 0.9375rem; /* 15px */ --measure: 39rem; /* ≒41字 */ } .page-paper[data-font-scale="medium"] { --doc-size: 1.0625rem; /* 17px — 1040px の器で 16px だったものを一段上げる */ --measure: 44rem; /* ≒41字 */ } .page-paper[data-font-scale="large"] { --doc-size: 1.1875rem; /* 19px */ --measure: 49rem; /* ≒41字 */ } .page-paper .markdown-body { font-size: var(--doc-size, 1.0625rem); } /* ---------------------------------------------------------------- 縦書き (表示設定の「縦書きで読む」) reader.js が html[data-vertical="1"] を立て、本文の「紙」だけを vertical-rl に切り替える。ヘッダー・ツールバー・目次は横組みのまま (縦組みにすると操作の場所が読者の予想から外れるため)。 横組みではウィンドウが縦にスクロールするが、縦組みでは「紙」自身が 右から左へ横スクロールする器になる。行長(縦組みでは版面の高さ)は 画面の高さから取り、長くなりすぎないよう上限を置く。スクロール監視 (reader.js の setupTocAndPosition) は、縦組みのときこの要素の scroll を 見に行く — 器が window から .page-paper に変わることと対で維持すること。 ---------------------------------------------------------------- */ /* 「紙」の丈 = 縦組みの一行の長さ。40〜45字くらいで頭打ちにして、大きな 画面で一行が間延びしないようにする (44rem)。 引く 8rem は、紙の外にあるもの (ヘッダー・ツールバー・フッターと、その まわりの余白) のおおまかな見積り。reader.js の fitPaperFrame が実寸を 測って --paper-reserve に置き直すと、ページ全体が一画面に収まり、縦に スクロールしなくてもフッターまで出る。 **収めると一行が短くなりすぎる画面では、fitPaperFrame が --paper-reserve を置かない。** 丈はこの 8rem のままになり、従来どおり ページが縦に伸びる。どこで見切るかは reader.js 側 (MIN_PAPER_LINE)。 **横組みでは紙を一画面に収めない。** ウィンドウ自身が縦にスクロールし、 フッターは本文の末尾に置かれたままになる (紙の丈を画面から決めて紙の中だけを スクロールさせると、フッターが常に画面の下端に居座ることになるため)。 --paper-reserve を置くのは縦組みだけ。 */ html[data-vertical="1"] { --paper-line: min(calc(100dvh - var(--paper-reserve, 8rem)), 44rem); /* dvh(動的ビューポート)はスマホのアドレスバーが出入りするたびに値が変わる。 縦組みではこの丈がそのまま一行の長さなので、バーが出入りしただけで 全文が組み直され、読んでいた位置が飛ぶ。バーが出ている前提の svh (小さいほう)で固定して、行長を動かさない。 */ --paper-line: min(calc(100svh - var(--paper-reserve, 8rem)), 44rem); } html[data-vertical="1"] .page-paper { writing-mode: vertical-rl; text-orientation: mixed; height: var(--paper-line); /* 親(横組み)から見ると、この箱の width は「行を積む向き」の長さになる。 auto のままだと本文の全長(数万px)まで箱が伸びて、ページ全体が横に 広がってしまう。幅を親に合わせて固定し、あふれる分を箱の中で 横スクロールさせる。 */ width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-padding: var(--sp-4); } /* 器そのものにフォーカスが当たる (reader.js が tabindex を付ける)。 キーボードの矢印キーで読み進めている間、どこが動くのかを示す。 */ html[data-vertical="1"] .page-paper:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } /* 目次は紙と同じ丈で頭打ちにする。グリッドの行の高さは背の高いほうで 決まるので、巻数の多いシリーズで目次が紙より長いと、そのぶんページが 縦に伸びてフッターが画面の外へ出てしまう。目次は元から自前でスクロール する (.toc-sidebar の overflow-y: auto)ので、詰めても中身は失われない。 */ html[data-vertical="1"] .toc-sidebar { max-height: var(--paper-line); } /* 縦組みでは紙の丈が画面から決まり、ページ全体が一画面に収まる。下の大きな余白 (読み終わりの 息継ぎ) をそのまま残すと、それだけでフッターが画面の外へ押し出されるので、 このときだけ詰める。**詰めたぶんは reader.js の fitPaperFrame が実寸で 拾うので、値を変えても計算はひとりでに追いつく。** フッター自身の上下の padding(既定 sp-5 = 32px x2)も、書架トップ・ シリーズ目次のような普通のページでは効くが、読書画面では紙のすぐ下に 「書架 by SAKUOLIA」の一行が来るだけなので、同じ厚みは要らない。 詰めるほど --paper-reserve(reader.js が測る「紙の外」の実寸)も 小さくなり、紙そのものの丈も伸びる ―― 隙間を削ったぶんがそのまま 読める範囲に回る。 */ html[data-vertical="1"] .reader-layout { padding-block-end: var(--sp-3); } html[data-vertical="1"] .site-footer { margin-top: 0; padding-block: var(--sp-3); } /* 書体は、縦組みで読みやすい明朝に寄せる。「書体」で明示的に選ばれていれば --doc-font が置かれるので、そちらが優先される。 */ html[data-vertical="1"] .markdown-body { /* font-family を直に書かず受け皿だけ差し替える。こうしておくと、見出しの --heading-font(本文追従の分野)も同じ受け皿に落ちる。 */ --body-font: var(--doc-font, "Zen Old Mincho", "Hiragino Mincho ProN", serif); } /* 縦中横。1〜2桁の数字と1〜2字の欧字を正立させる(「6 福神漬」の 6 など)。 囲まずに済む text-combine-upright: digits は Chrome も Safari も対応して いないので、囲む範囲は reader.js の markTatechuyoko が付ける。 **どこを囲むかは reader.js 側と対で維持すること。** -webkit- は unprefixed に対応する前の Safari 用。 */ html[data-vertical="1"] .markdown-body .tcy { -webkit-text-combine: horizontal; text-combine-upright: all; } /* 図版・コード・表・数式は横組みの島として残す(縦に倒すと読めない)。 */ html[data-vertical="1"] .markdown-body pre, html[data-vertical="1"] .markdown-body table, html[data-vertical="1"] .markdown-body .diagram, html[data-vertical="1"] .markdown-body .math-block, html[data-vertical="1"] .markdown-body .math-inline, html[data-vertical="1"] .markdown-body img { writing-mode: horizontal-tb; text-combine-upright: none; } /* 横組みの島は縦組みの版面(＝画面の高さ)に収める。はみ出す分は島の中で スクロールさせる。 縦組みの流れの中では、島は「版面の高さいっぱいの帯」を1つ占める。島の背が 帯より低いと帯の残りがそのまま空白の穴になるので、margin-block: auto で 帯の中央に置く(島にとっての margin-block は、縦組みの本文から見ると 行方向＝上下にあたる)。逆に margin-inline が前後の行との間隔になる。 */ html[data-vertical="1"] .markdown-body pre, html[data-vertical="1"] .markdown-body table, html[data-vertical="1"] .markdown-body .diagram, html[data-vertical="1"] .markdown-body .math-block { max-height: 100%; /* 島1つが1画面に収まる幅までにする(それ以上は島の中でスクロールさせる) */ max-width: min(80vw, 42rem); margin-block: auto; margin-inline: var(--sp-4); } html[data-vertical="1"] .markdown-body pre, html[data-vertical="1"] .markdown-body table, html[data-vertical="1"] .markdown-body .math-block { overflow: auto; } /* 狭い画面では、島を90°(時計回り)倒して版面の高さいっぱいに使う。 和書で横長の図表を寝かせて入れるのと同じ扱いで、PDF側も同じ向きに回している (pdf-export.js の makeRotatedFrame)。 transform は場所を取らないので、倒した島が占める帯の厚みは reader.js が 実寸から測って枠 (.v-rotate) の width に入れる。**枠の寸法決めと回転は reader.js の layoutIslands / setRotation と対で維持すること。** 枠自身は縦組みのまま(=版面の高さいっぱいに伸びる)なので、行方向の間隔は margin-block(縦組みでは左右)で取る。 */ html[data-vertical="1"] .markdown-body .v-rotate { position: relative; margin-block: var(--sp-4); margin-inline: 0; } html[data-vertical="1"] .markdown-body .v-rotate > * { position: absolute; top: 0; left: 0; margin: 0; /* 幅は reader.js が版面の高さから決める。正立用の上限は外す。 */ max-width: none; max-height: none; transform-origin: 0 0; } /* 和文だけの表は倒さず、表そのものを縦組みにする。表頭(Markdownの1行目)が 右端の列になり、行は右から左へ、セルの文字は正立したまま上から下へ流れる — 和書の表の組み方そのもの。どの表をこの形にするかは reader.js の tableSuitsVertical が決めて .v-table を立てる(PDF側も同じ判定・同じ向きで 組む: pdf-export.js の renderTableV)。 上の「横組みの島」の指定を打ち消す形になっている(クラスのぶんだけ詳細度が 高いので順序には依らない)。縦組みなので width/height の役割が入れ替わる: 高さ = 帯(Markdownの列)の長さ、幅 = 行数ぶんの厚み。 */ html[data-vertical="1"] .markdown-body table.v-table { writing-mode: vertical-rl; display: table; /* 帯の長さは版面の高さまで。幅は行数ぶんだけ伸びる(本文と同じ向きに流れる) */ width: auto; max-width: none; max-height: 100%; overflow: visible; /* 縦組みでは margin-block が前後の行との間隔(左右)になる */ margin-block: var(--sp-4); margin-inline: 0; } /* セル内の行揃えは物理方向 (left) ではなく行の始まり (start = 上) で指定する */ html[data-vertical="1"] .markdown-body table.v-table th, html[data-vertical="1"] .markdown-body table.v-table td { text-align: start; } /* 倒したあとは送り方向(図の高さ)に制限がないので、図の枠の高さ上限も外す */ html[data-vertical="1"] .markdown-body .v-rotate .diagram-body { max-height: none; } html[data-vertical="1"] .markdown-body img { max-height: 100%; max-width: none; } /* 縦組みの見出しは、横組みのときの「上の罫+余白」がそのまま右の罫になる (border-block-start / margin-block-start が縦組みでは右側を指す)。 字面が大きいままだと一行に収まらないので少しだけ詰める。 */ html[data-vertical="1"] .markdown-body h1 { font-size: 1.5em; } html[data-vertical="1"] .markdown-body h2 { font-size: 1.25em; } /* ---------------------------------------------------------------- PDF書き出しダイアログ ---------------------------------------------------------------- */ .export-dialog { width: min(560px, calc(100vw - var(--sp-4))); max-height: calc(100dvh - var(--sp-5)); padding: 0; border: var(--hairline); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); } .export-dialog::backdrop { background: rgba(11, 18, 32, 0.5); } .export-form { display: grid; gap: var(--sp-3); padding: var(--sp-4); /* 設定が縦に伸びても「PDFを保存」に必ず届くようにする */ max-height: calc(100dvh - var(--sp-5)); overflow-y: auto; overscroll-behavior: contain; } .export-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); position: sticky; top: calc(var(--sp-4) * -1); padding: var(--sp-4) 0 var(--sp-2); margin-top: calc(var(--sp-4) * -1); background: var(--surface); z-index: 1; } .export-head h2 { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0; } .export-dialog .close-x { min-width: 38px; min-height: 38px; padding: 0; } .export-note { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); } .export-dialog fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: 0; padding: var(--sp-2) var(--sp-3) var(--sp-3); border: var(--hairline); border-radius: var(--radius); } .export-dialog legend { font-family: var(--font-data); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); padding: 0 var(--sp-1); } .export-dialog .radio { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); cursor: pointer; min-height: 34px; } .export-dialog .radio input { width: 16px; height: 16px; accent-color: var(--hagane); } .export-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .export-grid .tool-field { justify-content: space-between; } .export-progress, .export-error { margin: 0; font-size: var(--fs-sm); } .export-error { color: var(--text); } .export-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); } /* ---------------------------------------------------------------- ブレークポイント ---------------------------------------------------------------- */ /* サイドバーを置いたままだと本文の一行が短くなりすぎる幅から、目次を ツールバーの「目次」ボタンで呼び出すドロワーに切り替える。1080px なのは、 目次(292px)＋間隔(48px)を引いた残りで和文35字を割ってしまう境目がこの あたりだから(それより狭いと、目次を残すより畳んで本文を広げたほうが読める)。 本文の上に畳んで置くやり方だと、どこまで読み進めていても開閉ボタンを 探すのにページ先頭まで戻る必要があったため、スクロール位置に関係なく どこからでも開け、閉じても読んでいた位置がずれない形にした。 JS 側の初期折りたたみ判定 (reader.js の TOC_COLLAPSE_QUERY) と同じ幅。 */ @media (max-width: 1080px) { .reader-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } .toc-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 85vw); z-index: 60; max-height: none; margin: 0; border: none; border-right: var(--hairline); border-radius: 0; padding: var(--sp-5) var(--sp-4); background: var(--surface); box-shadow: var(--shadow-moon); overflow-y: auto; transform: translateX(-100%); transition: transform var(--dur) var(--ease); } .toc-sidebar[data-collapsed="false"] { transform: translateX(0); } /* 引き出しは画面の天地いっぱいに開く。紙の丈に揃えた頭打ち (html[data-vertical="1"] の .toc-sidebar) は、ここでは外す — 引き出しは グリッドの行から外れている (position: fixed) ので、背が高くてもページを 縦に伸ばさない。 */ html[data-vertical="1"] .toc-sidebar { max-height: none; } /* 目次が引き出しになると紙が画面幅いっぱいまで広がるが、一行の長さは 横組み共通の --measure(本文の子要素に掛かる)がそのまま頭打ちにする。 表・図はここでも紙の幅いっぱいを使えるので、狭い画面ほど得をする。 */ .toc-head button { display: inline-block; } .toc-open-button { display: inline-flex; } .toc-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(11, 18, 32, 0.45); /* --saku-night ベース */ opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); } .toc-backdrop[data-visible="true"] { opacity: 1; pointer-events: auto; } body.toc-open { overflow: hidden; } } @media (max-width: 720px) { /* コンテナと紙の左右余白が二重にかかると本文の一行が短くなりすぎるので、 コンテナ側を詰めて、余白は「紙」側に持たせる。縦方向は逆に広げて、 見出し・段落・図のあいだに息継ぎを作る。 */ .container { padding: 0 var(--sp-3); } /* パンくずは全段を並べると2〜3行を占めてしまうので、現在地だけを 1行で見せる(上位階層へはブランドかブラウザの戻るで足りる)。 */ .crumb-nav { flex-wrap: nowrap; justify-content: flex-end; overflow: hidden; } .crumb-nav a, .crumb-nav > span:not(:last-child) { display: none; } .crumb-nav > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reader-layout { padding-block: var(--sp-4) var(--sp-7); padding-inline: var(--sp-3); } /* 本文が画面の端まで来ていると読みづらいので、紙の左右をひと回り広く 取る (コンテナ側は上で詰めてあるぶん、余白は紙が持つ)。 */ .page-paper { padding: var(--sp-5); } .markdown-body p, .markdown-body ul, .markdown-body ol { margin-block-end: 1.7em; } /* 狭い画面では、リストの既定の字下げ(40px)が一行の長さを目に見えて削る */ .markdown-body ul, .markdown-body ol { padding-inline-start: 1.4em; } .markdown-body h2 { margin-block-start: var(--sp-7); } .markdown-body h3 { margin-block-start: var(--sp-5); } /* 表は縮めずに横スクロールさせる (縮めると数字が読めなくなる)。 縦組みの表 (.v-table) と、列幅を配り直した表 (.sized-table) は表として 組む必要があるので display:block にしない (display:block では table-layout も列幅も効かない)。 */ .markdown-body table:not(.v-table):not(.sized-table) { display: block; width: max-content; max-width: 100%; overflow-x: auto; } .diagram-body { max-height: 60vh; } /* 画面が狭いほどヒーローは題号一枚看板に寄せ、帯の厚みを削る。 */ .shelf-hero { padding: var(--sp-4) 0; } .shelf-hero h1 { font-size: var(--fs-xl); } /* タブレット幅では段組みが1列に落ちる。1列なら丈を揃える意味がないので、 それぞれのカードを中身なりの高さにする。 */ .shelf-section { padding-top: var(--sp-5); } .series-grid { grid-auto-rows: auto; } .series-grid { padding: var(--sp-3) 0 var(--sp-2); } .series-card { padding: var(--sp-4); padding-left: calc(var(--sp-4) + 4px); } } @media (max-width: 480px) { /* スマホでは題号とリード1行だけの薄い帯にする。 背表紙も画面幅に合わせて細くし、書棚らしい本の粒度を保つ。 */ .shelf-hero { padding: var(--sp-4) 0 var(--sp-3); } .shelf-hero::before { background-size: auto, 104px 4px, 104px 100%; } .shelf-hero h1 { font-size: var(--fs-lg); } .shelf-hero .hero-tagline { font-size: var(--fs-xs); letter-spacing: 0.12em; text-indent: 0.12em; margin-top: var(--sp-1); } /* スマホでは段をアコーディオンにする(既定で開くのは小説だけ。開閉は reader.js が localStorage に覚える)。リードを1行に削って全段を詰め込むより、 読まない段を畳んで「開いている段のリードは最後まで読める」ほうが選びやすい。 */ .shelf-section { padding-top: var(--sp-3); } .shelf-details > summary { cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; } /* 開いている段の見出しは画面上端に貼り付けて、スクロール中も 「いまどの段を見ているか」を残す。 */ .shelf-details[open] > .shelf-section-head { position: sticky; top: 0; z-index: 5; background: var(--bg); } /* 1行目に「段の名前 — 点数 — 山形」、畳んでいるときだけ2行目に説明。 自動配置に任せると点数が説明の下へ回るので、行と列を明示する。 */ .shelf-section-head { grid-template-columns: 1fr auto auto; padding-top: var(--sp-2); padding-bottom: var(--sp-2); } .shelf-section-head h2 { grid-area: 1 / 1; font-size: var(--fs-md); } .shelf-section-count { grid-area: 1 / 2; } .shelf-section-head::after { grid-area: 1 / 3; display: block; align-self: center; } .shelf-details[open] > .shelf-section-head::after { transform: rotate(225deg); } /* 段の説明は、畳んでいるときだけ出す。開いた段では下にカードが続くので 不要になり、貼り付いた見出しを薄くできる。 */ .shelf-section-note { grid-area: 2 / 1 / auto / -1; } .shelf-details[open] > .shelf-section-head .shelf-section-note { display: none; } .series-grid { gap: var(--sp-3); padding: var(--sp-3) 0 var(--sp-2); grid-auto-rows: auto; } .series-card { padding: var(--sp-4) var(--sp-3); padding-left: calc(var(--sp-3) + 3px); } .series-card::before { width: 3px; } /* 種別は段見出しが常に示しているので、カード側のラベルは畳む。 */ .series-kind { display: none; } .series-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); } .series-card .meta { gap: var(--sp-1) var(--sp-3); } /* スマホ版は「前の巻・目次・表示設定・次の巻」の4列に組み直し、 両端と中央で指の届く位置に固定する。.prevnext / .reader-tools は display:contents で外し、中のボタンをツールバーの直接のグリッド項目 として扱う。 */ .reader-toolbar { display: grid; grid-template-columns: auto 1fr 1fr auto; align-items: center; font-size: var(--fs-xs); gap: var(--sp-2); } .reader-toolbar .prevnext, .reader-toolbar .reader-tools { display: contents; } .reader-toolbar .prevnext > :first-child { order: 1; justify-self: start; } .reader-toolbar .toc-open-button { order: 2; justify-self: center; } .reader-toolbar .prevnext > :last-child { order: 4; justify-self: end; } /* パネルはツールバーの幅いっぱいに開く (画面外へはみ出させない)。 基準をボタンからツールバーに移すため .reader-menu の relative を外す。 */ .reader-menu { order: 3; justify-self: center; position: static; } .menu-panel { left: 0; right: 0; min-width: 0; } /* ツールバーは常時スクロール追従する(sticky)ため、文字ラベルを出したままだと スマホでは上部がずっと窮屈になる。ラベルを隠してアイコンだけの正方形 ボタンに切り替え、意味は aria-label(前の巻/次の巻/表示設定)で伝える。 */ .nav-link-label { display: none; } .nav-link, .menu-button { justify-content: center; min-width: 40px; padding-left: 0; padding-right: 0; } .nav-link-placeholder { min-width: 40px; } /* スマホでは「紙」とツールバーを画面の端まで広げる。カードの左右の罫と 角丸、そして器の左右の余白は、そのぶん一行の字数を削るだけで得るものが ない (390pxの画面では、端まで届く紙のほうが2〜3字ぶん長く組める)。 上下の罫だけは本文の始まりと終わりの目印として残す。 */ .reader-layout { padding-inline: 0; } .page-paper { border-inline: none; border-radius: 0; padding: var(--sp-4); } /* ヘッダー・ツールバー・紙は、画面上端から1つの帯として続ける。あいだに 余白を残すと、中身の無い隙間が2本挟まって見えるだけなので (ホーム画面から開いたときにいちばん目立つ)、上下とも落として、 ツールバーをヘッダーの罫に直に載せ、紙をその罫に直に載せる。 本文の息継ぎは紙自身の padding が持っている。 */ .reader-layout { padding-block-start: 0; } .reader-toolbar { top: var(--header-h, 0px); border-inline: none; border-block-start: none; border-radius: 0; margin-bottom: 0; } /* 指で押す的は 44px 四方を下限にする (Apple/Google のどちらの目安も44dp) */ .reader-toolbar button, .reader-toolbar a.button-like { min-height: 44px; } .nav-link, .menu-button, .toc-open-button { min-width: 44px; } .nav-link-placeholder { min-width: 44px; } /* ホームバーのある端末で、最終行が下端の帯に隠れないようにする */ .reader-layout { padding-bottom: calc(var(--sp-7) + env(safe-area-inset-bottom)); } } /* ---------------------------------------------------------------- 夜面 (表示設定の「テーマ」で「暗い」を選んだとき) 配色そのものは tokens.css の [data-theme="night"] が持っている。 reader.js は「端末に合わせる / 明るい / 暗い」の選択を解決して、夜面の ときだけ を立てる(初期表示のちらつきを防ぐため、 判定はテンプレート側
のインラインスクリプトで先に済ませる)。 ここに書くのは、明面を前提にしていた箇所の手当てだけ。 ・コードのシンタックスハイライト(highlight.js のCDN配布CSS)は reader.js が github / github-dark を差し替える。 ・Mermaid図は reader.js が theme: neutral / dark で描き直す。 ---------------------------------------------------------------- */ [data-theme="night"] { /* スクロールバー・フォーム部品・入力欄のキャレットまで夜面に合わせる */ color-scheme: dark; } /* 夜面では、紙(--surface)より暗いコード地は沈みがちなので少し持ち上げる */ [data-theme="night"] .markdown-body code, [data-theme="night"] .markdown-body pre { background: color-mix(in srgb, var(--geppaku) 6%, var(--surface)); } /* ---------------------------------------------------------------- 印刷 (PDF書き出し) — 表紙スタイル「classic (白妙)」 画面には表示せず、@media print でのみ出現する。 ---------------------------------------------------------------- */ .print-only { display: none; } @media print { /* 夜面で読んでいても紙は白く刷る。配色を個別に打ち消すのではなく、 tokens.css のセマンティックトークンだけを明面の解決値へ戻す (これでカード・罫・引用の囲みまで一度に明面に揃う)。 */ [data-theme="night"] { color-scheme: light; --bg: var(--gekko); --surface: #FFFFFF; --text: var(--yoizumi); --text-muted: var(--hakubo); --line: var(--tangetsu); --link: var(--hagane); } /* 読み進みの細線は紙に出さない */ .reading-progress { display: none; } /* 縦書きで読んでいても、ブラウザの印刷は横組みに戻す (縦組みのままだと器の横スクロール分が紙に出ない)。 */ html[data-vertical="1"] .page-paper { writing-mode: horizontal-tb; height: auto; max-width: none; overflow: visible; } @page { size: A4; margin: 22mm 18mm; } .skip-link, .site-header, .reader-toolbar, .resume-banner, .toc-sidebar, .diagram-bar, .export-dialog, .site-footer { display: none !important; } /* 表の列幅も画面の器に合わせて配ったものなので、紙ではブラウザの自動列幅に 戻す (reader.js の layoutTableColumns が入れたインラインの寸法を打ち消す)。 */ .markdown-body table.sized-table { table-layout: auto; inline-size: 100% !important; } .markdown-body table.sized-table th, .markdown-body table.sized-table td { inline-size: auto !important; } /* 図は縮小して紙幅に収める (画面用の実寸指定を打ち消す) */ .diagram { border: none; } .diagram-body { max-height: none; overflow: visible; padding: 0; } .diagram-body svg { width: auto !important; height: auto !important; max-width: 100% !important; } .reader-layout { display: block; padding: 0; } .page-paper { border: none; padding: 0; background: none; } body { background: #fff; color: #000; } .print-only { display: block; } .print-cover { height: 240mm; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; break-after: page; border-top: 1pt solid #0B1220; border-bottom: 1pt solid #0B1220; padding: 24mm 10mm; } .print-cover .eyebrow { font-family: var(--font-data); letter-spacing: 0.2em; font-size: 10pt; color: #46608C; margin-bottom: 14mm; } .print-cover h1 { font-family: var(--font-display); font-size: 26pt; line-height: 1.5; margin: 0 0 8mm; } .print-cover .subtitle { font-family: var(--font-display); font-size: 13pt; color: #3A4160; margin-bottom: 14mm; } .print-cover .meta { font-family: var(--font-data); font-size: 9pt; color: #5A6478; } .print-toc { break-after: page; } .print-toc h2 { font-family: var(--font-display); font-size: 14pt; border-bottom: 1pt solid #DDE3EE; padding-bottom: 3mm; } .print-toc ol { list-style: none; padding: 0; font-size: 10pt; line-height: 2; } .print-toc li.depth-3 { padding-left: 6mm; font-size: 9pt; } .markdown-body h1 { break-before: page; } .markdown-body h1:first-child { break-before: avoid; } .markdown-body pre, .markdown-body table, .markdown-body pre.mermaid { break-inside: avoid; } } /* ---------------------------------------------------------------- 404 ---------------------------------------------------------------- */ .not-found { padding: var(--sp-8) 0; } /* ---------------------------------------------------------------- フッター ---------------------------------------------------------------- */ /* フッターは静かに閉じる。ブランド(左)と著作権表示(右)を細い罫線の下に 置くだけで、リンクは増やさない — 書架の底板にあたる部分。 */ .site-footer { margin-top: var(--sp-7); border-top: var(--hairline); padding: var(--sp-5) 0; color: var(--text-muted); font-size: var(--fs-xs); } .site-footer .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } .footer-brand { display: flex; align-items: baseline; gap: var(--sp-2); text-decoration: none; color: var(--text); } .footer-brand img { width: 20px; height: 20px; flex: none; align-self: center; opacity: 0.9; } .footer-brand-word { font-family: var(--font-logotype); font-size: var(--fs-md); letter-spacing: var(--tracking-brand); } .footer-brand-sub { font-family: var(--font-data); letter-spacing: var(--tracking-wide); color: var(--text-muted); } .footer-copy { margin: 0; font-family: var(--font-data); letter-spacing: 0.04em; } /* スマホでは横並びだと折り返して読みにくいので、縦に積む。 このブロックは、上書きする .site-footer の規則より後ろに置くこと (画面幅ごとのまとまり(@media (max-width: 480px))は、ファイル上では フッターの定義より前にあり、そこに書くと後勝ちで打ち消される)。 */ @media (max-width: 480px) { .site-footer { margin-top: var(--sp-5); } .site-footer .container { flex-direction: column; align-items: flex-start; gap: var(--sp-2); } }