MurakamiShinyu/00-Vivliostyle-tutorial-sample.md

## 00-Vivliostyle-tutorial-sample.md

      
                Raw

        
              00-Vivliostyle-tutorial-sample.md
            
          
    A Vivliostyle tutorial sample (Vivliostyle CSS組版ちょっと入門サンプル)
View with Vivliostyle Viewer


https://vivliostyle.org/viewer/#src=https://gist.github.com/MurakamiShinyu/4f0423fd3578a277c7d29f56a31912b7/raw/index.html&bookMode=true


with print marks (トンボ付き): https://vivliostyle.org/viewer/#src=https://gist.github.com/MurakamiShinyu/4f0423fd3578a277c7d29f56a31912b7/raw/index.html&style=https://gist.github.com/MurakamiShinyu/4f0423fd3578a277c7d29f56a31912b7/raw/print-marks.css&bookMode=true


## chapter1.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>最初の章</title>
  <link rel="stylesheet" href="style.css">
</head>
<body role="doc-chapter">
  <h1>最初の章</h1>
  <p>サンプルテキストは<a href="https://www.aozora.gr.jp/cards/000121/card628.html">青空文庫の新美南吉『ごん狐』</a>から。</p>
  <section id="section1">
    <h2>はじめのセクション</h2>
    <p>これは、私が小さいときに、村の茂平というおじいさんからきいたお話です。</p>
    <p>むかしは、私たちの村のちかくの、中山というところに小さなお城があって、中山さまというおとのさまが、おられたそうです。</p>
    <img class="photo" src="https://vivliostyle.github.io/vivliostyle.js/samples/gon/img/gon.jpg" alt="狐">
    <p>その中山から、少しはなれた山の中に、「ごん狐」という狐がいました。ごんは、一人ぼっちの小狐で、しだの一ぱいしげった森の中に穴をほって住んでいました。そして、夜でも昼でも、あたりの村へ出てきて、いたずらばかりしました。はたけへ入って芋をほりちらしたり、菜種がらの、ほしてあるのへ火をつけたり、百姓家の裏手につるしてあるとんがらしをむしりとって、いったり、いろんなことをしました。</p>
  </section>
  <section id="section2">
    <h2>ふたつめのセクション</h2>
    <p>或秋のことでした。二、三日雨がふりつづいたその間、ごんは、外へも出られなくて穴の中にしゃがんでいました。</p>
    <p>雨があがると、ごんは、ほっとして穴からはい出ました。空はからっと晴れていて、百舌鳥の声がきんきん、ひびいていました。</p>
  </section>
</body>
</html>

## chapter2.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>２番目の章</title>
  <link rel="stylesheet" href="style.css">
</head>
<body role="doc-chapter">
  <h1>２番目の章</h1>
  <p>十日ほどたって、ごんが、弥助というお百姓の家の裏を通りかかりますと、そこの、いちじくの木のかげで、弥助の家内が、おはぐろをつけていました。鍛冶屋の新兵衛の家のうらを通ると、新兵衛の家内が髪をすいていました。ごんは、</p>
  <p>「ふふん、村に何かあるんだな」と、思いました。</p>
</body>
</html>

## chapter3.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>最後の章</title>
  <link rel="stylesheet" href="style.css">
</head>
<body role="doc-chapter">
  <h1>最後の章</h1>
  <p>「ごん、お前だったのか。いつも栗をくれたのは」</p>
  <p>ごんは、ぐったりと目をつぶったまま、うなずきました。</p>
  <p>兵十は火縄銃をばたりと、とり落しました。青い煙が、まだ筒口から細く出ていました。</p>
</body>
</html>

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>簡単な本</title>
  <link rel="stylesheet" href="style.css">
  <style>
    @page :first {                /* 表紙ページ */
      background-color: gold;       /* ページ全体に背景色 */
      margin: -3mm;                   /* ページ内容を塗り足し領域まではみ出させる */
      @top-left { content: none; }    /* 表紙ページはページヘッダー／フッター無し */
      @top-right { content: none; }
      @bottom-center { content: none; }
    }
    header {                      /* 表紙のタイトルのまわり */
      background: rebeccapurple;
      padding: 5vh 5vw;
    }
    header h1 {
      font-size: 4rem;
      text-align: center;
      color: white;
    }
    nav {                         /* 目次 */
      break-before: page;             /* 目次の前で改ページ */
    }
    nav li a {                    /* 目次項目のページ番号を点線でのばして右寄せにするため */
      display: inline-flex;           /* インラインの Flexbox を利用 */
      width: 100%;
      text-decoration: none;
      color: currentColor;
      align-items: baseline;
    }
    nav li a::before {            /* 目次項目の点線を生成 */
      margin-left: 0.5em;
      margin-right: 0.5em;
      border-bottom: 1px dotted;
      content: "";
      order: 1;
      flex: auto;
    }
    nav li a::after {             /* 目次項目のページ番号参照を生成 */
      content: target-counter(attr(href), page);  /* リンク先のページ番号カウンタの値を出力 */
      align-self: flex-end;
      flex: none;
      order: 2;
    }
  </style>
</head>
<body>
  <header>
    <h1>簡単な本</h1>
  </header>
  <nav id="toc" role="doc-toc">
    <h2>目次</h2>
    <ol>
      <li><a href="chapter1.html">最初の章</a>
        <ol>
          <li><a href="chapter1.html#section1">はじめのセクション</a></li>
          <li><a href="chapter1.html#section2">ふたつめのセクション</a></li>
        </ol>
      </li>
      <li><a href="chapter2.html">２番目の章</a></li>
      <li><a href="chapter3.html">最後の章</a></li>
    </ol>
  </nav>
</body>
</html>

## print-marks.css
@page {
  marks: crop cross;      /* トンボを付ける */
  bleed: 3mm;             /* 塗り足し領域 */
}

## style.css
@page {
  size: A5;                 /* ページ仕上がりサイズ */
  margin: 15mm;             /* ページ余白 */
  font-family: sans-serif;  /* ページヘッダー／フッターのフォント設定 */
  font-size: 0.75rem;
  line-height: 1;
  @bottom-center {          /* ページフッター（下-中央） */
    content: counter(page); /* ページ番号 */
  }
}
@page :left {               /* 見開きの左側ページ */
  @top-left {               /* ページヘッダー（上-左） */
    content: env(pub-title);  /* 本のタイトル */
  }
}
@page :right {              /* 見開きの右側ページ */
  @top-right {              /* ページヘッダー（上-右） */
    content: env(doc-title);  /* 章のタイトル */
  }
}

:root {                     /* 本文のフォント設定 */
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.75;
}

body {
  margin: 0;
  break-before: recto;      /* 各章が表側（横書きなら右）ページからになるよう改ページ */
}

p {                         /* 段落 */
  margin: 0;
  text-indent: 1em;
  text-align: justify;
}

img.photo {
  float: right;
  margin-right: -18mm;      /* 画像右端を塗り足し領域に */
  margin-left: 1em;
  max-width: 75vw;
}
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>最初の章</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body role="doc-chapter">
	<h1>最初の章</h1>
	<p>サンプルテキストは<a href="https://www.aozora.gr.jp/cards/000121/card628.html">青空文庫の新美南吉『ごん狐』</a>から。</p>
	<section id="section1">
	<h2>はじめのセクション</h2>
	<p>これは、私が小さいときに、村の茂平というおじいさんからきいたお話です。</p>
	<p>むかしは、私たちの村のちかくの、中山というところに小さなお城があって、中山さまというおとのさまが、おられたそうです。</p>
	<img class="photo" src="https://vivliostyle.github.io/vivliostyle.js/samples/gon/img/gon.jpg" alt="狐">
	<p>その中山から、少しはなれた山の中に、「ごん狐」という狐がいました。ごんは、一人ぼっちの小狐で、しだの一ぱいしげった森の中に穴をほって住んでいました。そして、夜でも昼でも、あたりの村へ出てきて、いたずらばかりしました。はたけへ入って芋をほりちらしたり、菜種がらの、ほしてあるのへ火をつけたり、百姓家の裏手につるしてあるとんがらしをむしりとって、いったり、いろんなことをしました。</p>
	</section>
	<section id="section2">
	<h2>ふたつめのセクション</h2>
	<p>或秋のことでした。二、三日雨がふりつづいたその間、ごんは、外へも出られなくて穴の中にしゃがんでいました。</p>
	<p>雨があがると、ごんは、ほっとして穴からはい出ました。空はからっと晴れていて、百舌鳥の声がきんきん、ひびいていました。</p>
	</section>
	</body>
	</html>
	@page {
	marks: crop cross; /* トンボを付ける */
	bleed: 3mm; /* 塗り足し領域 */
	}
	@page {
	size: A5; /* ページ仕上がりサイズ */
	margin: 15mm; /* ページ余白 */
	font-family: sans-serif; /* ページヘッダー／フッターのフォント設定 */
	font-size: 0.75rem;
	line-height: 1;
	@bottom-center { /* ページフッター（下-中央） */
	content: counter(page); /* ページ番号 */
	}
	}
	@page :left { /* 見開きの左側ページ */
	@top-left { /* ページヘッダー（上-左） */
	content: env(pub-title); /* 本のタイトル */
	}
	}
	@page :right { /* 見開きの右側ページ */
	@top-right { /* ページヘッダー（上-右） */
	content: env(doc-title); /* 章のタイトル */
	}
	}

	:root { /* 本文のフォント設定 */
	font-family: sans-serif;
	font-size: 100%;
	line-height: 1.75;
	}

	body {
	margin: 0;
	break-before: recto; /* 各章が表側（横書きなら右）ページからになるよう改ページ */
	}

	p { /* 段落 */
	margin: 0;
	text-indent: 1em;
	text-align: justify;
	}

	img.photo {
	float: right;
	margin-right: -18mm; /* 画像右端を塗り足し領域に */
	margin-left: 1em;
	max-width: 75vw;
	}