Kindle原稿に枠線（囲み）を入れる方法｜HTML＋CSSで重要ポイントを囲む装飾

2026年3月6日 2026年4月4日

booklabstudio

Kindle本を作っていると、「重要ポイントを枠で囲って目立たせたい」と思うことがありますよね。

Wordで囲み枠（罫線）を付ける方法もありますが、EPUB化すると

・枠が消える
・余白が崩れる
・思った見た目にならない

といったことが起きる場合があります。

そんなときに確実なのが、EPUBのHTMLとCSSを直接編集して枠囲みを作る方法です。

今回は、無料ツールの Sigil を使って、Kindle用EPUBに「枠囲み風の装飾」を入れる手順を解説します。

Sigilで枠囲み装飾を入れる基本の考え方

やることはシンプルです。

1．本文の該当箇所をdivタグで囲む
2．CSSで「枠線」「余白」「上下の間隔」を指定する

これだけです。

Sigilで該当箇所のHTMLを開いて、枠で囲みたい部分を次のように記述します。

<div class="border-box">
ここは重要ポイントです。
</div>

次にCSSファイル（例：book-style.css）を開いて、以下のCSSを追加します。

.border-box{
border: 1px solid #000;
padding: 0.8em;
margin: 1em 0;
}

これで、枠囲みが入りました。

Kindle Previewerで表示を確認しておきましょう。

Wordで囲み枠を付けても反映されることはありますが、確実性で言えばSigilでHTML＋CSSを編集する方法が安定します。

囲み枠があるだけで、読者に「ここ、大事なんだな」が伝わりやすくなります。

Kindleの読みやすさアップに、ぜひ使ってみてください。