Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>2番目の章</title>
<link rel="stylesheet" href="style.css">
</head>
<body role="doc-chapter">
<h1>2番目の章</h1>
<p>十日ほどたって、ごんが、弥助というお百姓の家の裏を通りかかりますと、そこの、いちじくの木のかげで、弥助の家内が、おはぐろをつけていました。鍛冶屋の新兵衛の家のうらを通ると、新兵衛の家内が髪をすいていました。ごんは、</p>
<p>「ふふん、村に何かあるんだな」と、思いました。</p>
</body>
</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>
<!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">2番目の章</a></li>
<li><a href="chapter3.html">最後の章</a></li>
</ol>
</nav>
</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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.