読者です 読者をやめる 読者になる 読者になる

本好きに送る「電子書籍のつくり方」講座

誰でも 簡単 手作り 電子書籍

電子書籍づくりはhtmlファイルづくり

今回から実際に電子書籍のデータ(htmlファイル)をつくってみます。

まずは

  • どうつくるか
  • つくったものがどう見えるか

を実際に作業を通じて体験することに主眼を置きます。そのため技術的な解説は可能な限り解りやすく、かつ最低限にとどめたいと思います。

ちなみに今回お伝えする内容はウェブ制作の基礎知識とも重複する内容ですので、そちらにも興味がある方はその視点からも併せて学んでいただけるとお得かもです。

まずは“入れ物”をつくってみる

それでは作業開始です。

まずはテキストエディタEmEditor等)を立ち上げ、新規の書類を開きます。

開いたら下記の文字を「コピー」してテキストエディタに「貼付け」(コピペ*1)します。

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html>

<html

 xmlns="http://www.w3.org/1999/xhtml"

 xmlns:epub="http://www.idpf.org/2007/ops"

 xml:lang="ja"

 class="hltr"

>

<head>

<meta charset="UTF-8"/>

<title>作品名</title>

<link rel="stylesheet" type="text/css" href="../style/book-style.css"/>

</head>

<body class="p-text">

<div class="main">

 

 

 

</div>

</body>

</html>

 

このようになると思います。

中身が空のHTMLファイル

これを保存します。
EmEditorのメニューバー「ファイル」から「名前を付けて保存」をクリックします。

そうすると下のようなウィンドウが出て来ますので、ファイル名をtest.html、エンコードUTF-8 BOM無しを選択して保存します。

中身が空のHTMLファイルの保存手順

保存すると下のようなアイコンが新たに作られます。

保存したHTMLのアイコン

アイコンの絵柄が上のものと違っていても気にする必要はありませんので、そのアイコンを「右クリック」→メニューから「プログラムから開く」を選択→「Google Chrome」をクリック。

HTMLファイルの開き方

Chromeが立ち上がり、何も表示されない空っぽのウィンドウが開きます。

このファイルは“入れ物”で、今は何も入っていない空き箱のような状態だと考えて下さい。

“入れ物”に“中身”を入れていく

ではさっき「 test.html 」にわざわざ書き込んだ(コピペした)文字は何なのか?

これは「このファイルはHTMLのファイルですよー」と“定義している文章”です。お約束として記述を義務づけられたものなので、この文字に「どのような意味があるのか?」を考える必要はありません(少なくとも現時点では)。「HTMLのファイルにはこんな記述をするのがお約束なんだなー」くらいに理解しておけばOKです。

では次に“空っぽの入れ物”に“中身”入れ、ブラウザで表示させてみましょう。

test.htmlを右クリック。「プログラムから開く」→「EmEditor」をクリック。

先ほどコピペした“定義している文章”の

<div class="main">

</div>

の間に下記の文字を追加します。

<p>この文字を表示させます。</p>

 このようになると思います。

中身が空だったHTMLファイルに表示させる文字を追加

文字を追加できたらファイルに名前をつけて保存します。

EmEditorのメニューバー「ファイル」から「名前を付けて保存」をクリックします。そして、ファイル名を「p.html」、エンコードを「UTF-8 BOM無し」として保存します。

次に保存した「p.html」を右クリックして「プログラムから開く」を選択→「Google Chrome」をクリックします。

空のHTMLファイルに追加した文字をブラウザで表示

Google Chrome(ウェブブラウザ)上に、文字が表示されました!

タグで挟むのが基本

先ほど「ブラウザ上で表示させたい文字」を追加する際、前後に記号が付いていたことにお気づきかと思います。これはタグと呼ばれるもので、HTMLでは表示させたいもの(要素の内容)の前後を「<」と「>」で囲まれた英数字(タグ)で挟むのが基本です。

要素を挟む「前」のタグを開始タグ、「後ろ」のタグを終了タグと呼びます。

先ほどの例であれば

開始タグが <p>

終了タグが </p>

となります。

一部例外(終了タグがないもの)もありますが、それはおいおい覚えるとして、基本的には、表示したいもの(要素の内容)を、開始タグ(<と>にはさまれた英数字)と終了タグ(開始タグの英数字の前に/を追加したもの)で挟む、と覚えてください。

HTMLのタグの付けのルール

ちなみに今回使用したタグ「p」は、段落 Paragraph の略で、<p>~</p> でひとつの段落を示します。一般的な文章で「本文のひと段落」を表し、電子書籍づくりで最も多く使うタグになります。

タグには他にもいろいろな種類のものがありますが、電子書籍はそれほど多種類のタグを使わなくてもつくることが可能です。

htmlファイルの構造

最後に「入れ物」である「htmlファイル」の構造について簡単に説明します。今回作成した「p.html」をエディタで開いていただき、その内容と下の画像を比べ、全体の構造ルールを押さえておきましょう。

 

htmlファイルの構造

 

今回作成した「p.xhtml」における「宣言文」にあたる部分は

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>

になります。

また、それぞれの要素内にある「タグ」の意味については、いわゆる「ホームページ制作初心者入門サイト」で情報を積み増しすることをお薦めします。htmlについての理解が深いほど、楽しく電子書籍を作ることができます。

「ホームページ 入門」などのキーワードでGoogle検索すると、いろんなウェブサイトが表示されると思います。

ホームページ入門
http://www.tohoho-web.com/wwwbeg.htm

やさしいホームページ入門:HTML入門
http://www.ink.or.jp/~bigblock/html/index.html

色々なウェブサイトがあるので、ご自分で「理解しやすい」と感じるサイトを選んでみてください。

今日のまとめ

HTMLファイルをつくる手順

  • テキストエディタの新規書類に「これはhtmlのファイルである」と定義する文字を書き込む(“入れ物”を作る)。
  • “入れ物”ができたら、それに表示させたい要素を書き込む。その前後には「タグ」と呼ばれる記号をつける。
  • 作ったHTMLファイルをウェブブラウザで表示してみる。

次回は
タグ付け作業の効率化(コピペ)についてお話します。

*1:Copy and Paste(コピーアンドペーストの略)