やってみようHTML自作資料

PDFとHTML、ときどきCSS

上野敬太

2015年11月6日

 内容は2015年11月初旬に更新しました。
UDブラウザ用の資料作成について何かありましたら、後述のサンプルのHTMLファイルに連絡先を載せてありますので、そちらからメールを送っていただけたら幸いです。迷惑メールの都合もあり、回りくどい方法となりますが、ご了承くださいい。

1 はじめに

 UDブラウザでは、PDFとHTMLの2つのファイルを読み込み、紙のレイアウトとリフロー(折り返し)レイアウトの2種類を表示できます。PDFは近年普及が進み、スキャナを購入したときに付属するソフトやMicrosoft社のWordやJustSystem社の一太郎といったワープロソフト、仮想プリンタソフトなどから手軽に作成できるようになりました。
 HTMLはウェブページに使われるプログラム言語の一つですが、実際にはホームページ作成ソフトのような専門ソフトが無くても、Windowsで標準搭載されているメモ帳のようなテキストエディタで作成できる他、先述のワープロソフトからでも作成ができます。また、HTMLはCSSというHTMLを修飾するデータを利用可能で、HTMLの中だけで行おうとすると大変な作業を簡略化することもできます。
 本資料はPDFの作り方、HTMLの書き方、CSSの書き方を簡単に説明し、視覚障がいを持つ人に提示する資料作りのヒントとしたいと考えています。なお、筆者自身がロービジョンの教員ですので、私見も入っていると思います。


2 PDFの作り方

 「PDFってAdobe社のAcrobatなどの専用ソフトが必要でしょ?」と聞かれたことがありますが、それは昔の話です。今は一般に広く普及し、スキャナで読み込んで作るだけなら、そんなにコンピュータに詳しくなくてもスキャナ付属のソフトで簡単に作ることができます。いわゆる自炊です。しかし、UDブラウザ上で検索などの機能を十分に発揮させるためにはOCR(Optical Character Recognition,光学式文字認識)という方法を使って、読み込んだ写真のような文字を「文字データ」にする必要があります。紙の資料しか無い場合には手間をかけてスキャンしてOCRを行いましょう。

(1)ワープロソフトからの作成

 では、まずは手軽にワープロソフトで作ることを考えてみたいと思います。ワープロソフトは普段教員がテストを作ったり、授業中の資料や教材を作ったりと活用するものですが、実はここ最近のバージョンでは保存の際にファイル形式をPDFにすることができます。こうすると、ワープロソフト上で表示されているレイアウトも文字もそのままにPDFになり、文字は文字データとして認識されUDブラウザの機能にも耐えうるものとなります。実際、今見ているこの資料(PDF版)もMS Word 2013で作成しています。一度、普通に文書ファイルを作って完成させ、その後改めて別名でファイルを保存、この時にファイル形式をPDFにするとPDFファイルを作成できます。何かあれば元の文書ファイルを修正し、PDFを保存し直すこともできる簡単さです。

(2)スキャナの付属ソフト

 スキャナを購入すると、ほとんど何らかのソフトが付属してきます。その中には簡易版のOCRソフトもあったり、単純に読み込んだものをPDFにするものもあります。付属OCRソフトでは、初心者用にわかりやすく設計されており、案内に従ってスキャンすると自動的に一つのPDFファイルにまとめてくれる機能があるものも多いです。ただし、付属のものは簡易版であるため、OCR精度は製品版より低いことがほとんどです。詳しくは付属ソフトの説明書を読んでみてください。「(ソフト名) 使い方」などというキーワードで検索しても見つかります。代表的なOCRソフトは、Panasonic社の読取革命、メディアドライブ社のe.Typist、Ai-Soft社の読んDE!!ココ、ソースネクスト社の本格読取などがあります。
 スキャナの種類についてですが、スキャナには大きくフラットベッド、スタンド、シートフィードの3種類があります。
 フラットベッド:一般のコピー機にあるようなガラスの上に原稿を置き、ふたを閉め、読み込むタイプで、これは1枚ずつか見開きかを片面で読んでいくので手間がかかります。
 スタンド:電気スタンドのような形状で、下に置いた原稿を上からカメラで読むタイプです。フラットベッドとは違い、本の見開きを上に向けて置いたまま、ページめくってスキャナのボタンを押すという手軽な手順となっています。
 シートフィード:自炊ブームで有名になったドキュメントスキャナでよくみられるタイプで、1枚ずつバラバラにした原稿を原稿台にセットし、ボタンを押すと次々と原稿がスキャナに挿入され読み込まれるものです。ポータブルのスキャナはシートフィードが多いように思われます。また、両面読み込みにも対応しているものも増えており、背表紙を外すなどの手間さえかければ、後はほぼお任せて読み込みができます。
 その他:マウスタイプはスキャナ自体を原稿に当てて、手でスキャナを動かして読み込むタイプです。手で動かす速度の問題から、最近はあまり見かけません。
 ドキュメントスキャナ:ドキュメントは文書ですので、写真などを鮮明に読み込むほどの性能は無いですが、文書を読むには十分な機能を持つスキャナで、自炊ブームで普及が進みました。背表紙を切っても問題ないものやプリントであればおすすめしたいものです。

(3)仮想プリンタソフト

 もう一つの方法として、仮想プリンタソフトというものがあります。これを導入すると、文書ファイルを作り、文書を印刷する画面を表示させ、仮想プリンタを選んで印刷するとPDFとして保存できます。この方法は、ワープロソフトや他のソフトでPDF保存に対応していない場合に活用します。興味があれば、「仮想プリンタ PDF」というキーワードで検索してみましょう。


3 HTML

(1)HTMLについて

 ウェブページは表面的にはカラフルで文字や写真などが配置されていますが、実際にはプログラムの塊です。このプログラムの塊をソースやコードなどと呼び、それを書くプログラム言語のひとつにHTMLがあります。このように一見すると非常に難しいもののように感じますが、約束事をいくつか押さえれば誰でもが作成することができます。

(2)作成に必要なもの

 作成に必要なものはテキストエディタと根気くらいで、テキストエディタはWindowsであれば標準でメモ帳がありますが、楽をしたい人は「HTML エディタ」で検索し、好みのものを使うといいでしょう。筆者もメモ帳でいいのですが、自動的に表記が正しいかどうかを判定してくれる機能があるエディタを利用することが多いです。メモ帳の場合は通常の保存ではテキストファイル「○○.txt」として保存されますが、パソコンの設定で「.txt」というような拡張子を表示し、「○○.html」に書き換えれば完成します。代表的なテキストエディタには、WindowsではTarapadやCrescentEveなど、MacではCotEditorやmiなどのフリーソフトがあります。
 テキストエディタでHTMLを作成するにあたっては、ワープロソフトで文書を作成する際に用いたテキスト原稿やOCRの結果作られたテキストデータが必要です。テキストデータに必要なルールを入力することになります。
 ワープロソフトでもHTML保存が可能なため、文書→PDF→HTMLと連続で保存してもいいでしょう。しかし、注意したいのはワープロソフトで保存されたHTMLは、文書の表示をできるだけ崩さないようになっているもので、やや融通が利かない構造になっています。そのため、修正や校正をする必要がある場合も出てきます。

(3)HTMLの書き方

 まず、基本となるのは…
  <○○○>〜</○○○>
 という書き方です。この<○○○>をタグと呼んでいます。タグには非常に多くの種類がありますが、今回は簡単なものを後に紹介します。HTMLの資料を作る時に、まずは①HTMLの宣言②基本となるタグの<html><head><body>の記述③文字コードの宣言をしておくといいでしょう。

①HTMLの宣言

 <!DOCTYPE html>と一番最初、どんなタグよりも最初に書きます。こうすることで「このファイルはHTMLのバージョン5です。」と宣言されます。バージョンについては興味があれば調べてみてください。

②基本のタグの記述

 まず、htmlタグは<html>から</html>までの間はHTMLの内容が書いてあることを意味します。これが無いとHTMLになりません。
 次にheadタグですが、これは直接的な内容では無いけれど、内容に関わる情報を記述するところです。例えば、タイトルは<title>タイトル名</title>という形で、<head>〜</head>の間に書きます。後述するCSSもここに書くことができます。
 そして、bodyタグですが、これはその資料の中身を書く場所になります。<body>〜</body>の間に、文章や図表、目次といったものは全部ここに書きます。

③文字コードの宣言

 ウェブページを作るのには、書かなくても支障がないことが多いのですが、UDブラウザでは一応書いた方が正常に動作することになります。書き方は先ほどのheadタグのエリアに<meta charset="UTF-8">と書きます。これは「UTF-8という文字コードを使用します。」という意味になります。文字コードはコンピュータが文字を表示するときに見ている図鑑のようなものと考えていいと思います。
 以上の3点は最初の約束事として、HTMLの作成を始めましょう。次に紹介するタグも約束事の一つとして覚えてスムーズに使えるといいでしょう。まずは3点を整理したソースを作ってみてください。
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>資料のタイトル</title>
</head>
<body>
資料の内容
</body>
</html>

(4)活用したいタグ

1.タイトル

 <title>タイトル名</title>とheadタグの間に書き込みます。ウェブページのブラウザ上部にもページのタイトルが表示されていると思います。あのタイトルになります。ファイル名と同じで構いません。

2.見出し

 <h1>見出し1</h1>〜<h6>見出し6</h6>とbodyタグの間に聞き込みます。文書だと「第○編」「第○章」「第○節」といった見出しや「1.」「(1)」などの中見出し、何もつかない小見出しなどに使います。6段階でわけることができ、1が一番大きく6が一番小さくなっています。標準では文字の大きさが数字が大きくなるほど、小さくなります。このタグで囲った前後は改行されます。
見出しの例
<h1>第1編</h1>
<h2>第1章</h2>
<h3>第1節</h3>
<h4>1 見出し</h4>
<h5>(1) 見出し</h5>
<h6>あ.見出し</h6>

3.強調・下線・斜体

 強調は<strong>文字</strong>、下線は<u>文字</u>、斜体は<i>文字</i>を使いますが、HTML5ではCSSで設定することを推奨しています。しかし、簡単に設定できることもあり、こちらを使ってもいいでしょう。
実際の例
強調 <strong>強調</strong>
下線 <u>下線</u>
斜体 <i>斜体</i>
強調・下線・斜体 <strong><u><i>強調・下線・斜体</i></u></strong>

4.ハイパーリンク

 ハイパーリンクというと難しく思いますが、要するにリンクという画面の移動に関するタグで<a>文字</a>とbodyタグの間に書きます。文書内(ページ内)でのリンクにはリンク先に<a name="○○"></a>と書いておき、ボタンになるところは<a href="#○○">ボタン名</a>と書きます。また、ウェブページへリンクさせたいときには<a href="URL">となります。デジタルのメリットであるインターネットの活用をここに組み込むことができます。
  実例:ページトップへ移動
 ページ内リンクはUDブラウザでは、ページジャンプや目次、索引などに用いられています。リンク先となるページの頭には以下のように書いておくといいでしょう。
ページリンク先
<!-- P=ページ番号 -->
<a name="P=ページ番号"></a>

ページリンクボタン
<a href="#P=ページ番号">(p.ページ番号)</a>

5.区分け

 区分けには<div>〜</div>と<span>〜</span>があります。文章の途中の単語だけを区分けして、何か設定したいときには<span>を使います。<div>はひと塊にまとめてしまうため、見出しタグと同じように前後に改行が入ります。使い方としては、脚注のようなまとまりを区分けするときは<div>〜</div>で囲み、文中の単語の強調などは<span>〜</span>で囲みます。
 <span>や<div>はそれ単体ではあまり効果がありません。これらのタグに後述するCSSで修飾を行っていきます。

6.改行(行送り)

 改行したいところで、<br>と書きます。ワープロの場合はエンターキーを押すだけで改行していました。しかし、HTMLでは改行用のタグを書かないと基本的には改行されません。また、1行空ける際にも改行タグを使います。

7.境界線

 <hr>と書くだけで境界線が真横に引かれます。使い道としては区切りのいい章ごとなどに引くといいでしょう。

8.画像

 <img src="ファイル名" width="幅">と書きます。ファイルは「○○.JPGでも「○○.GIF」でも構いません。拡張子も含めてファイル名です。widthでは幅を指定します。好みの大きさにパーセントでもpxでも調節してください。

9.音楽

 対応していない場合もあるため、注意が必要ですが、UDブラウザでは対応しています。<audio src="ファイル名.mp3" type="audio/mp3" controls>説明書き</audio>というaudioタグがあります。タイプでmp3を指定しているので、ファイルはmp3のものを利用します。説明書きの部分は再生できないときの表示する文章を記します。

10.動画

 音楽同様にUDブラウザは対応しています。<video src="ファイル名.mp4" width="幅" controls>説明書き</video>というvideoタグを使います。画像と同じく表示の大きさは好みで調整しましょう。

11.リスト

 リストを作成するタグには<ul>と<ol>の2種類を主に使います。ulタグは箇条書きのようなリスト、olタグは順番のリストになります。
 また、リストのセットを上記2つのタグを用いて、リストの項目は<li>タグを用います。このタグは閉じる</li>は必要ありません。もちろんわかりやすくつけても構いません。
・実例1 <ul>タグ
<ul>
<li>内容1</li>
<li>内容2</li>
</ul>

・実例2 <ol>タグ
  1. 内容1
  2. 内容2
<ol>
<li>内容1</li>
<li>内容2</li>
</ol>

12.ルビ(ふりがな)

 ルビ(ふりがな)をふるのには、ルビのタグを用います。ふりがなは対象となる単語の上に小さな文字でふられます。もし見えない場合は単語の後に( )付けでふるなどの工夫をしてください。
 書き方は…
  <ruby>単語<rtふりがな</rt></ruby>
 となります。<rt>の閉じるタグは省略しても構いません。実際の例としては「単語たんご」となります。

13.上付き・下付き

 数学や理科の科目では、累乗やイオンなどで文字の上下に数字や±がつくことがあります。例えば水の分子「H20」や二次関数「y=ax2」があります。実際には以下のように書きます。
  水の分子:H<sub>2</sub>0
  二次関数:y=ax<sup>2</sup>
 <sub>タグは下付き文字、<sup>タグは上付き文字を表現できます。しかし、これらを使っても積分の上限と下限、分子または分母が分数の式などを紙と同じように表現することはできません。表現するためにはMathMLやTex(テフ)という特殊な方法を使いますが、HTMLなどよりも難易度が非常に高くなりますし、UDブラウザで対応しているかは確認していません。そのため、複雑な数式は画像で載せるかPDFを参照してもらうようにしてください。
・数学の表現
 可能な表現:log1010=1 y=(a+x)2 10a+b
 工夫した表現:x=(−b±√(b2−4ac))/2a 解の公式の分数での表現は困難なため、表現の工夫が必要。
・理科の表現
 可能な表現:2NaHCO3→Na2CO3+CO2+H2O
 表現できない:原子の質量数と原子番号の表現

(4)タグを設定

 HTMLにはタグという「要素」があり、それを設定するプロパティという「属性」があります。<a>タグでも「name」や「href」というものがありましたが、これが属性というものになります。文字色、背景色、大きさ、強調なども属性として設定することもできます。「この部分だけ中央寄せ」という場合には
  <div align=”center”>〜</div>
 というように囲みます。しかし、この後に説明するCSSというものを使っても設定することができます。一部、リンクに関するものなどは設定できません。

★HTMLソースの説明

  • <head>と</head>の間に<title>タグでこの文書のタイトルをつける。本文が表示されるエリアには影響がない。
  • <h1>タグで一番大きな見出し、中央寄せ
  • <hr>タグで<h1>タグの下に境界線を引く。
  • <h2>〜<h4>タグで順次見出し付け
  • タグをつけずに生命現象の内容を書く。段落を改行して変えるために<br>をつける。
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=”UTF-8”>
    <title>資料のタイトル
    </head>
    <body>
    <h1 align=”center”>生理学</h1>
    <hr>
    <h2>第1章 生理学の基礎</h1>
    <h3>A 生理学の特徴</h3>
    <h4>a 生命現象</h4>
    生命現象とは子孫を残し、種 族を維持するために生きること である。<br>
    </body>
    </html>



    4 CSS

    (1)CSSについて

     CSSはHTMLを修飾するデータで、HTMLファイル内に書き込むこともできますし、外部ファイルにして、HTMLファイルから呼び出すこともできます。前者の場合はそのファイルだけその設定を適応させ、後者の場合は複数のHTMLで同じ設定を使うことができます。
     例えば、AさんとBさんに共通の資料を渡します。Aさんは白地に黒でも問題ないが大きな文字、Bさんは白黒反転で行間を広くした方が読みやすいとします。このような別々な支援が必要で、どの教科でも同じ設定を使いたい場合には外部ファイルにしてしまう方が簡単です。毎回HTMLファイルにその設定を書き込むのは労力がいります。
     基本的に必要な機材等はHTMLと同じです。外部ファイルにした場合は「.html」ではなく、「.css」となります。書き方もいくつかありますが、基本的にはheadタグの間に書いてまとめる方が編集しやすくなります。

    (2)CSSの書き方

     CSSはHTMLと異なります。まず約束事ですが、①CSSの宣言②要素の指定③属性の設定という流れで書くことになります。また、後述するインライン記述も基本は同じです。

    ① CSSの宣言

     headタグの間に<style type=”text/css”></style>を書きます。これが無いとCSSになりません。そして、内容はこのタグの間に記述することになります。

    ② 要素の指定

     基本形は「タグ {属性1:設定内容;属性2:設定内容;}」です。ポイントは「{}中かっこ」で囲むこと、属性の後は「:コロン」、設定内容の後は「;セミコロン」となるところです。うまくいかない場合は大体ここで間違っていることも考えられます。タグのところには表示される文書で使われているものであれば、ほとんど指定可能です。文書全体の文字サイズを24ptにしたいのであれば、body [font-size:24pt;]と書きます。

    ③ 属性の設定

     数多の属性と設定がありますので、詳しいことは「css リファレンス」などで調べると細かいものまで確認できますが、主なものは後述しておきます。数値で設定するものは単位に気を付けます。文字の大きさはpt(ポイント)にするとイメージしやすいですが、px(ピクセル)にするとうまくいかないこともあります。
    ・単位
    pt:ポイント、1/72インチ
    px:ピクセル、画面表示の1点分
    em:エム、1文字を基準
    ex:エックスハイト、小文字xを基準
    pc:パイカ、1/12ポイント
    %:パーセント、ブラウザでの表示に対する割合
    その他:mm/cm/in(インチ)
     また、色はblackやwhiteといった直接的な色名、#000000(黒)や#FFFFFF(白)といった16進数で設定します。詳しくは「HTML カラーネーム」などで検索してみてください。

    (3)インライン記述

     例えば、<span style=”font-size:24pt;color:white;background-color:black;” type=”text/css”>〜</span>と記述した場合、この局所のspanタグで囲った部分だけこの文字24pt黒地に白文字という設定になります。このような局所のタグにstyle属性をもたせることをインライン記述といいます。局所にだけ効果がありますので、全体はheadタグの間に書き、一部分だけ設定を変えたいときにはこちらを使うというイメージになります。

    (4)応用的な使い方

     HTMLタグにclass属性をつけるとheadタグの間に書くCSSで個別対応が可能です。先ほどのような局所に別の設定をさせたいときは、そのタグに属性「class=”○○”」とつけ、head内のcssで「.○○ {font-size:24pt;}」のように「.○○」と指定します。

    ★ソースの解説

    4種類の書き方を提示します。
     いずれも同じ設定なので、変化は感じられませんが、意味合いは変わります。
    <head>
    <style type=”text/css”>
    div {font-size:24pt; color:white;background-color:black;}
    div.000 {font-size:24pt; color:white;background-color:black;}
    .000 {font-size:24pt; color:white; Background-color:black;}
    </style>
    </head>

    <div style=”font-size:24pt; color:white;background-color:black”>
    内容
    </div>
    <div class=”000”>
    内容
    </div>

    (5)視覚障がいに対する属性設定

    1.font-size:

     文字の大きさです。Ptやpxなどの単位をつけた数字で設定します。

    2.color:

     文字の色です。背景色は「background-color」ですので、間違えないように注意してください。設定は色名か16進数で指定します。イメージしやすいのは色名でしょう。細かい色指定を行う場合は16進数ですが、微妙な色の違いはあまり弁別できない人もいるのではないでしょうか。

    3.font-weight:

     文字の太さです。数値での設定もありますが、太字にするだけならboldにしておけば問題ありません。

    4.font-style:

     文字を斜体(イタリック)にする設定ですが、斜体にするだけならitalicとしておけば問題ありません。

    5.line-height:

     行の高さです。数値と単位、数値とパーセントなどで設定します。文字サイズが行の高さより大きいと行が重なることがありますので、注意してください。

    6.text-align:

     中央寄せ、左寄せ、右寄せなどの設定ができます。それぞれcenter/left/rightになりますが、視野の狭い生徒の場合は文字を探すのに苦労することがあるので、left(左寄せ)が無難だと思います。

    7.text-decoration:

     下線や上線、打消し線などを設定します。基本的に使うのは下線ですので、underlineと書いて設定しましょう。

    8.text-indent:

     1行目の行頭のインデント(行頭マス空け)を指定します。段落を明確にするのに使うことがあるかもしれませんが、1文字分であれば全角スペースを段落の頭に入れるといいでしょう。

    9.letter-spacing:

     文字間隔の設定です。文字間隔を数値と単位で設定します。文字間隔が狭くて文字の切れ目が読み取れない場合、少し広めにしておくと1文字ずつわけて読めることがあります。

    10.word-spacing:

     主に英語で使える属性で、単語と単語の間隔を調整できます。視野が狭い場合は要注意です。

    11.border:

     ボーダーつまり境界線です。divタグに設定しておくと塊がわかりやすくなります。また、囲み文字にする場合はspanタグで行うと文中に囲み文字をつけることもできます。具体的な書き方は以下の通りです。
      div {border:太さ 色 種類;}
     それぞれの内容の間は半角スペースです。太さは単位をつけますが、基本的にpxあたりで設定しておくとよいでしょう。色は色名や16進数で記述します。線の種類は「solid(実線)」「double(二重線)」「dashed(破線)」「dotted(点線)」などがあります。

     他にもたくさんの設定があります。四角く囲った境界線の設定など細かいものがあるため、工夫次第ですごい表示が可能になります。ただし、実際に使用する人が見えやすい表示を心掛けて設定することは忘れないでください。
     例えば、見出しタグの文字の大きさをCSSで一定にして四角で囲むと見出しとわかって文字もよみやすい…などですかね。

    (6)外部ファイルとして読み込む

     外部ファイルとしてCSSを使うときは、head内に書き込んだ部分の「タグ {属性:設定内容;}」の部分だけで大丈夫です。その前後の<style type=”text/css”>や</style>は必要ありません。単純にタグの指定と属性とその設定を書いて保存して、「.css」の形になっていればいいのです。
     HTMLで読み込むには、head内で<link rel=”stylesheet” type=”text/css” href=”CSSのファイル名”>を記述するだけです。UDブラウザにはiTunesから入れますので、同じファイル名のPDFとHTML、CSS(同名でなくてもよい)、画像、音楽、動画を用意して同期します。

    チャレンジ!! 以下のソースの意味を考えよう。

    <head>
    <style type=”text/css”>
    body {background-color:black;font-size:16pt;color:white;line-height:18pt;letter-spacing:10px;}
    .chu {background-color:black;color:black;}
    h1 {text-align:center;}
    </style>
    </head>
    <body>
    <h1>生理学</h1>
    <hr>
    唾液には消化酵素の<strong>アミラーゼ</strong>が含まれており、でんぷんをマルトース に分解する働きがある。
    <div class=”chu”>
    注:唾液アミラーゼをプチアリンともいう。
    </div>
    </body>
    </html>

     サンプルを用意しました。右クリックして保存してみてください。保存したファイルをテキストエディタから開いて中身を確認してみてください。サンプル

    5 まとめ

     PC-Talkerなどのスクリーンリーダーを使っている視覚障がいを有する教員でもテキストベースで教材を作成することができます。PDFの作成に関しては補助を入れてみてもらうことで精度の高いものもできると考えられます。材料さえ揃えば後はキーボードを叩くだけなので、入力に難がなければ誰でもUDブラウザに対応した教材を作ることができるでしょう。
     晴眼者の教員の場合は見える分だけ、見た目にもこだわることができるかもしれませんが、読む人がどのような状態なのかをきちんと把握した上で作成に当たってもらうことが重要です。ぜひ、まずは簡単なものから作ってみて、ブラウザ上で動作するか確認してみてください。思ったよりも簡単だと手ごたえを感じてもらえればと思います。

    戻る