はじめに

小冊子作成用のHTML5文書の解説をします。細部のマークアップについてです。

ページ数調整の仕掛け

両面印刷で冊子印刷をするので、1枚の紙に4ページ分印刷されます。そのため、ページ数は全部で4の倍数になると紙を全部使い切ることになります。

4で割って余りが出る場合、その分最後に空白のページができます。それはそれで構わないかもしれません。ただ、後述の裏表紙(表4)を作る場合、その後に空白ページが続くのは少々みっともないものになります。

他にも、内容によっては見開きで見たい場合があります。1枚目(表紙)を1ページ目とすると、偶数ページ―奇数ページの組み合わせで見開きになります。奇数ページから偶数ページだと紙をめくることになります。

どうしても見開きで読みたいけどそうならない場合、それより前の適当なところで改ページしたり、もしくは空白のページをつくったりして、1ページ分増やす必要が出てきます。

改ページの場所

改ページの場所は、ブラウザの印刷プレビューで判ります。フォントや行間の大きさなどに応じてブラウザが判断します。

章の末尾では強制的に改ページするよう、CSSで指定しています。

その場合、最後の章で改ページすると空白ページができるので、最後の章だけ強制で改ページしないよう指定していました。が、特に指定しなくても空白ページができなかったのでその指定は削除してます。

強制改ページ

改ページしてほしくないところでページが分かれるときがあります。もう少し手前でページが変わってくれたらと思ったり。

そこで、特定のクラス名を付けたhr要素を使います。hr要素は区切りを表し、普通は水平線が引かれると思います。これを、線は印刷せず改ページだけするよう、CSSで指定します。

ここの文書では、「page-break」というクラス名をつけたhr要素を使っています。

<p>なんとかかんとか</p>

<hr class="page-break">

<p>なんとかかんとか</p>

hr要素は段落が続いているときに少し話題が変わった箇所などに使います。線を引いたり、大きめの間を空けることで、話題が変わったことが判りやすくなります。

しかしここでは改ページが目的なので、必ずしも話題が変わった箇所ではないかもしれません。HTML的には問題のある使い方のような感じですが、今回の第一目的は冊子印刷のデータ作成なので、余り深く考えないことにします。

空白ページ挿入

完全に空白のページを挿入したい場合、クラス名として「chapter」と「null」を付けたsection要素を書きます。

<section class="chapter null">
<h2>空白ページ</h2>
<p>次のページを偶数行からはじめたいので、空白ページを挿入する。</p>
</section>

nullというクラス名で、内容が表示されないようにしています。中のh2要素とp要素はとりあえず書いておきます。

表紙内

日付を書く

文書が完成したときや印刷したときの日付は、内容の鮮度の目安になります。往々にして古い情報は役に立たなくなることがありますが、日付があれば判断材料になります。

ということで、日付を書きます。マークアップの仕方はいろいろあると思いますが、私は説明リストとして書いてます。

<dl class="ymd">
    <dt>作成</dt>
        <dd>2015年01月15日</dd>
</dl>

クラス名「ymd」(年月日の略)のdl要素としてマークアップしてます。CSSでは最初の文字と日付の間にコロン(:)をはさみ、1行で表示されるようにしています。

なくても構わないと思いますが、記しておくと後々便利です。

表紙の前書き

表紙の下に、冊子の要約や書くに至った理由など、ちょっとした前書きを書けるようにしています。

内容は普通の段落(p要素)やリストなど。それらをクラス名「intro」のdiv要素でまとめています。

<header class="cover">
<h1>見出し</h1>

<div class="intro">   ──────────────────────────┐
<p>前書きの部分。二段組みで表紙の下に表示されるようにしています。</p>
<p>ここの文字は、本文より少し小さめで表示されるよう設定しています。</p>
<ol>
    <li>順序リスト</li>                                                   ├ 表紙の前書き
    <li>順序リスト</li>
    <li>順序リスト</li>
</ol>
</div>  ─────────────────────────────────┘
</header>

表紙の一番下に、二段組みで表示されるようにしています。

ここの元ネタはタミヤの組み立て説明書の表紙レイアウトでした。一番上にタイトル、次に製品写真や絵が大きく載り、下に解説文が二段組みや三段組みで書かれていました。最近のだと複数の外国語で書かれてましたっけか。それっぽいのを再現してみたいと思いまして。

これもなくても構わないと思います。とりあえずこういうこともできますよという話でした。

他と区別させたい文章

本文とはちょっと違った意味合いを持った段落を書く場合があります。

解説書で注意点を書く場合、その文章を細い枠で囲むだけで、本文とは違った意味合いを持つというのが判ります。警告レベルの文章なら警告を示す記号を表示し、赤い枠で囲むなどすれば、かなり目立つし意味合いも判りやすくなります。

章の前書き

「表紙の前書き」というのを作りましたが、章にも前書きがあった方がいいかなと思いました。

基本的には、見出し(h2要素)の次に文章などを書きます。これらを見出しも含めてheader要素としてマークアップします。

<section class="chapter">
<header>  ──────────────────────────────┐
<h2>画像</h2>

<div>   ───────────────────────┐              │
    <p>画像の大きさ別で表示のチェックを行う。</p>     │              │
    <ol>                                              │              │
        <li>320×240ピクセル</li>                 章の前書き          ├ 章のヘッダ
        <li>640×480ピクセル</li>            要素が複数ある場合       │
        <li>800×600以上</li>                div要素としてグループ化  │
    </ol>                                             │              │
</div>  ───────────────────────┘              │

</header>   ─────────────────────────────┘

段落一つやリスト一つならそのまま書けばOKです。もし段落やリストなど、前書きとする要素が複数ある場合、それらをdiv要素としてひとまとめにマークアップします。

前書きの箇所を枠を付けて表示するようにしています。div要素としてひとまとめにしないと、要素一つ一つに枠が描かれます。

今回は節や項以下のセクションのheader要素には特定のスタイルを作っていません。章の分あればいいかなと思いまして。

header要素は見出しを含めなければならない、ということはないので、見出しを含めずにマークアップすれば、複数の要素が入ってもdiv要素としてマークアップする必要はなくなり、もっと簡単になります。ただ、表紙でのheader要素の使い方と統一性がなくなるので、とりあえず上記のようにしています。

要点の類い

本文とは別の、要点を書いた段落です。クラス名に「note」と付けたp要素です。

さらに、注意や危険といった意味合いを持つ要点の段落に、「note」と「caution」、「warning」というクラス名も付記してみます。

複数の段落の場合は、「note」、「caution」、「warning」というクラス名を付けたdiv要素でまとめます。

<p>OS再インストールの準備は以上。</p>
<p class="note">USBメモリの調子が悪いときは、インストールDVDを使うこと。</p>
<p class="note caution">念のため、モデムとルータの電源を切り、スタンドアロンの状態にしておくこと。</p>
<p class="note warning">データは必ず全てのバックアップをとっておくこと。</p>

<div class="note caution">
<p>要点や注意などに複数の段落を使う場合。</p>
<p>このようにマークアップ。</p>
</div>

「note」とクラス名のついた段落は、本文より少し字下げして、枠で囲って表示するよう、CSSで指定しています。

「caution」を付け加えた段落は、目立つよう赤色の枠にし、先頭に警告標識を付けるよう指定しています。

「warning」を付け加えた段落は、枠を少し変え、薄めの赤を背景色にしています。

この辺は、HTMLの仕様書にあるマークアップを参考にしています。

その他

冊子の内容によっては、本文と区別する形で「例題」「ヒント」などの段落を付けたい場合があります。

今回は用意していませんが、必要ならそれらの段落に適切なクラス名を付けたり、適切なクラス名を付けたdiv要素でグループ化するといいのではないかと思います。そのクラス名の要素にCSSで意味合いに応じたスタイルを指定してやればいいと思います。

アンカー

普通に書く

印刷用のHTML文書ですが、普通にハイパーテキストとして使えるよう、アンカーも普通に書いてみます。

<p>昨日、<a href="http://example.jp/index.html">○○店</a>に行きました。</p>

<p><a href="#start" title="01.はじめに">最初の章</a>にも書いた話です。</p>

そのまま印刷するとどこにリンクしているのか判らないので、CSSでリンク先のURLが表示されるようにしています。

同じ文書内にリンクしている場合、title属性にリンク先の詳細を書き、それが表示されるようにしています。

これでも構わないと思いますが、同じ段落でアンカーが複数あると、文章が見にくくなる恐れがあります。

脚注として書く

脚注のマークアップは、HTML5仕様書の4.12.5 脚注を参考にしています。

属性の値に「fn」という言葉を使っています。脚注の英訳「Footnotes」の略です。

<p>昨日、<a href="http://example.jp/index.html" id="fn-target01">○○店</a><a href="#fn01">[1]</a>に行きました。</p>

<p><a href="#start" id="fn-target02" title="01.はじめに">最初の章</a><a href="#fn02">[2]</a>にも書いた話です。</p>

    <aside class="fn">  ─────────────────────────────────────┐
    <dl>
        <dt id="fn01"><a href="#fn-target01">[1]</a></dt>                  ←脚注番号             │
            <dd><span class="url">http://example.jp/index.html</span></dd>   ←外部リンクの場合   ├ 脚注
        <dt id="fn02"><a href="#fn-target02">[2]</a></dt>                  ←脚注番号             │
            <dd>「01.はじめに」(4ページ)を参照。</dd>                      ←文書内の場合       │
    </dl>
    </aside>  ──────────────────────────────────────────┘
</section><!--chapter--> ←章の最後

アンカーとしても書きますが、その後に小さな括弧付きの番号を書きます。文章や章、節などの最後に脚注(文末脚注)として、番号に対応したURLなどを書きます。

こうすれば、文章自体も、リンク先も、判りやすくなるのではないかと思います。ただし文書は複雑になります。

小さな括弧付きの番号をクリックすれば、その番号に対応した脚注にいくようにマークアップしています。

脚注の部分はfnというクラス名のaside要素としてマークアップしています。脚注番号と内容の組み合わせは、dl要素としてマークアップしています。

本文の脚注番号から脚注へ、また脚注の番号から本文の注釈対象へと互いにリンクするようマークアップしています。

画像(+テキスト)

画像はimg要素としてマークアップします。

単に段落の次に画像をおき、また段落と書いていくと、普通は画像が左寄せで表示されます。画像がブラウザや印刷する紙の幅より小さい場合、画像の右に空白ができます。

画像を中央に置きたい場合、あるいは右側の空白に文字を表示したい場合、もしくは画像を右寄せにしたい場合、それぞれ画像周りをCSSでうまく指定すればなんとかなります。

figure要素としてマークアップ

<figure>
    <img src="(画像のパス)" alt="" title="テスト画像">
    <figcaption>300×200ピクセルの画像</figcaption>
</figure>

figure要素

figure要素については仕様書邦訳のfigure要素や、MDNfigure 要素概要を読んでいただくとしまして。この場合のfigureって図表とか挿絵の事みたいですね。

自己完結型とかちょっとピンとこない単語がよく出てきますが、最初に思いついたのは講談社ブルーバックスの本でした。科学の様々な分野について書かれた新書のシリーズで、本文には挿絵やモノクロ写真が多用されています。それらには番号と、短い説明や見出し(キャプション)が添えられています。これらがfigure要素になるのかなと思ったのでした。

大切なのはMDNの解説にあるこの要素は通常、「主なテキストの中から参考文献として参照されるが、メインのフローに影響を与える事無く別ページまたは付録に移動することが可能な画像、実例、図表、コード断片あるいは図表など」に対し用いますというところかなと思います。

figcaption要素

figure要素の短い説明を表します。必要なければ省略できます。

クラス名「image」のついたdiv要素

<div class="image">
    <img src="パスと画像のファイル名" alt="ピンぼけのメダカの顔">
    <div class="image-info">  ───────────────┐
        <p>メダカの画像。うまく撮影できなかった。</p>
        <ul>
            <li>よく動くのでピントが定まらない</li>         ├ 画像横に配置される
            <li>光量不足で眠い画像になった</li>
        </ul>
    </div>  ────────────────────────┘
</div>

div要素(クラス名「image」)

figure要素は、本文から参照されるけど場所を移動しても問題ない場合に用いました。

しかし中には移動すると問題がある場合もあります。図や挿絵と本文が密接に関係している場合、ということですが。

料理のレシピはそうかもしれません。盛りつけも終わった画像が1枚だけというのではなく、調理中の画像と文章(もしくは順序リスト)が順番に並んでいるというタイプ。できれば画像とそれに対応する文章とが左右に並んで表示されると判りやすいです。

組み立て説明書、作業のチュートリアル(解説書)もそうかもしれません。

画像とそれに対応する文章とを、div要素としてマークアップします。div要素にはとりあえずクラス名「image」とします。CSSで、画像を左、文章を右に配置させます。CSSをいじれば逆に配置することもできます。

対応する文章(段落やリスト)が複数の要素の場合、これらもdiv要素としてひとまとめにします。これはひとまとめにしたいだけで、特定のスタイルは指定していません。なのでクラス名はなくても構いませんが、とりあえず「image-info」としています。

目次

冊子もページ数が増えると、目次がほしくなります。それだけで1,2ページ使うので、小冊子にはもったいないかもしれません。

ただ、あると便利です。並んでいる見出しは冊子の大まかな内容を知る手がかりにもなります。


<nav class="chapter toc">  ─────────────┐
<h2>目次</h2>
────────────────────┐           │
<h3>文章</h3> ←各章の見出し名          │           │
<dl class="toc">                        │           │
    <dt>段落</dt> ←各項の見出し名      │           │
        <dd>4</dd> ←ページ番号         ├(節)     │
    <dt>引用</dt>                       │           │
        <dd>6</dd>                      │           │
</dl>                                   │           │
────────────────────┘           ├ 章 目次
────────────────────┐           │
<h3></h3>                             │           │
<dl class="toc">                        │           │
    <dt>表その1</dt>                    │           │
        <dd>9</dd>                      ├(節)     │
    <dt>表その2</dt>                    │           │
        <dd>9</dd>                      │           │
</dl>                                   │           │
────────────────────┘           │
</nav><!--chapter-->   ───────────────┘

<main role="main">

節を示すマークアップはしていませんが、h3要素があることで、暗黙的に「節」の範囲が決まっています。実際にマークアップしているわけではないので、節の範囲に特定のスタイルを指定することはできませんが。

目次としてのマークアップ

nav要素(クラス名「chapter」+「toc」)

目次は一つの章としています。クラス名「section」とクラス名「toc」を付けたnav要素としてマークアップします。tocは、目次の英訳「table of contents」の略です。


目次は、冊子内の主要な見出しとページ番号からできています。本来なら、見出しやページ番号を各章や節へのアンカーとしてマークアップし、主要なナビゲーションリンクとして構成されるセクションにすると思います。

そのため、目次の章はsection要素とするのではなく、nav要素としてマークアップしています。HTML Bookの規格でも目次はnav要素としてマークアップしてます。

ただし今回のHTML文書は、小冊子印刷用として作っているので、アンカーとしてマークアップしていません。した方がいいような気もしますが、面倒なので私はやっていないのでした。

dl要素(クラス名「toc」)

節の見出しとページ番号を、dt要素とdl要素として書いていきます。

普通のdl要素と区別するため、クラス名として「toc」を付け、目次専用のスタイルをCSSで指定します。

ページ番号

節の見出しにページ番号を付けますが、これは印刷プレビューを見ない限り判りません。そのため、最初は適当な数(0等)を振っておきます。CSSの指定で、dd要素に何も書かれていないと、少々みっともない表示になってしまいますので。

ページ番号を調べるのは、HTML文書の修正が全て終わってからにした方がいいです。修正するとページ番号が変わる場合がありますので。

修正箇所がなく、内容自体はこれで完成となってから、ページ番号を調べます。印刷プレビューで各項のページ番号を確認し、HTML文書に書き加えていきます。最後まで書けたら印刷プレビューを一旦終了し、リロードして番号が振られているか確認。再度印刷プレビューで目次のページ番号と実際のページが合っているか確認します。

奥付のページ

いくつかの段落と、奥付を記すためのページです。段落には著者の短い感想とか、注意点(「この話はフィクションです」の類い)など、後書きのようなものを書くことを想定しています。

奥付は著者名や発行日、版数などを書く箇所です。全体を枠で囲うようにしています。デフォルトではページ最下部の真ん中に配置しています。

自分だけで使う小冊子なら必要はないと思いますが、あればいろいろと利用できるかもしれません。私の場合はガレージキットの組み立て説明書として作る際必要なので、こういうのを作ってます。

</main> ←main要素はここで終わり。

<section class="chapter afterword"> ←後書き、奥付はmain要素の外にしています。
<h2>後書き</h2> ←後書きの見出しはCSSで表示しないようにしています。
<p>****はフィクションです。登場する人物名や企業団体、事件等は架空の以下省略。</p>
<p>この冊子は、2014年11月1日の****にて配布しました。</p>

<div class="colophon">  ─────────────────┐
<p>なんとかシリーズ No.010(奥付の一例)</p>
<p>販売価格:1000円(送料込)</p>
<table>
    <tr>
        <th>発行日</th>
        <td>2014年07月20日 初版</td>
    </tr>
    <tr>
        <th></th>  ←全角の空白を入れてます。           │
        <td>2014年07月21日 第三版発行</td>
    </tr>
    <tr>                                                  ├ 奥付
        <th>著者</th>
        <td>著者氏名</td>
    </tr>
    <tr>
        <th>メールアドレス</th>
        <td class="mail">mail@example.jp</td>
    </tr>
    <tr>
        <th>ウェブサイト</th>
        <td class="url">http://example.jp/</td>
    </tr>
</table>
<p>2014 MADE IN JAPAN</p>
<p>©2010 - 2014 ○○○</p>
</div>    ────────────────────────┘
</section><!--chapter-->

奥付としてのマークアップ

奥付のページは、main要素が終わった後に書きます。冊子の内容の「メインのコンテンツ」ではない、ということです。

section要素(クラス名「chapter」+「afterword」)

章としてのマークアップに、「afterword」というクラス名を追加しています。

短文+奥付のみを書くページという感じで作ったため、見出しはHTML文書では一応書いてますが、印刷では非表示にしています。この辺はCSSいじればどうにでも変えられます。

div要素(クラス名:colophon)

奥付は、著者名や日付などの項目を段落や表として書き、全体をクラス名「colophon」と付けたdiv要素としてまとめます。

クラス名「colophon」と付けたdiv要素内の表は、奥付っぽい感じになるスタイルを付けています。

とはいえ奥付の書き方もいろいろあるみたいなので、違和感のある人がいるかもしれませんが。

ここはfooter要素としてマークアップした方がいいんじゃないかとか思いましたが、とりあえずこのままで行きます。

裏表紙

表4と言われるページで、最後のページになります。footer要素としてマークアップしました。

真っ白でも構わないかと思いましたが、中央に小さめの文字を入れるようにしてみました。


</main> ←main要素はここで終わり。

<section class="chapter afterword"> ───────┐
  中略   奥付とか                                 ├ 章 後書き
</section><!--chapter-->  ────────────┘

<footer class="cover back"> ───────────┐
<h2>裏表紙</h2> ←とりあえず書く                  ├ 裏表紙
<p>印刷テスト 24ページ版</p>
</footer>   ───────────────────┘

</body>
</html>

footer要素(クラス名「cover」+「back」)

body要素内の最後の子要素です。この後に書くのはbody要素とhtml要素の終了タグくらいです。

表紙の仲間(?)なので、クラス名に「cover」、それに加えて裏表紙と言うことで「back」を付けています。

中にはh2の見出しと、裏表紙中央に表示される文を書きます。見出しは一応書くことにしているだけで、後書きのページと同じくCSSで表示しないようにしています。中央に表示される文は、冊子のタイトルがふさわしいと思っています。

footer要素については仕様書邦訳のfooter要素や、MDNfooter 要素概要を読んでいただくとしまして。

仕様書やら概要やら読むと、こんなことするのにfooter要素としてマークアップしていいんだろうかとか思ったのですが、これもまあいいやということでこのままにします。表紙の類いもsection要素にした方がいいんでしょうか。「どうでもいい」もしくは「もっと頭使え」とか言われそうですが。

そういやHTMLBook仕様書邦訳には「表紙」や「cover」の文字がありませんでした。表紙の類いは別ファイルになるんでしょうか。