<!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