EN
JP
KRHTMLブックの作り方とは？構成設計・実装手順・公開方法まで詳しく解説
HTMLブックとは、HTML・CSS・JavaScriptを使って、ブラウザで読める本や教材のようなコンテンツを作る方法です。通常のWebページと同じ技術で作れるにもかかわらず、読書体験を中心に設計できるため、学習コンテンツ、社内マニュアル、オンライン小冊子、製品ガイド、講座資料、ポートフォリオ型作品集など、さまざまな用途で活用できます。特に、ページごとの役割を整理し、章立てと目次を明確にし、前後ページの導線まで整えることで、単なる「長いWebページ」ではない、本として読める構成を実現しやすくなります。つまり、HTMLブックはWeb技術で作る本でありながら、ただ本をHTMLへ置き換えるのではなく、ブラウザで読みやすい形へ再設計したコンテンツ と考えるのが自然です。
また、HTMLブックの魅力は、特別なリーダーアプリを必要としない点にもあります。読者はURLを開くだけで読み始められるため、配布や共有のハードルが低く、更新も行いやすいです。PDFのように固定された見え方だけに縛られず、スマートフォン、タブレット、PCの表示幅に合わせてレイアウトを調整できるのも大きな利点です。一方で、自由度が高いぶん、章構成、見出し設計、目次、ナビゲーション、本文可読性をきちんと考えないと、単に長いだけで読みにくいページになってしまうこともあります。つまり、HTMLブックを作るときは、コーディングそのものよりも先に、何をどういう順番で、どう読ませるか を整理することが重要です。
本記事では、HTMLブックの基本概念から、通常のWebページとの違い、必要な技術、章立ての考え方、ファイル構成、目次、章ページ、本文レイアウト、コード例の見せ方、章間ナビゲーション、レスポンシブ対応、公開方法までを、16の見出しで体系的に整理します。さらに、記事後半では、実際に動かせるHTMLブックのサンプル一式として、必要なファイルをまとめて全文掲載します。短いコード断片だけで終わらず、完成形まで見られる構成にしているため、学習用途にも実制作のたたき台にも使いやすい内容です。
1. HTMLブックとは
HTMLブックとは、HTMLで構造を作り、CSSで読みやすい紙面のような見た目を整え、必要に応じてJavaScriptで目次開閉や章移動補助などを加えた、ブラウザで読むことを前提にした本形式のコンテンツです。普通のWebページと同じように作れますが、目的が「一つの情報を短時間で伝えること」ではなく、「複数の章や節を通して理解を深めてもらうこと」に寄っている点が大きく違います。つまり、HTMLブックはサイトの一種ではあるものの、設計の発想としては記事やLPより、むしろ教材や小冊子に近い形式です。
通常のWebサイトでは、読者がどのページから流入してもある程度内容が成立する構成が求められやすいですが、HTMLブックでは章順が意味を持つことが多くなります。第1章で前提を作り、第2章で基本を押さえ、第3章で応用へ進むような流れがあるため、ページ単位の独立性よりも、全体を通した理解のしやすさが重要です。そのため、HTMLブックでは一つひとつのページを個別最適化するだけでなく、「今どの章を読んでいるのか」「次はどこへ進めばよいのか」が分かるナビゲーションが必要になります。つまり、HTMLブックは単なるコンテンツ掲載形式ではなく、読み順まで含めて体験を設計する形式 です。
1.1 通常のWebページとの違い
通常のWebページは、会社案内なら会社情報、ブログ記事なら一つのテーマ、LPなら問い合わせや申込など、比較的明確な単一目的を持つことが多いです。そのため、一画面や一ページの中で何を優先して見せるかが重要になります。一方、HTMLブックでは、一ページごとの情報よりも、全体を通じて何を理解してもらうかが重要です。章が連続し、読者が前後関係のある内容を順番に読んでいくことが前提になるため、ページ単体のインパクトよりも、連続性や整合性の方が価値を持ちます。つまり、HTMLブックでは「ページの強さ」より「章のつながり」が重要になります。
さらに、通常のWebページではCTAや広告、複数の導線を同時に強く見せることがありますが、HTMLブックでは読むこと自体が中心体験になるため、導線の置き方も少し変わります。目次、前後ページリンク、章タイトル、現在位置の把握など、本としての移動支援が中心になります。つまり、HTMLブックは「どこを押してもよいサイト」ではなく、どう読み進めるかを自然に案内するページ群 として設計されるべきです。
1.2 HTMLブックが向いている用途
HTMLブックは、内容にある程度のまとまりがあり、順序立てて読んでもらうことで価値が高まる用途と非常に相性が良いです。たとえば、初学者向けの教材、チュートリアル、オンボーディング資料、製品マニュアル、社内手順書、小冊子、作品集、ブランドストーリーブックなどでは、単発の記事として分けるより、本形式にした方が理解しやすいことがあります。つまり、HTMLブックは「断片的に読む」より「まとまりとして読む」方が向いている情報に適しています。
また、PDFだとスマートフォンで読みにくくなりやすい内容でも、HTMLブックなら本文幅や文字サイズをレスポンシブに調整できるため、閲覧性を高めやすいです。さらに、リンクや目次、内部ジャンプも自然に使えるので、読むだけでなく「必要な場所へ移動する体験」も作りやすくなります。つまり、HTMLブックは、Webの柔軟さを持ちながら本のように読ませたい場面 に向いています。
1.3 HTMLブックの魅力
HTMLブックの魅力は、まずブラウザだけで読めることです。特別なビューアやアプリを用意しなくても、URLを共有するだけで読んでもらえるため、配布コストが低くなります。次に、更新のしやすさがあります。内容の修正、章の追加、画像差し替え、CSSによる見た目の改善なども行いやすく、完成後も育てやすい形式です。さらに、必要に応じて目次開閉やダークモード切り替えのような軽い機能追加もできるため、読書体験自体を少しずつ改善できます。つまり、HTMLブックは単に「作れる本」ではなく、運用しながら成長させられる本 でもあります。
一方で、自由に作れるからこそ、章立てや見出し構造が曖昧だと、一気に読みにくくなります。通常の短いWebページなら何とか読める構成でも、長文では負担が大きくなります。そのため、HTMLブックでは自由度に甘えず、読みやすさを優先した構造化を行うことが大切です。つまり、HTMLブックの魅力は自由さにありますが、その自由さを活かすには、本としての整理力 が必要になります。
2. HTMLブックを作る理由
HTMLブックを作る理由は、単に「HTMLで本っぽいものが作れるから」ではありません。実際には、情報を体系的に届けやすいこと、ブラウザで共有しやすいこと、更新しやすいこと、レスポンシブ対応しやすいことなど、実務的な利点がいくつもあります。つまり、HTMLブックは技術的な遊びではなく、情報提供の手段として十分に意味のある形式です。
また、情報を小分けの記事として並べるより、まとまりのあるコンテンツとして読ませた方が理解しやすいテーマも多くあります。入門教材、製品理解、手順説明のように、前提から順番に理解してほしい内容では、HTMLブック形式の方が相性が良いことが少なくありません。つまり、HTMLブックは「量が多いから作る」のではなく、順序立てて理解してほしいから作る と考えるべきです。
2.1 ブラウザだけで読める利便性が高い
HTMLブックはブラウザがあればそのまま読めるため、読む側のハードルが低いです。PDFをダウンロードして開く必要もなく、専用アプリをインストールする必要もなく、URLを開けばすぐに読めます。これは学習教材や社内資料を配布するときに非常に大きな利点です。特に「まず読んでほしい」コンテンツでは、閲覧開始までの摩擦が少ないほど有利になります。つまり、HTMLブックは 届きやすく、読み始めやすい形式 です。
また、章単位でURLを共有できるため、「まずこの章だけ読んでください」といった案内もしやすくなります。つまり、本全体だけでなく、内容の一部も使いやすい形で切り出せることがHTMLブックの便利さです。
2.2 更新や修正がしやすい
一度公開したあとでも、HTMLブックは比較的簡単に更新できます。誤字脱字の修正、図版の差し替え、章タイトルの調整、目次リンクの追加、説明文の更新なども、対応するファイルを修正すればよいだけです。PDFのように都度書き出し直す必要がなく、内容が変わりやすい分野でも運用しやすくなります。つまり、HTMLブックは 更新前提の知識コンテンツ と非常に相性が良いです。
特に技術資料や運用手順のように、情報が変化しやすいコンテンツではこの利点が大きくなります。つまり、HTMLブックは「完成して固定される本」より、「育て続ける本」としての価値が高い形式です。
2.3 レスポンシブ対応で読みやすさを高めやすい
HTMLブックはCSSで画面幅ごとの調整ができるため、スマートフォン、タブレット、PCといった異なる閲覧環境でも比較的読みやすいレイアウトを実現しやすいです。固定レイアウトの文書では、画面幅が狭いと拡大縮小が必要になったり、スクロールが増えたりして読みづらくなりがちですが、HTMLブックなら文字サイズや本文幅を環境に合わせて調整できます。つまり、HTMLブックは 読む環境に合わせて最適化しやすい本形式 です。
さらに、モバイル時には目次を畳んだり、コードブロックを横スクロール対応にしたりといった工夫も可能です。つまり、HTMLブックでは内容だけでなく、読書体験そのものを閲覧環境に応じて調整できます。
3. HTMLブック制作に必要な技術
HTMLブックを作るために必要な技術は、基本的にはHTML、CSS、JavaScriptです。フレームワークがなくても作れますし、最初の段階ではむしろ素朴な構成の方が理解しやすいです。ただし、普通のWebサイトを作るときと違って、「情報をどう読むか」を中心にこれらを使うことが重要になります。つまり、使う技術は同じでも、設計の焦点が少し違います。
また、HTMLブックではファイル構成や命名ルール、画像配置、目次と章タイトルの関係など、実装以前の整理も重要です。つまり、HTMLブック制作はコーディングだけで完結するものではなく、構造設計と表示設計の両方 を必要とします。
3.1 HTMLで章と節の構造を作る
HTMLは、HTMLブックの骨組みを作るための中心技術です。章タイトル、節見出し、本文、箇条書き、表、引用、コードブロック、ナビゲーションリンクなどを、意味に沿って配置していきます。ここで重要なのは、見た目が整っていることより、章や節の関係が明確であることです。つまり、HTMLは単なる表示用コードではなく、本の論理構造を明示するための言語 として使うべきです。
見出し階層をきちんと使っておけば、目次も作りやすくなり、章ごとの役割も読者に伝わりやすくなります。逆に、見た目だけで適当にタグを選ぶと、後から整理が難しくなります。つまり、HTMLブックでは特に、最初の構造化が後のすべてを楽にします。
3.2 CSSで読みやすい紙面を整える
CSSは、HTMLブックの読みやすさを形にする役割を持ちます。本文幅、行間、余白、見出しサイズ、目次ブロック、章カード、ナビゲーション配置、コードブロックの見た目などを整えることで、ただの長いHTMLが「本として読めるレイアウト」へ変わります。つまり、HTMLブックにおけるCSSは飾りではなく、読書体験を設計するための実装 です。
特に長文を読むことが前提になるため、通常のサイト以上に可読性が重要になります。派手な装飾よりも、安定感、余白、落ち着いたリズムを意識する方が相性が良いです。つまり、HTMLブックのCSSでは、見た目の強さより「静かに読みやすいこと」に価値があります。
3.3 JavaScriptで読書補助を加える
JavaScriptは必須ではありませんが、HTMLブックでは補助機能として非常に役立ちます。たとえば、目次の開閉、現在章のハイライト、前後ページ移動、テーマ切り替え、文字サイズ変更などは、JavaScriptを少し加えるだけでも実装できます。こうした機能は、内容の本質を変えるわけではありませんが、読む体験を少し快適にしてくれます。つまり、JavaScriptは HTMLブックの主役ではなく、読書補助のための仕上げ として使うのが自然です。
ただし、最初から複雑な機能を入れすぎる必要はありません。まずはHTMLとCSSだけで十分に読める状態を作り、そのあと必要に応じて補助機能を足す方が進めやすいです。つまり、HTMLブックでは、動きの多さよりも読みやすさの完成度を優先するべきです。
4. HTMLブックの全体構成をどう考えるか
HTMLブックを作るとき、最初にコードを書き始めるより前に、全体構成を考えることがとても重要です。どんな章があり、どんな順番で読み進めるのか、読者はどこから入るのか、目次はどう見せるのか、前後ページの移動は必要か、といった点を整理しておくと、後の実装が格段にやりやすくなります。つまり、HTMLブック制作では、コードを書く前に読みの設計を作ること が大切です。
また、章立てが曖昧なまま書き始めると、途中で内容が重複したり、前提が抜けたり、説明順が不自然になったりしやすくなります。HTMLブックは順番を持つコンテンツだからこそ、この問題が大きく出ます。つまり、構成設計は単なる準備ではなく、本の品質そのものを左右する工程です。
4.1 章立てを先に決める理由
章立てを先に決めておくと、全体の流れが見えやすくなります。たとえば、「HTMLブックとは何か」「必要な技術」「構成設計」「ファイル構成」「目次」「章ページ」「公開方法」といった順で並べれば、読者は前提から応用へ自然に進めます。これは制作者側にも利点があり、どの内容をどの章へ置くべきか判断しやすくなります。つまり、章立ては本の骨格であり、理解順を形にするための設計 です。
さらに、章立てが明確だと、どこでコード例を見せるか、どこで図版が必要か、どこで注意点をまとめるかも考えやすくなります。つまり、章立ては本文を書くためだけでなく、ページ実装の見通しを作るためにも役立ちます。
4.2 章ごとにファイルを分けるか一ページにまとめるか
HTMLブックには、章ごとに別HTMLファイルへ分ける方法と、一つの長いHTMLへまとめる方法があります。章分割型は、各章を独立したURLとして扱いやすく、前後リンクや目次導線も明確にしやすいです。一方、一ページ型はスクロールで一気に読み進めやすく、短い本なら非常に相性が良いです。つまり、どちらを選ぶかは技術の問題というより、どう読ませたいかの問題 です。
章数が多い、または各章がそれなりの長さになるなら分割型の方が扱いやすくなります。逆に短い小冊子やミニ教材なら一ページ型でも十分に成立します。つまり、内容量と読者の使い方を考えながら決めるべきです。
4.3 目次とナビゲーションを最初から考える
HTMLブックでは、目次と章間ナビゲーションは後付けではなく、本体の一部として考えるべきです。読者が順番に読むとは限らず、必要な章だけ探したい場合もあるからです。また、順番に読む人にとっても、読み終えたあとに次の章へスムーズに進めることは快適さに直結します。つまり、HTMLブックでは本文と同じくらい 移動のしやすさ が重要です。
そのため、最初から「目次ページはどう見せるか」「前後リンクは毎章に入れるか」「目次へ戻るリンクは必要か」まで考えておくと、後の修正が減ります。つまり、構成設計とは本文の順序だけでなく、読者の移動経路まで設計することです。
5. HTMLブックのファイル構成を決める
HTMLブックは、最初の段階でファイル構成を整理しておくと、その後の制作と保守がかなり楽になります。短いサンプルなら一つのHTMLだけでも作れますが、章が増えたり画像やコード例が多くなったりすると、整理されていない構成ではすぐに扱いづらくなります。つまり、HTMLブックでは本文の内容と同じくらい、ファイルの置き方そのものも重要な設計対象 です。
また、ファイル構成が整っていれば、あとから章を追加したり、CSSだけを調整したり、JavaScript機能を追加したりするときにも迷いにくくなります。つまり、最初に少し丁寧に整理しておくことが、後の自由度を高めます。
5.1 基本のディレクトリ例
HTMLブックの基本的な構成としては、HTMLファイル、CSS、JavaScript、画像を分けておくと分かりやすいです。章ごとにHTMLを分けるなら、目次ページと章ページを同階層に置き、スタイルとスクリプトは専用フォルダにまとめる形が使いやすいです。以下はその一例です。
html-book/
├─ index.html
├─ chapter1.html
├─ chapter2.html
├─ chapter3.html
├─ css/
│ └─ style.css
├─ js/
│ └─ script.js
└─ images/
├─ cover.jpg
├─ chapter1-diagram.png
└─ icon-toc.svg
このようにしておくと、どこに何があるかが明確になります。特に後から見返したときに、本文ファイルと装飾ファイルと画像素材が分かれていると、修正の入口が見つけやすくなります。つまり、ファイル構成は単なる整理癖ではなく、HTMLブックを長く扱いやすくするための土台 です。
5.2 命名ルールを揃える重要性
ファイル名やクラス名に一貫性がないと、章が増えるほど混乱しやすくなります。たとえば chapter1.html、chapter02.html、next-book.html のようにばらついた命名をすると、どれが何章なのか分かりづらくなります。最初から chapter1.html、chapter2.html、chapter3.html のように統一しておくと、順番も役割も把握しやすくなります。つまり、HTMLブックでは、論理順序がそのまま命名に表れる 形が扱いやすいです。
また、CSSクラス名も book-cover、toc-section、chapter-nav のように役割が分かる名前にしておくと、後からスタイルを調整しやすくなります。つまり、命名ルールは見た目の綺麗さのためではなく、後から読めるコードにするために重要です。
5.3 小規模でも分割を意識するべき理由
短いHTMLブックだからといって、全部を一つのファイルへ詰め込んでしまうと、少し大きくなっただけで扱いにくくなります。たとえ章数が少なくても、CSSとJavaScriptは分ける、画像は別フォルダに入れる、といった基本を守っておくと、あとからの修正が楽になります。つまり、小さい段階から整理された構造で作ることが、結果的に制作を速くします。
特にHTMLブックは、作っている途中で章を増やしたくなることが多いです。そのとき、最初から分割可能な形になっていれば、無理なく拡張できます。つまり、HTMLブックでは「今足りているか」だけでなく、「後から増やしやすいか」という視点を持つことが大切です。
6. HTMLブックの目次を作る方法
HTMLブックにおいて目次は、読者が全体構造を理解するための最初の入り口です。本の形式を取る以上、どんな章があり、どこから読めるのかが分かることは非常に重要です。順番に読む人にとっても、最初に全体像が見えると安心して読み始めやすくなりますし、必要な章だけを探したい人にとっても、目次は最短の入口になります。つまり、目次は補助ではなく、HTMLブックそのものの地図 です。
また、目次は単にリンクを並べるだけではなく、章タイトルが分かりやすいこと、階層が見やすいこと、見た瞬間に構造が把握できることが大切です。つまり、目次は情報量よりも整理の仕方が重要です。
6.1 目次ページを独立して作る考え方
HTMLブックでは、index.html を目次ページとして独立させる方法が非常に分かりやすいです。ここに本のタイトル、概要、章一覧、場合によっては対象読者や想定読了時間を置いておけば、読者はまずここで全体像を把握できます。特に章分割型のHTMLブックでは、最初に独立した目次ページがある方が構造が自然です。つまり、目次ページは単なるリンク集ではなく、表紙と案内板を兼ねたページ と考えると作りやすくなります。
また、目次ページに短い説明文を添えることで、「このHTMLブックは何のためのものか」が伝わりやすくなります。これは初めて訪れた読者にとって重要です。つまり、目次ページは章を並べるだけでなく、本のコンセプトを簡潔に示す場所でもあります。
6.2 目次HTMLの基本例
※ 以下のコード例は、HTMLブックの目次ページを作るための基本サンプルです。
ファイル名：index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTMLブック入門</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main class="book-home">
<header class="book-cover">
<p class="book-label">HTML Book</p>
<h1>HTMLブック入門</h1>
<p class="book-description">
HTML・CSS・JavaScriptを使って、ブラウザで読める本を作るための基本を学びます。
</p>
</header>
<section class="toc-section">
<h2>目次</h2>
<ol class="toc-list">
<li><a href="chapter1.html">第1章 HTMLブックの基本</a></li>
<li><a href="chapter2.html">第2章 構成設計と章分割</a></li>
<li><a href="chapter3.html">第3章 CSSで読みやすく整える</a></li>
</ol>
</section>
</main>
</body>
</html>
この目次ページでは、本のタイトル、説明、章一覧が整理されており、HTMLブックの入口として必要な要素が過不足なく入っています。余計な要素を増やさず、まず「何の本で、どこから読めるのか」が分かることを優先しています。つまり、目次ページの役割は豪華さではなく、読み始めるための安心感を作ること にあります。
6.3 目次を読みやすく整えるCSS
※ 以下のコード例は、目次ページの読みやすさを整えるためのサンプルです。
ファイル名：css/style.css の一部
body {
margin: 0;
font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
background: #f6f7fb;
color: #1f2937;
line-height: 1.8;
}
.book-home {
max-width: 860px;
margin: 0 auto;
padding: 40px 20px 80px;
}
.book-cover,
.toc-section {
background: #fff;
border-radius: 20px;
padding: 32px 24px;
margin-bottom: 24px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}
.book-label {
color: #2563eb;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.toc-list {
padding-left: 24px;
}
.toc-list li + li {
margin-top: 12px;
}
.toc-list a {
text-decoration: none;
color: #111827;
font-weight: 600;
}
このスタイルでは、表紙部分と目次部分を穏やかに分けることで、HTMLブックの冒頭らしい落ち着いた見た目を作っています。特に、HTMLブックは読書が中心なので、目次ページでも派手すぎる装飾より、整理された読みやすさの方が相性が良いです。つまり、目次のCSSでは、本の入り口としての静かな見やすさ を意識するとまとまりやすくなります。
7. 章ページの作り方
HTMLブックの章ページは、通常のWebページ以上に「本の中の一章であること」が分かる構造にする必要があります。章タイトル、導入文、節見出し、本文、章末ナビゲーションを揃えておくと、読者は今どの章を読んでいるのかを把握しやすくなります。つまり、章ページは単なる情報ページではなく、本全体の流れの中にある一単位 として作るべきです。
また、章ごとのレイアウトを揃えておくと、後から章を増やしても読み心地がぶれにくくなります。つまり、章ページは毎回別のデザインにするより、共通テンプレートとして作る方が、本としての一貫性が出ます。
7.1 章ページで最低限必要な要素
章ページには、少なくとも章番号、章タイトル、導入文、本文、前後ページナビゲーションを置いておくと使いやすいです。章番号とタイトルがあれば、読者は今どこを読んでいるのかが明確になりますし、導入文があるとその章の目的も把握しやすくなります。本文だけを置いてしまうと、読者は内容には入れても本全体の中での位置づけを感じにくくなります。つまり、章ページでは 本文の前に章の意味を見せること が重要です。
さらに、章末に目次へ戻るリンクと次の章へのリンクを置いておけば、読了後の移動も自然になります。つまり、章ページは入口と出口を持って初めて、本として機能しやすくなります。
7.2 章ページのHTML例
※ 以下のコード例は、基本的な章ページのサンプルです。
ファイル名：chapter1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>第1章 HTMLブックの基本</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main class="chapter-page">
<article class="chapter-article">
<header class="chapter-header">
<p class="chapter-number">Chapter 1</p>
<h1>HTMLブックの基本</h1>
<p class="chapter-lead">
HTMLブックとは何か、通常のWebページとどこが違うのかを整理します。
</p>
</header>
<section>
<h2>HTMLブックは読むための構造である</h2>
<p>
HTMLブックは、通常のページのように単発で情報を伝えるだけでなく、
複数の章を通じて理解を深めるための構成を持ちます。
</p>
</section>
<section>
<h2>章立てが重要になる理由</h2>
<p>
一つひとつの章に役割を持たせることで、読者は全体像をつかみながら読み進めやすくなります。
</p>
</section>
</article>
<nav class="chapter-nav">
<a href="index.html">目次へ戻る</a>
<a href="chapter2.html">次の章へ</a>
</nav>
</main>
</body>
</html>
この章ページは、章タイトルから本文へ入り、最後に次の行動が見えるという、HTMLブックとして非常に素直な構成です。本文量は少ないですが、「章らしさ」を作るために必要な要素は揃っています。つまり、HTMLブックの章ページでは、内容量よりも 章としてのまとまりが感じられること が大切です。
7.3 章ページのレイアウト例
ファイル名：css/style.css の一部
.chapter-page {
max-width: 860px;
margin: 0 auto;
padding: 40px 20px 80px;
}
.chapter-article {
background: #fff;
border-radius: 20px;
padding: 36px 28px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}
.chapter-number {
color: #2563eb;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.chapter-header {
margin-bottom: 32px;
}
.chapter-lead {
color: #4b5563;
}
.chapter-article h2 {
margin-top: 36px;
margin-bottom: 12px;
}
.chapter-nav {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 24px;
}
.chapter-nav a {
text-decoration: none;
color: #2563eb;
font-weight: 700;
}
このスタイルでは、本文カードとナビゲーションを分けているため、章ページの読み終わりが自然に見えます。特にナビゲーションを本文の延長ではなく独立した領域として見せることで、読み終えたあとに行動しやすくなります。つまり、章ページのCSSでは、本文可読性だけでなく、章を読み終えた後の動線の見つけやすさ まで考えることが大切です。
8. HTMLブックの本文を読みやすくするCSS設計
HTMLブックでは、本文の読みやすさが完成度を大きく左右します。一般的なWebページよりも長文になることが多いため、本文幅、行間、見出しの余白、段落の間隔、コードブロックの扱いなどを丁寧に整えないと、読者が途中で疲れやすくなります。つまり、HTMLブックのCSSでは、見た目の面白さより 長く読める静かな設計 の方がはるかに重要です。
また、本のような安定感を出すためには、画面いっぱいを使い切るより、読みの中心をある程度限定する方が相性が良いです。つまり、「Webらしい自由さ」をそのまま出すのではなく、「本らしい落ち着き」に寄せる方がHTMLブックには向いています。
8.1 本文幅を適切に制限する
本文幅が広すぎると、一行ごとの視線移動が長くなり、読書負荷が高まります。特に大きな画面で本文を横いっぱいに使うと、一見たくさん情報が見えても、実際には読みづらくなりがちです。HTMLブックでは、画面が広くても本文そのものは適度な幅で制限し、中央に読みの軸を作る方が自然です。つまり、本文幅の制御はデザインではなく、読むための最適化 です。
逆に狭すぎても改行が増えすぎて読みにくくなります。そのため、「狭ければ本っぽい」という単純な話ではなく、視線移動と文章のまとまりの両方が無理のない幅を探ることが大切です。つまり、本文幅は見た目の好みで決めるより、読書体験から逆算して決めるべきです。
8.2 行間と段落間を広めに取る
長文を読むとき、行間が狭いと文字が密集して見え、読む前から疲れやすくなります。そのため、HTMLブックでは通常のWebページよりやや広めの行間にした方が読みやすいことが多いです。また、段落と段落のあいだに適切な余白があると、話の区切りも見えやすくなり、内容理解が進みやすくなります。つまり、行間と段落間は、読みやすさを支える最も基本的な設定です。
ただし、広げすぎると今度は文章のつながりが弱く見えます。HTMLブックでは「余裕があること」は大切ですが、「散らばって見えないこと」も同じくらい大切です。つまり、読みやすいHTMLブックでは、詰まりすぎず、離れすぎない、ちょうどよい呼吸感 を作ることが求められます。
8.3 見出しと本文のメリハリをはっきり付ける
見出しが本文に埋もれてしまうと、章や節の流れが見えにくくなります。そのため、見出しは本文より少し大きく、余白も十分に取り、節の切り替わりが視覚的に分かるようにする必要があります。特にHTMLブックでは、見出しが現在地確認の役割も果たすため、この差は重要です。つまり、見出しは飾りではなく、読者に今どこを読んでいるかを示す道しるべ です。
一方で、見出しを過剰に装飾しすぎると、本全体の落ち着きが崩れることがあります。HTMLブックでは、強く見せるより、読みの流れの中で自然に目立つくらいの調整がちょうど良いです。つまり、見出しは派手である必要はなく、構造が見える程度に十分明確であること が大切です。
9. コード例をHTMLブックに入れる方法
技術系のHTMLブックやチュートリアル型コンテンツでは、コード例を入れることが多くなります。その場合、単にコードを貼るだけでは不十分で、「何のためのコードか」「どのファイルか」「どこを見るべきか」が分かるように見せる必要があります。つまり、コード例は本文の補足ではなく、理解のための中心要素の一つ として扱うべきです。
また、コード例は本文とは読み方が違います。文章のように流して読むのではなく、行を追いながら構造を確認するため、背景色、余白、フォント、横スクロール対応なども重要になります。つまり、HTMLブックではコード例を「別の読み方をする情報」として整える必要があります。
9.1 コード例の前に短い説明を置く
コード例をいきなり出すと、読者は「何を目的に見ればよいのか」が分かりにくくなります。そこで、「これは目次リンクの例です」「これは章末ナビゲーションの実装です」といった短い説明を置いてからコードへ入ると、理解しやすくなります。つまり、コードは単体ではなく、文脈付きで見せる方が学習しやすい のです。
特に長いコードほど、事前に見るポイントを示しておくことが大切です。全部を一度に理解しようとすると負担が大きいからです。つまり、コード例の前置きは余計な説明ではなく、読むためのガイドです。
9.2 ファイル名を明記する
HTMLブックのコード例では、ファイル名を付けておくことが非常に重要です。HTMLとCSSとJavaScriptが混ざった説明をする場合、ファイル名がないと、どのコードをどこへ置けばよいのかが分かりにくくなります。特に実装を再現したい読者にとっては、ファイル名が明記されているかどうかで理解のしやすさが大きく変わります。つまり、ファイル名は見出しの補足ではなく、コード例の一部 と考えるべきです。
9.2.1 コード例の基本形
※ 以下のコード例は、HTMLブック本文の中でコード例を見せるときの基本サンプルです。
ファイル名：chapter2.html の一部
<section>
<h2>目次リンクの書き方</h2>
<p>
章への移動リンクは、読者が迷わず必要な場所へ進めるようにするための重要な要素です。
</p>
<p>※ 以下のコード例は、目次リンクの基本的な書き方を示したサンプルです。</p>
<pre><code><ol class="toc-list">
<li><a href="chapter1.html">第1章 HTMLブックの基本</a></li>
<li><a href="chapter2.html">第2章 構成設計と章分割</a></li>
</ol>
</code></pre>
</section>
このように、短い導入説明とコード例をセットにしておくと、読者は「何を見るべきコードなのか」を意識したうえで読み進められます。つまり、コード例は単なる資料ではなく、本文の中で意味づけされた説明付きの情報 として置く方が親切です。
9.3 コードブロックのスタイルを整える
コードブロックは、本文とは異なる見た目にしておくと読みやすくなります。背景色を少し変える、等幅フォントにする、余白を取る、角丸を付ける、横スクロールを許可するといった調整だけでも、かなり見やすさが変わります。特にモバイルでは、長いコード行が崩れると読みにくくなるため、横スクロール対応は重要です。つまり、コードブロックのスタイルは見た目の問題ではなく、再現可能な状態で読ませるための設計 です。
ファイル名：css/style.css の一部
pre {
background: #111827;
color: #f9fafb;
padding: 20px;
border-radius: 14px;
overflow-x: auto;
line-height: 1.7;
}
code {
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.95rem;
}
このスタイルだけでも、コード例が本文から適度に分離され、読みやすくなります。つまり、技術系HTMLブックでは、コードを載せるなら、コード専用の見せ方 をきちんと整えるべきです。
10. 章間ナビゲーションを実装する
HTMLブックでは、目次だけでなく、前の章・次の章へ移動するナビゲーションも重要です。読者が順番に読み進める場合、毎回目次へ戻らずに進めた方が快適だからです。これは紙の本でページをめくる感覚に近く、デジタルでも読書体験を支える大切な要素です。つまり、章間ナビゲーションは単なるリンクではなく、HTMLブックにおけるページめくりの代替 です。
また、すべての章で同じ位置、同じ見せ方でナビゲーションを置いておくと、読者は迷わず使いやすくなります。つまり、ナビゲーションでは機能そのもの以上に、一貫性が重要です。
10.1 前後ページリンクの基本
章末に「前の章」「目次へ戻る」「次の章へ」という三つの導線を揃えておくと、非常に分かりやすくなります。順番に読む人はそのまま次へ進めますし、途中で全体構成を見直したい人は目次へ戻れます。また、前の章に戻りたいときにもすぐ使えます。つまり、三つの選択肢があるだけで、HTMLブックの移動体験はかなり整います。
10.2 ナビゲーションHTML例
※ 以下のコード例は、章末ナビゲーションの基本サンプルです。
ファイル名：chapter2.html の一部
<nav class="chapter-nav">
<a href="chapter1.html">前の章へ</a>
<a href="index.html">目次へ戻る</a>
<a href="chapter3.html">次の章へ</a>
</nav>
この構成は非常にシンプルですが、HTMLブックではむしろこのくらい分かりやすい方が使いやすいです。重要なのは、各章で形式を揃えることです。つまり、ナビゲーションでは複雑さより、どこに何があるかが毎回分かること が大切です。
10.3 ナビゲーションCSS例
ファイル名：css/style.css の一部
.chapter-nav {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
}
.chapter-nav a {
text-decoration: none;
color: #2563eb;
font-weight: 700;
}
このスタイルでは、本文との区切りを作りながら、章移動リンクが自然に目に入るようにしています。過度にボタン化せず、穏やかなリンクとして見せることで、本の流れを壊しにくくしています。つまり、HTMLブックのナビゲーションは派手なUIにするより、本文を読み終えたあとに静かに使えること が重要です。
11. 一ページ型HTMLブックを作る方法
HTMLブックは章ごとにページを分ける方法だけでなく、一つの長いページにまとめる方法もあります。この形式は、短い教材、小冊子、イベント冊子、ガイドページのように、全体をスクロールしながら読む方が自然な内容で特に使いやすいです。つまり、一ページ型HTMLブックは、短めの本を連続スクロールで読ませたい場合 に向いています。
ただし、長くなりすぎると移動が大変になり、章間の区切りも弱くなりやすいため、どの程度の長さまで一ページ型にするかは考える必要があります。つまり、一ページ型は便利ですが、ボリュームとの相性を見て使い分けるべきです。
11.1 どんなときに一ページ型が向いているか
一ページ型は、章数が少ない、または一気に読み切ってほしいコンテンツに向いています。たとえば、短い入門ガイド、イベント案内冊子、ブランドストーリー、簡易マニュアルのような内容では、一ページ型の方が構造を把握しやすいこともあります。目次から各章へページ内ジャンプできるようにしておけば、必要な箇所へも移動しやすくなります。つまり、一ページ型は、読書の流れをスクロールに乗せやすい内容 と相性が良いです。
11.2 一ページ型のHTML例
※ 以下のコード例は、一ページ型HTMLブックの基本サンプルです。
ファイル名：index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>一ページ型HTMLブック</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main class="single-book">
<header class="book-cover">
<h1>一ページ型HTMLブック</h1>
<p>短い教材やガイドを一つのページで読みやすくまとめる構成です。</p>
</header>
<nav class="page-toc">
<h2>目次</h2>
<ol>
<li><a href="#chapter1">第1章 はじめに</a></li>
<li><a href="#chapter2">第2章 基本構造</a></li>
<li><a href="#chapter3">第3章 レイアウト</a></li>
</ol>
</nav>
<section id="chapter1">
<h2>第1章 はじめに</h2>
<p>この章では、一ページ型HTMLブックの考え方を紹介します。</p>
</section>
<section id="chapter2">
<h2>第2章 基本構造</h2>
<p>見出しと本文の関係を整理しながら、読みやすい構造を作ります。</p>
</section>
<section id="chapter3">
<h2>第3章 レイアウト</h2>
<p>本文幅や余白を整え、スクロールしながら読みやすい形へ整えます。</p>
</section>
</main>
</body>
</html>
この構成であれば、目次から各章へ飛びながら、一つの流れで最後まで読み進めることもできます。短い内容を一冊にまとめるには非常に扱いやすいです。つまり、一ページ型は、HTMLブックの考え方を小さく実装するうえでも良い練習になります。
12. HTMLブックにレスポンシブ対応を入れる
HTMLブックはブラウザで読む前提なので、スマートフォンやタブレットでも無理なく読めることが重要です。PCで美しく見えていても、モバイルで文字が小さすぎたり、コードブロックが崩れたり、目次が邪魔になったりすると、読書体験は大きく損なわれます。つまり、HTMLブックはレスポンシブ対応まで整って初めて、どの環境でも読める本 と言えます。
また、HTMLブックは通常のWebページ以上に長く読むことが多いため、少しの読みにくさでも疲労が蓄積しやすいです。つまり、レスポンシブ対応では「表示できる」ことより「長く読める」ことを重視すべきです。
12.1 モバイルでは本文優先にする
スマートフォンでは画面幅が狭いため、複雑なサイド領域や大きな目次は読書の邪魔になりやすいです。そのため、モバイルでは本文を最優先にし、目次は折りたたむ、ナビゲーションは縦に並べる、余計な装飾は減らすといった調整が有効です。つまり、レスポンシブ対応とは要素を縮めることではなく、読むために必要な順番へ再配置すること です。
12.2 フォントサイズと余白を調整する
PC向けに作った余白や文字サイズは、そのままではスマートフォンで不自然になることがあります。本文の余白が広すぎれば画面を圧迫しますし、狭すぎれば詰まって見えます。タイトルも大きすぎればスクロール量が増え、小さすぎれば読みにくくなります。つまり、モバイルでは本文、見出し、ナビゲーション、コードブロックの寸法を改めて調整する必要があります。
ファイル名：css/style.css の一部
@media (max-width: 768px) {
.book-home,
.chapter-page,
.single-book {
padding: 24px 16px 56px;
}
.chapter-article,
.book-cover,
.toc-section {
padding: 24px 18px;
}
.chapter-nav {
flex-direction: column;
align-items: flex-start;
}
pre {
font-size: 0.88rem;
}
}
このように調整することで、スマートフォンでも余白が詰まりすぎず、ナビゲーションも押しやすくなります。つまり、レスポンシブ対応では、画面幅に合わせて読みの寸法を再設計することが重要です。
12.3 コードブロックの横スクロール対応
技術系HTMLブックでは、コードブロックがモバイルで崩れやすいです。長いコード行を無理に折り返すと読みにくくなるため、横スクロールを許可した方が自然なことが多いです。これはPCではあまり気にならなくても、スマートフォンではかなり重要です。つまり、コードブロックは「PCで見えれば良い」ではなく、モバイルでも内容を崩さず読めること が必要です。
13. HTMLブックに簡単なJavaScript機能を追加する
HTMLブックはHTMLとCSSだけでも十分に成立しますが、少しだけJavaScriptを加えると、読書体験を補助する便利な機能を付けられます。ここで大切なのは、派手な演出を入れることではなく、読むことを助ける小さな機能に絞ることです。つまり、HTMLブックのJavaScriptは、本を壊さずに使いやすくするための補助 と考えるのが自然です。
13.1 目次開閉の実装例
長い目次はモバイルで邪魔になりやすいため、開閉できるようにしておくと便利です。以下は基本例です。
ファイル名：index.html の一部
<button class="toc-toggle">目次を開く / 閉じる</button>
<nav class="toc-panel">
<ol>
<li><a href="chapter1.html">第1章 HTMLブックの基本</a></li>
<li><a href="chapter2.html">第2章 構成設計と章分割</a></li>
<li><a href="chapter3.html">第3章 CSSで読みやすく整える</a></li>
</ol>
</nav>
ファイル名：js/script.js
document.addEventListener("DOMContentLoaded", () => {
const toggleButton = document.querySelector(".toc-toggle");
const tocPanel = document.querySelector(".toc-panel");
if (toggleButton && tocPanel) {
toggleButton.addEventListener("click", () => {
tocPanel.classList.toggle("is-open");
});
}
});
ファイル名：css/style.css の一部
.toc-panel {
display: none;
}
.toc-panel.is-open {
display: block;
}
このくらいの小さな機能でも、モバイル時の使いやすさは大きく変わります。つまり、JavaScriptは長く書く必要はなく、読書の邪魔になる部分を少し補助するだけでも十分に価値があります。
13.2 ダークモード切り替えの例
読者によっては、夜間や長時間閲覧でダークモードの方が読みやすいことがあります。HTMLブックでも簡単な切り替えを実装できます。
ファイル名：index.html の一部
<button class="theme-toggle">テーマ切り替え</button>
ファイル名：js/script.js の一部
document.addEventListener("DOMContentLoaded", () => {
const themeButton = document.querySelector(".theme-toggle");
if (themeButton) {
themeButton.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
});
}
});
ファイル名：css/style.css の一部
body.dark-mode {
background: #111827;
color: #f9fafb;
}
body.dark-mode .chapter-article,
body.dark-mode .book-cover,
body.dark-mode .toc-section {
background: #1f2937;
color: #f9fafb;
}
このようにすると、読書環境に応じた体験も少し整えられます。つまり、HTMLブックは静的でありながら、必要な範囲で柔軟に快適さを足せる形式です。
14. HTMLブックを公開する方法
HTMLブックはローカルで作って終わりではなく、ブラウザで読める状態に公開してこそ活きます。といっても、特別な複雑構成は必要なく、基本的には静的ファイルを配信できる環境であれば十分です。つまり、HTMLブックは 公開までのハードルが比較的低い本形式 でもあります。
また、公開すると実際のスマートフォンやタブレットで見え方を確認できるため、ローカルだけでは気づきにくい問題も見つけやすくなります。つまり、公開は完成のためだけでなく、改善のための確認工程でもあります。
14.1 静的ファイルとして公開しやすい
HTMLブックはHTML・CSS・JavaScript・画像で構成されるため、静的ホスティングと非常に相性が良いです。サーバー側で複雑な処理を必要としないため、小規模な公開環境でも扱いやすく、運用もしやすいです。つまり、HTMLブックは普通の静的Webサイトとほぼ同じ感覚で公開できます。
14.2 公開後に確認すべきポイント
公開したら、まず目次リンク、章間ナビゲーション、画像パス、CSS読み込み、JavaScript動作を確認する必要があります。特にHTMLブックは複数ファイルをまたいで移動することが多いため、一つでもリンクが崩れると読書体験が大きく損なわれます。また、モバイルで本文幅やコードブロックが問題ないかも重要です。つまり、公開後は本文だけではなく、本としての導線全体が成立しているか を確認すべきです。
14.3 公開後に改善しやすい点
HTMLブックは公開後に、目次を整理し直したり、CSSを少し改善したり、章を追加したりしやすいです。これはPDFよりもかなり大きな利点です。つまり、HTMLブックは完成して終わりではなく、公開後に育てられる本 と考えると扱いやすくなります。
15. サンプルHTMLブックの全体構成と必要ファイル
ここからは、実際に動かせるサンプルHTMLブックの完全な構成をまとめて示します。短いコード断片ではなく、「目次ページ」「各章ページ」「共通CSS」「共通JavaScript」まで含めて全文掲載します。つまり、このセクションだけでも、HTMLブックのミニマム構成をそのまま再現できるようにしてあります。
このサンプルは学習用なので、章数を3つに絞り、見た目も比較的シンプルにしています。ただし、目次、章ページ、前後リンク、コードブロック、目次開閉、ダークモード切り替えまで入っているため、HTMLブックとして必要な基本要素はかなり揃っています。つまり、このサンプルは小規模ですが、HTMLブックとして成立する最小単位 を意識して作っています。
15.1 サンプルで必要なファイル一覧
このサンプルHTMLブックでは、以下のファイルを使います。
html-book-sample/
├─ index.html
├─ chapter1.html
├─ chapter2.html
├─ chapter3.html
├─ css/
│ └─ style.css
└─ js/
└─ script.js
この構成であれば、目次から各章へ移動でき、各章から前後ページや目次へ戻れます。さらに、目次開閉とダークモード切り替えも使えます。つまり、サンプルとしては十分に「本らしい挙動」を確認できます。
15.2 このサンプルで確認できること
このサンプルでは、HTMLブックを作るうえで最低限押さえたい要素が確認できます。具体的には、目次ページの作り方、章ページの基本構造、章間ナビゲーション、共通CSSによる一貫した紙面設計、コード例の見せ方、JavaScriptによる小さな読書補助機能などです。つまり、部分的な練習ではなく、一冊の小さなHTMLブックがどう成立するか を通して理解できます。
16. サンプルHTMLブックの全ファイル全文
以下に、サンプルHTMLブックを構成する必要ファイルをすべて掲載します。学習用サンプルなので、そのまま保存して動作確認したあと、自分用の内容へ書き換えながら構造を理解していくのがおすすめです。なお、コード例であることが分かるように、本文中の一部コードは説明用サンプルとして記載しています。
16.1 index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTMLブック入門</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main class="book-home">
<header class="book-cover">
<p class="book-label">HTML Book</p>
<h1>HTMLブック入門</h1>
<p class="book-description">
HTML・CSS・JavaScriptを使って、ブラウザで読める本を作るための基本を学びます。
</p>
<div class="book-actions">
<button class="toc-toggle">目次を開く / 閉じる</button>
<button class="theme-toggle">テーマ切り替え</button>
</div>
</header>
<section class="toc-section">
<h2>目次</h2>
<nav class="toc-panel is-open">
<ol class="toc-list">
<li><a href="chapter1.html">第1章 HTMLブックの基本</a></li>
<li><a href="chapter2.html">第2章 構成設計と章分割</a></li>
<li><a href="chapter3.html">第3章 CSSで読みやすく整える</a></li>
</ol>
</nav>
</section>
</main>
<script src="js/script.js"></script>
</body>
</html>
16.2 chapter1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>第1章 HTMLブックの基本</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main class="chapter-page">
<article class="chapter-article">
<header class="chapter-header">
<p class="chapter-number">Chapter 1</p>
<h1>HTMLブックの基本</h1>
<p class="chapter-lead">
HTMLブックとは何か、通常のWebページとどこが違うのかを整理します。
</p>
</header>
<section>
<h2>HTMLブックは読むための構造である</h2>
<p>
HTMLブックは、単発のWebページのように一つの情報だけを見せるのではなく、
複数の章を通じて読者の理解を積み上げていく構造を持ちます。
</p>
<p>
そのため、章順や見出し構造、目次、前後ページ移動など、
本としての流れを支える要素が重要になります。
</p>
</section>
<section>
<h2>通常のWebページとの違い</h2>
<p>
一般的なWebページでは、検索流入やCTAを意識して一ページ単位で完結させることが多いですが、
HTMLブックでは全体を通した流れを重視することが多くなります。
</p>
</section>
<section>
<h2>本として成立させるための要素</h2>
<p>
目次、章タイトル、本文可読性、前後ページナビゲーション、
そして読者が今どこを読んでいるのか分かる構成が重要です。
</p>
</section>
</article>
<nav class="chapter-nav">
<a href="index.html">目次へ戻る</a>
<a href="chapter2.html">次の章へ</a>
</nav>
</main>
<script src="js/script.js"></script>
</body>
</html>
16.3 chapter2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>第2章 構成設計と章分割</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main class="chapter-page">
<article class="chapter-article">
<header class="chapter-header">
<p class="chapter-number">Chapter 2</p>
<h1>構成設計と章分割</h1>
<p class="chapter-lead">
HTMLブックを読みやすくするために、章立てとファイル分割をどう考えるかを整理します。
</p>
</header>
<section>
<h2>章立てを先に考える</h2>
<p>
先に章立てを整理しておくと、全体の論理の流れが見えやすくなり、
各章の役割も決めやすくなります。
</p>
</section>
<section>
<h2>ファイル構成を揃える</h2>
<p>
HTMLブックでは、目次ページ、各章ページ、共通CSS、共通JavaScriptを整理しておくと、
後から修正しやすくなります。
</p>
</section>
<section>
<h2>コード例の入れ方</h2>
<p>
コードを載せるときは、何のための例なのかを短く説明してから見せると理解しやすくなります。
</p>
<p>※ 以下のコード例は、目次リンクの基本的な書き方を示したサンプルです。</p>
<pre><code><ol class="toc-list">
<li><a href="chapter1.html">第1章 HTMLブックの基本</a></li>
<li><a href="chapter2.html">第2章 構成設計と章分割</a></li>
<li><a href="chapter3.html">第3章 CSSで読みやすく整える</a></li>
</ol>
</code></pre>
</section>
</article>
<nav class="chapter-nav">
<a href="chapter1.html">前の章へ</a>
<a href="index.html">目次へ戻る</a>
<a href="chapter3.html">次の章へ</a>
</nav>
</main>
<script src="js/script.js"></script>
</body>
</html>
16.4 chapter3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>第3章 CSSで読みやすく整える</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<main class="chapter-page">
<article class="chapter-article">
<header class="chapter-header">
<p class="chapter-number">Chapter 3</p>
<h1>CSSで読みやすく整える</h1>
<p class="chapter-lead">
本文幅、行間、余白、コードブロックなど、HTMLブックの読みやすさを支える基本CSSを確認します。
</p>
</header>
<section>
<h2>本文幅を適切に保つ</h2>
<p>
本文を横いっぱいに広げすぎると視線移動が長くなり、読みにくくなります。
そのため、最大幅をある程度制御することが重要です。
</p>
</section>
<section>
<h2>コードブロックを見やすくする</h2>
<p>
コードブロックは本文と別領域だと分かる見せ方にすると、
読者が文章とコードを切り分けて理解しやすくなります。
</p>
<p>※ 以下のコード例は、コードブロック用のCSSサンプルです。</p>
<pre><code>pre {
background: #111827;
color: #f9fafb;
padding: 20px;
border-radius: 14px;
overflow-x: auto;
}
</code></pre>
</section>
<section>
<h2>レスポンシブ対応も含めて完成させる</h2>
<p>
HTMLブックはスマートフォンでも読まれるため、
余白や文字サイズを画面幅に応じて調整することが重要です。
</p>
</section>
</article>
<nav class="chapter-nav">
<a href="chapter2.html">前の章へ</a>
<a href="index.html">目次へ戻る</a>
</nav>
</main>
<script src="js/script.js"></script>
</body>
</html>
16.5 css/style.css
body {
margin: 0;
font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
background: #f6f7fb;
color: #1f2937;
line-height: 1.8;
}
.book-home,
.chapter-page,
.single-book {
max-width: 860px;
margin: 0 auto;
padding: 40px 20px 80px;
}
.book-cover,
.toc-section,
.chapter-article {
background: #ffffff;
border-radius: 20px;
padding: 32px 24px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}
.toc-section,
.chapter-article {
margin-top: 24px;
}
.book-label,
.chapter-number {
color: #2563eb;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.book-description,
.chapter-lead {
color: #4b5563;
}
.book-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 20px;
}
button {
border: none;
background: #2563eb;
color: #ffffff;
padding: 10px 16px;
border-radius: 999px;
font-weight: 700;
cursor: pointer;
}
.toc-list {
padding-left: 24px;
}
.toc-list li + li {
margin-top: 12px;
}
.toc-list a,
.chapter-nav a {
text-decoration: none;
color: #111827;
font-weight: 600;
}
.chapter-header {
margin-bottom: 32px;
}
.chapter-article h2 {
margin-top: 36px;
margin-bottom: 12px;
line-height: 1.5;
}
.chapter-article p {
margin: 0 0 18px;
}
pre {
background: #111827;
color: #f9fafb;
padding: 20px;
border-radius: 14px;
overflow-x: auto;
line-height: 1.7;
}
code {
font-family: "SFMono-Regular", Consolas, monospace;
font-size: 0.95rem;
}
.chapter-nav {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
}
.toc-panel {
display: none;
}
.toc-panel.is-open {
display: block;
}
body.dark-mode {
background: #111827;
color: #f9fafb;
}
body.dark-mode .book-cover,
body.dark-mode .toc-section,
body.dark-mode .chapter-article {
background: #1f2937;
color: #f9fafb;
}
body.dark-mode .book-description,
body.dark-mode .chapter-lead {
color: #d1d5db;
}
body.dark-mode .toc-list a,
body.dark-mode .chapter-nav a {
color: #f9fafb;
}
@media (max-width: 768px) {
.book-home,
.chapter-page,
.single-book {
padding: 24px 16px 56px;
}
.book-cover,
.toc-section,
.chapter-article {
padding: 24px 18px;
}
.chapter-nav {
flex-direction: column;
align-items: flex-start;
}
pre {
font-size: 0.88rem;
}
}
16.6 js/script.js
document.addEventListener("DOMContentLoaded", () => {
const toggleButton = document.querySelector(".toc-toggle");
const tocPanel = document.querySelector(".toc-panel");
const themeButton = document.querySelector(".theme-toggle");
if (toggleButton && tocPanel) {
toggleButton.addEventListener("click", () => {
tocPanel.classList.toggle("is-open");
});
}
if (themeButton) {
themeButton.addEventListener("click", () => {
document.body.classList.toggle("dark-mode");
});
}
});
このサンプル一式を保存すれば、目次ページから各章へ進める小さなHTMLブックとして動作確認できます。もちろん実際に使うときは、章数を増やしたり、目次をより詳しくしたり、図版やコード例を追加したりすることで、より本らしい形へ発展させていけます。つまり、この完全サンプルは終点ではなく、自分のHTMLブックを作るための出発点 として使うのがちょうど良いです。
おわりに
HTMLブックは、HTML・CSS・JavaScriptという基本的なWeb技術だけで作れるにもかかわらず、書籍のような連続した読書体験を設計できる非常に面白い形式です。通常のWebページと違い、章立て、目次、章間移動、本文可読性、コード例の見せ方など、「読むこと」を中心に全体を組み立てる必要があります。そのぶん、ただの長いページでは出せない、まとまりのある知識体験を作りやすくなります。つまり、HTMLブックは Web技術で設計する本の体験 だと言えます。
また、HTMLブックは教材、マニュアル、小冊子、チュートリアル、社内資料など、実務でも非常に使いやすい形式です。ブラウザだけで読めて、URLで共有できて、更新も柔軟に行えるため、完成して終わるより、公開後も育て続けるコンテンツに向いています。ただし、その自由さに任せて構造を曖昧にしてしまうと、単なる長いWebページに見えてしまいます。だからこそ、構成設計、目次、章ページ、本文スタイル、ナビゲーションを丁寧に整えることが大切です。
最終的に重要なのは、「HTMLで本を作る」のではなく、「ブラウザで読みやすい本を設計する」という視点を持つことです。内容をただ並べるのではなく、どう始まり、どう進み、どう終わるかまで含めて設計できたとき、HTMLブックは単なるサイトではなく、本として機能し始めます。今回の完全サンプルをたたき台にしながら、まずは小さな3章構成のHTMLブックを一つ作ってみると、HTMLブック制作の考え方がかなりつかみやすくなります。
