はじめに

ここでは、小冊子作成用のHTML5文書の解説をします。小冊子用にどうマークアップしているかを書きます。

基本的にはHTMLについて知識がある事を前提にして書いていきます。

HTMLの基本

基本の解説

HTMLとかCSSが判らないという方は、基本から知っておきましょう。ワープロソフトに慣れている方ほどHTMLの考え方が理解しにくいかもしれません。

ということで参考になるサイトを書いてみます。

いずれもHTML5より前の規格での解説です。そのため、HTML5とは少々異なる点もあります。

それでも基本的な考え方は変わりませんので、一読をお勧めします。

規格の解説

HTML5という規格を解説しているサイトです。難易度高いです。

最初がHTML5仕様書の邦訳版。難解な箇所も多いですが、判らないことがあったときはまずここを見てます。

次の二箇所はMozilla財団のサイトでの解説です。IEやGoogleChromeなど、主要なブラウザの実装状況もわかるので便利です。「main要素」が抜けてたりしますが、そのうち改訂されると思います。

用語

要素

文章はいろいろな要素が集まってできています。たとえば「見出し」「段落」などが要素と言われるものです。

見出しと段落という要素は、レポートや小説、解説書、お知らせのチラシなど、文書なら大抵あるものです。見出しでも文書全体を表す見出しもあれば、狭い範囲を表す見出しもあります。

他にもHTMLでは文章を表すための様々な要素が決められています。リストとか、画像とか、表とか。

タグ

文章の「どこから」「どこまでが」「どんな要素か」をブラウザなどに判らせるため、ある決まった印を書いていきます。その印がタグです。HTMLだと、要素の名前(英字)を不等号記号で囲んだ文字列になります。

要素の最初に開始タグ、最後に終了タグを書くことで、要素の範囲をはっきりさせます。終了タグは、不等号記号内の要素名の前にスラッシュがついています。

マークアップ

文章にタグを書き込んでいくことを、マークアップとかマーク付けと言います。マークアップをすることで、どこからどこまでがどんな要素かがはっきり判るようになります。

基本的な文書構造

普通のHTML5文書です。

薄めの灰色の箇所は解説のためのコメントです。実際にHTML文書に書くものではありません。

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<link rel="stylesheet" title="CSSの名前" href="標準のCSSのパス" media="screen,print">
<link rel="alternate stylesheet" title="代替用CSSの名前" href="代替用CSSのパス" media="screen,print">
<title>タイトル</title>
</head>

<body>

<div class="cover">    ──────────────────────┐
<header>     ──────────────────┐                │
<h1>見出しレベル1(タイトル)</h1>               │                │
<dl class="ymd">                          header要素として         │
    <dt>作成</dt>                         一つにまとめる           ├ 表紙の範囲
        <dd>2015年01月15日</dd>                  │                │
</dl>                                            │                │
</header>    ──────────────────┘                │
</div>   ─────────────────────────────┘

<main role="main">

    <section class="chapter">  ──────────────────┐
    <h2>見出しレベル2 1個目</h2>
    <p>本文</p>                                                    ├ 章
    <p>本文</p>
    </section>   ─────────────────────────┘

    <section class="chapter">  ──────────────────┐
    <h2>見出しレベル2 2個目</h2>

        <section class="sect3"> ←無くても可。 ─────┐        │
        <h3>見出しレベル3 1個目</h3>                     │        │
        <p>本文</p>                                      ├ 節     │
        <p>本文</p>                                      │        │
        </section>←開始タグを書いたならここも必要。 ──┘        │
                                                                   ├ 章
        <section class="sect3"> ←無くても可。 ─────┐        │
        <h3>見出しレベル3 2個目</h3>                     │        │
        <p>本文</p>                                      ├ 節     │
        <p>本文</p>                                      │        │
        </section> ←開始タグを書いたならここも必要。──┘        │

    </section>   ─────────────────────────┘

    <section class="chapter">  ──────────────────┐
    <h2>見出しレベル2 3個目</h2>
    <p>本文</p>                                                    ├ 章
    <p>本文</p>
    </section>   ─────────────────────────┘

</main>

</body>

</html>

div要素(クラス名:cover)

「表紙」(表1)に当たる部分を、クラス名「caver」にしたdiv要素としてマークアップします。「表紙」を意味する要素はHTML5にはないので、同じ意味合いを持つ要素をひとまとめにするdiv要素としてマークアップし、表紙という意味で「caver」というクラス名を使っています。

header要素

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

表紙に当たるところでは、h1要素とそれに付属する段落などをまとめてheader要素としてマークアップします。これが小冊子の題名と、その近くに配置される副題、作成日などになります。

main要素

表紙にあたる範囲の次、最初の章から最後の章までを、main要素としてマークアップしました。

小冊子の中身に当たる範囲をmain要素としてマークアップしています。

CSSで、h2とh3に自動で数字を付けるスタイルを作っていますが、それらはmain要素内のh2要素、h3要素を対象にしています。

section要素

section要素は、章や節などのセクションを示します。

今回の冊子印刷用CSSでは、章の範囲を<section class="chapter">~</section>として表しています。

本来なら、節や項といった章以下のセクションも、適切なクラス名を付けたsection要素としてマークアップするところですが、面倒なので省略しています。

章のセクションは改ページなどのスタイルを指定していますが、節以下は特にスタイルを指定していません。そのため省略しても問題はありません。スタイルを指定してないから省略というのは手抜きと言われても仕方ないのですが、本来公開するものでも無し、これはこれでいいやということで。

一応、上記の例では節の範囲を<section class="sect3">~</section>として表しています。sect3というクラス名を付けています。節や項は「section」「subsection」というクラス名が普通かもしれません。ただ、要素名と同じで紛らわしいので、ここでは少し短縮したうえで、見出しレベルと同じ数字を足して「sect3」と書いています。