wip チュートリアル記事を追加

_includes/button/download.html

@@ -0,0 +1,8 @@
+<li>
+  <a
+    href="{{ include.url }}"
+    class="{{ include.class | default: 'button--secondary--large' }}"
+    download>
+    <i class="fas fa-download"></i> {{ include.text }}
+  </a>
+</li>

_includes/page/tutorials.html

@@ -0,0 +1,11 @@
+{% include h1.html title=include.title lead=include.lead %}
+
+<section class="with-toc">
+  <section class="section">
+    <div class="container">
+      {{ content | markdownify }}
+    </div>
+  </section>
+
+  {% include toc.html %}
+</section>

_sass/_basic_elements.scss

@@ -45,6 +45,20 @@ ul {
   padding: 0;
 }
 
+table {
+  width: 100%;
+
+  th,
+  td {
+    padding: 3px 10px;
+    border: 1px solid $gray_dark;
+  }
+
+  th {
+    background-color: $gray_lighter;
+  }
+}
+
 @include media_small {
   // フォントサイズを小さく
   body {

assets/tutorials/ja/customize/theme_common.scss

@@ -0,0 +1,120 @@
+/*
+ * For all media (print, screen)
+ */
+
+/* you can import partial SCSS files */
+/* @import '_valiables'; */
+/* @import '_toc'; */
+/* ... */
+
+@charset "UTF-8";
+
+html {
+  writing-mode: vertical-rl;
+  orphans: 1;
+  widows: 1;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+@page {
+  size: 148mm 210mm;
+  width: 360pt;
+  height: 468pt;
+  margin: auto;
+  font-size: 8.5pt;
+  font-family: '游明朝', 'YuMincho', serif;
+}
+
+@page :left {
+  @top-left {
+    content: counter(page) '　' env(doc-title);
+    margin-left: 7pt;
+    margin-top: 8.5mm;
+    writing-mode: horizontal-tb;
+  }
+}
+
+@page :right {
+  @top-right {
+    content: counter(page);
+    margin-right: 7pt;
+    margin-top: 8.5mm;
+    writing-mode: horizontal-tb;
+  }
+}
+
+html {
+  font-family: '游明朝', 'YuMincho', serif;
+  text-align: justify;
+  line-height: 2rem;
+}
+
+h1 {
+  font-weight: bold;
+  font-size: 1.35rem;
+  break-after: avoid;
+  line-height: 6rem;
+  letter-spacing: 0.125em;
+}
+
+h2 {
+  font-weight: normal;
+  font-size: 1.18rem;
+  text-indent: 3rem;
+  break-after: avoid;
+  line-height: 4rem;
+}
+
+ruby > rt {
+  font-size: 0.5rem;
+}
+
+p {
+  text-indent: 1em;
+}
+
+/* 括弧で始まる段落 */
+p.q {
+  text-indent: 0;
+}
+
+/* 奥付 */
+[role='doc-colophon'] {
+  font-size: 0.824rem;
+  line-height: 1.5rem;
+  margin-block-start: 6rem;
+  break-inside: avoid;
+}
+
+/* 縦中横 */
+.tcy {
+  text-combine-upright: all;
+}
+
+.upright {
+  text-orientation: upright;
+}
+
+/* 圏点（ゴマ） */
+em.sesame_dot {
+  font-style: normal;
+  text-emphasis-style: sesame;
+}
+
+/* 著者 */
+.author {
+  text-align: end;
+  font-size: 1rem;
+  font-weight: bold;
+  letter-spacing: 0.125em;
+}
+
+/* and more... 🖋 */
+
+h1 {
+  color: red;
+}

assets/tutorials/ja/customize/vivliostyle.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  title: 'mybook',
+  author: '山田太郎 <[email protected]>',
+  language: 'ja',
+  theme: '@vivliostyle/theme-bunko',
+  entry: [
+    'maegaki.md',
+    'honbun.md',
+    'atogaki.md',
+  ],
+  entryContext: './manuscripts',
+}

ja/tutorials/configure-counters-running-heads.html

@@ -0,0 +1,127 @@
+---
+layout: page
+title: チュートリアル⑤カウンタと柱の設定
+lang: ja
+---
+
+
+{% capture content %}
+## このチュートリアルの目標
+
+- カウンタの設定方法がわかる
+- ノンブルの設定方法がわかる
+- 柱の設定方法がわかる
+
+
+## カウンタの設定
+
+CSS カウンタとは、CSS 内で使えるカウンタ変数のことです。CSS カウンタを使うことで、見出し番号やページ番号を自動的に振ることができます。詳細は[CSS カウンターの使用](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters)を参照してください。
+
+counter-reset プロパティでカウンタの値を初期化し、counter-increment プロパティでカウンタの値を増加させます。カウンタの値を参照するときは、content プロパティで [counter()](https://developer.mozilla.org/ja/docs/Web/CSS/counter) 関数や [counters()](https://developer.mozilla.org/ja/docs/Web/CSS/counters) 関数を使います。
+
+
+### 見出し番号
+
+h1 に対して見出し番号を振る場合は、以下のようにします。
+
+[CSS Paged Media](https://drafts.csswg.org/css-page-3/) 仕様では、ページコンテキスト（<span>@</span>page 内）のプロパティの値はルート要素から継承するとされています。 ただし、Vivliostyle は現在のところ、ルート要素からページコンテキストへのプロパティ値の継承は未サポートです。したがって、<span>@</span>page 内で定義した CSS カウンタは <span>@</span>page 内でのみインクリメントできます。
+
+```
+@page :first { /* 全原稿ファイルの中で1枚目のページ */
+  counter-reset: chapter;
+}
+
+@page :nth(1) { /* 各原稿ファイルの中で1枚目のページ */
+  counter-increment: chapter;
+}
+
+h1 {
+  &::before {
+    content: counter(chapter);
+    writing-mode: horizontal-tb;
+  }
+}
+```
+
+![](/assets/tutorials/preview-counter1.png)
+![](/assets/tutorials/preview-counter2.png)
+
+参照：[Vivliostyle Viewer で CSS 組版ちょっと入門](https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-group-vol1/shinyu/index.html#%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%EF%BC%8F%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC%E3%81%B8%E3%81%AE%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E6%8C%87%E5%AE%9A)
+
+
+### ページ番号
+
+Vivliostyle はページ番号を管理するカウンタを独自に持っているため、カウンタを新しく用意しなくてもページ番号を取得することができます。カウンタの名前は page です。
+
+
+### カウンタの参照
+
+CSS Generated Content 仕様で定義されている[target-counter()](https://drafts.csswg.org/css-content/#target-counter) 関数を使うことで、指定した要素におけるカウンタの値を取得できます。
+
+
+## ページマージンボックス
+
+ページマージンボックスはページのヘッダーやフッターに使用できる領域で、[CSS Paged Media](https://drafts.csswg.org/css-page-3/) で定義されています。ページマージンボックスは全部で16種類あります。<span>@</span>page ルールと合わせて使用します。
+
+![](/assets/tutorials/page-margin-box.png)
+
+
+### ノンブルの設定
+
+ノンブルとは、ページの下部や端に配置されたページ番号のことです。
+
+ノンブルはページマージンボックスを使って記述します。次のように記述すると、全ページの下中央にページ番号が表示されます。
+
+```
+@page {
+  @bottom-center {
+    content: counter(page);
+    writing-mode: horizontal-tb;
+  }
+}
+```
+
+![](/assets/tutorials/preview-counter3.png)
+
+
+### 柱の設定
+
+柱とは、ページの上部や側部に配置されたテキストのことです。一般に、本のタイトルや章の名前が書かれています。
+
+柱もノンブルと同様に、ページマージンボックスを使って記述します。次のように記述すると、左ページの左上に章タイトルが表示されます。
+
+```
+@page :left {
+  @top-left {
+    content: env(doc-title);
+    writing-mode: horizontal-tb;
+  }
+}
+```
+
+![](/assets/tutorials/preview-running-heads.png)
+
+Vivliostyle は env(pub-title) と env(doc-title) という特別な変数を持っています。これらを使うことで、本のタイトルや章のタイトルを出力することができます。複数の原稿ファイルから PDF を作る場合、env(pub-title) は本のタイトル、env(doc-title) は各原稿ファイルのタイトルです。
+
+参照：[Vivliostyle Viewer で CSS 組版ちょっと入門](https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-group-vol1/shinyu/index.html#%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%EF%BC%8F%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC%EF%BC%88%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%9E%E3%83%BC%E3%82%B8%E3%83%B3%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%EF%BC%89)
+
+
+## まとめ
+
+このチュートリアルでは、カウンタと柱の設定を行いました。
+
+---
+
+次のチュートリアルでは、SCSS を編集して柱とノンブルの設定を行います。
+
+- 前：[チュートリアル④用紙と文字の設定](/ja/tutorials/configure-page-text)
+- [チュートリアル一覧](/ja/tutorials)
+{% endcapture %}
+
+
+{% include page/tutorials.html
+  title="チュートリアル⑤カウンタと柱の設定"
+  lead="SCSS を編集し、カウンタと柱を設定してみましょう。"
+
+  content=content
+%}