home >> パソコンで楽しむ >> 長い文書のWebページ作成
HTMLを学ぶにはテキスト（解説書）により理屈を勉強することも必要ですが、具体的にページを作ってみて必要な勉強を重ねていく方が近道かもしれません。
ここではフリーソフト「HTML Project2」を使って、長い文章をWebページに作って見ます。
「これから初めて見よう」という方は、フリーソフトのHTML Project2 のインストール・設定・マクロの作成から始めていただきます。このサイトのテキストがお手伝いをします。
HTML Project2 を使う
http://www.kisnet.or.jp/s_odake/pc/htmlproject2.html
HTML Project2 を使う ２
http://www.kisnet.or.jp/s_odake/pc/htmltext2-2.html
わかり難いところはメールや勉強会で聞いてください。私以外の方でも相談に乗れる方が居られます。（設定やマクロを上記のテキストにより出来ていることを前提で説明を進めます。）
長い文章の教材としてこのサイトの「フリーソフトで年賀状」を使います。既にページが出来ていますが、文章（テキスト）をHTML Project2でタグ付けしてみます。これが理解出来れば原稿を最初からHTMLファイルに編集するのも同じ方法で出来ると思います。
長い文章の場合は、適当な長さの内容の区切れのところで幾つかのページに分ける方法がありますが、ここでは基本のページは単一のテキストを主体としてファイルサイズを出来るだけ軽くし、目次を作り文章内リンクで移動できるようにします。画像や詳細解説の必要な場合は、別ページにします。
このテキストで使う教材の文章を私のサイトのページからコピーします。
以降このファイルを編集していきます。ここまでの参考ファイル
まだタグが何も付いていないので、HTML Project2 の下のプレビューでは、文字が羅列されているだけです。
私のテキストによりマクロを作ってあれば、貼り付けた文字の中にカーソルを置きマクロの［html］をクリックすれば、文頭と文末にHTMLファイルの基本のタグが挿入されます。マクロを作ってないときは、手作業で入力することになりますが、文書全体を選択して、HTML Project2 のメニューバーの［ページ設定］→［HTMLファイルの初期設定］で大体同じ結果になります。以下マクロを使うことを前提で説明を進めます。
------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="style.css">
<title>フリーソフトで年賀状</title>
</head>
<body>
ここに前節「文書の取り込み」でコピーして貼りつけた文章が入る
</body>
</html>
-------
title要素の内容にこのページのタイトルを必ず入力しておきます。
10行目あたりの<body>要素からブラウザで表示される内容になります。 13行目あたりの「フリーソフトで年賀状」がこのページのタイトルですから、第一段階の見出しに設定します。
以下順次文章の構造にしたがって見出しをつけます。
こんな風にして見出しのタグ付けをすると文章の構造が見えてきます。
----
<h1>フリーソフトで年賀状</h1>
<h2>フリーソフトのダウンロードとインストール</h2>
<h3>OpenOffice.orgのダウンロードとインストール</h3>
<h3>APrintのダウンロードとインストール</h3>
<h3>nengaAPのダウンロードとインストール</h3>
<h2>あて先データの管理</h2>
<h3>あて先データの作成</h3>
<h4>APrintのデータ</h4>
<h4>Excelなどで列を組みなおす</h4>
<h3>あて先データの整理</h3>
<h4>［nengaAP］のファイル</h4>
<h4>登録名</h4>
<h4>履歴の入力</h4>
<h5>履歴入力の一例</h5>
<h2>あて先を葉書に印刷する</h2>
<h3>APrint で［ＸＸＸＸ.csv］を読み込みます。</h3>
<h3>データーの確認</h3>
<h3>レイアウトの設定</h3>
<h3>差出人の設定</h3>
<h3>ためし印刷</h3>
<h3>印刷</h3>
<h2>文面の作成と印刷</h2>
<h3>OpenOffice.org Writer の起動</h3>
<h3>ページスタイルの設定</h3>
<h4>用紙サイズなど</h4>
<h4>4行数と文字数</h4>
<h3>文字の入力</h3>
<h4>フォントの設定</h4>
<h4>行間隔の設定など</h4>
<h4>一部縦書き（横書き）</h4>
<h3>画像の貼り付け</h3>
<h3>文面の印刷</h3>
<h2>年賀状を受領後の処理</h2>
<h3>受領した履歴を入力する</h3>
<h3>年賀状を送ってない人に追送する場合</h3>
<h4>１枚ずつ［１件印刷]する</h4>
<h4>連続して追加印刷する</h4>
----
元のページと編集中のプレビューを見比べて、見出しのレベルを間違わないように注意します。［Topへ］というナビゲーションの文字が、見出しの頭についている事があります。改行して見出しだけを1行にしてマクロを実行します。ここまでの参考ファイル
目次 ソフトのダウンロードとインストール OpenOffice.org Ａプリント 年賀AP あて先データの管理 あて先データの作成 APrintのデータ Excelなどで列を組みなおす あて先データの整理 nengaAPのファイル 登録名 履歴の入力 あて先を葉書に印刷する APrint で読み込みます データーの確認 レイアウトの設定 差出人の設定 ためし印刷 印刷 文面の作成と印刷 OpenOffice.org Writer の起動 ページスタイルの設定 用紙サイズ 行数と文字数 文字の入力 フォントの設定 行間隔の設定など 一部縦書き 画像の貼り付け 文面の印刷 年賀状を受領後の処理 受領した履歴を入力する 年賀状を追送する場合 １枚ずつ［１件印刷］する 連続して追加印刷する
ページが長いので、目次を作ってページ内リンクでジャンプできるようにすると便利です。このページを作る初期に作って置くと作成中も利用できます。（文章を最初からHTMLファイルで作るときは、目次は本文が出来上がってから作ります。）今回は既に出来ているページの文面をコピー&貼り付けしたのですから目次のテキスト（文字）が残っています。これにタグ付けしてページ内リンクを作ります。
このHTMLファイルの中で「この部分が目次だよ」とコメントをつけておくと、後になってから長いソースの中で他の本文と区別がついて便利です。
「目次」の前に1行開けて、<!--目次開始-->と入力し、最後の「連続して追加印刷する」の次の行に<!--目次終り-->と入力します。（ツールバー4の［コメント文］を利用すると簡単です。）
若し他の文書を作るときに最初から目次を作るのが面倒だったら、このコメントを目印にしてコピーすることが出来ます。
右の枠内の各項目は、前節［第一段階の見出しからタグをつける］でタグつけした見出しです。見出しの段階にあわせたリストにしてからリンクを設定します。判りにくいときはWebにあるページを見て確かめてください。Internet Explorerの場合は黒丸がh2要素、白丸がh3要素、黒四角がh4要素です。
ここでは番号（順序）無しリストを使います。入れ子（リストが重複構造になっていること）が無いリストはマクロが使えます。
最初の［ソフトのダウンロードとインストール］の下に、3行の入れ子がありますので、
OpenOffice.org
Ａプリント
年賀AP
の前後に空白行を作り、この3行の中に(どこでも良い)カーソルを置き、マクロツールバーの［ul］をクリックします。
<ul>
<li>OpenOffice.org</li>
<li>Ａプリント</li>
<li>年賀AP</li>
</ul>
とタグがつき、
と表示されます。この3項目は［ソフトのダウンロードとインストール］の中の項目ですから、上（親）のリストを作ります。（マクロは使えません。）
［ソフトのダウンロードとインストール］の先頭にカーソルを置き、半角で <ul> と入力します。途中入力支援が出てもかまわずキー入力します。閉じるタグは前節の［コメントをつける］で作った<!--目次終り-->の前に空白行を作ってカーソルを置いてツールバー４の［現在の位置でタグを閉じる］（</A>のアイコン）をクリックします。 </u> と入力されます。この間が目次全体のリストです。
次に［ソフトのダウンロードとインストール]の先頭にカーソルを置き、メニューバーの［タグ］［リスト］［リスト項目-li］をクリックすると、 <li> が入力されます。このタグの閉じるタグの位置は三行の子リストの閉じるタグの後です。
と入力されていて次のように表示されます。行頭記号が三行だけのときと変わっています
どのような手順でも良いのですが、ここでは先に孫リストをマクロで作り、次に子リストを、最後に親リストの２番目の項目を作ります。
li要素の中に下のul要素を書き、上のli要素の閉じるタグを下のul要素(の閉じるタグ)の次に忘れないで書くと旨く行きます。次のように表示されます。（孫ul要素は少し左に寄せて表示しました。）
同じように目次の最後までリストを作ります。
<!--目次開始-->と<!--目次終り-->の間を（目次とul要素を含む）選択して、ツールバー２の［スタイルコンテナ-<div>］をクリックします。ダイアログボックスが開きますがこのまま［OK］をクリックします。目次をdiv要素で囲みました。後にこの要素にスタイルシートを設定することになります。
本文の見出しにマーカーをつけて目次からジャンプ出来るようにします。
前項の［終点マーカーを設定します］で見出しにつけた目印を結びつける起点となるリンクを目次に作ります。
規則的にマーカーをつけてあるので迷う事が少ないと思いますが、本文の見出しを見ながら入力するには、ツールバー１の［画面の分割］をクリックして編集画面を上下に２分割して、それぞれの画面をスクロールさせると編集しやすくなります。
リンクの設定が終わったら、すべてのリンクが正しく動作するか確かめます。以後このページ作成中もこのリンクを利用出来ます。ここまでの参考ファイル
HTMLファイルはコンテクスト（Context 論理的な文書構造）を記述します。既に見出しをタグつけしましたが、文章の構造をタグで編集します。
<h1> は[フリーソフトで年賀状>] でこの文書の主題を指定しています。
<h2> で［フリーソフトのダウンロードとインストール］［あて先データの管理］［あて先を葉書に印刷する］［文面の作成と印刷］［年賀状を受領後の処理］と大枠を決めています。
<h3> は［OpenOffice.org］［Ａプリント］［年賀AP］［あて先データの作成］［あて先データの整理］・・・・・と中項目に分けます。
さらに <h4> で［APrintのデータ］［Excelなどで列を組みなおす］［nengaAPのファイル］［登録名］［履歴の入力］・・・・と細分化します。
見出しの下には段落やリスト・表などが入り文章を形作ります。
HTMLファイルでは文章の構造(組み立てられた仕組み)を決めて、見え方はスタイルシートで設定します。スタイルシートの設定の仕方は3種類ありますが、ここではHTMLファイルとは別のCSSファイルを作ります。
段落はp要素で囲みます。文書を書くとき段落の書き出しを1字分字下げするのが一般的です。スペースを入れて字下げする人がいますが、Wordで編集するときもインデントで字下げ出来ます。スペースや行末改行で編集すると以降の編集に支障が出ることがあります。Webページの場合も字下げは段落ごとにスペースを入れなくても、スタイルシートで一括して設定できます。
繰り返しますが、文章の構造はHTMLファイルで、見栄えはCSSファイルで決めます。
段落の中にカーソルを置きマクロツールバーの［p］をクリックします。 <p>〜</p> とタグ付けされます。段落の最初に１字分のスペースが入っているときは削除しておきます。
段落の終りに例えば ダウンロード？ と疑問符をつけた短い言葉があります。別ファイルの詳細説明のリンクを設定したところですが、このテキストでは触れませんので、削除しておきます。
また、ところどころに Topへ と記載されているところがあります。文書の途中から最初に戻るリンクを設定するところですが、リンクを挿入する場所が変わるかもしれないので、ページが出来上がったところで入れますから、これも削除します。
［ダウンロードしたファイル (OOo_2.2.1・・・］から［Windows を再起動します。］までののように順序付リストの場合は、リストの前後に空白行を作り、リストの中にカ−ソルを置き、マクロツールバーの［ol］をクリックします。（順序無しリストの場合は［ul］）ダイアログボックスが開きますがいまはこのまま［OK］ボタンをクリックします。
もし、元の文書に行頭に番号が入っているときは重複しますので削除します。
リストの項目が2行になっているところがあります。マクロを使うと改行してあると別項目として扱います。前の項目の終了タグ</li>を削除して、次の項目の開始タグ<li>を削除すると一つの項目を2行に出来ます。ここまでの参考ファイル
body{background-color:#dbf8e5;}
h1{color:#009900;
text-align:center;}
h2{text-align:center;
color:#32cd32;}
h3{color:#3300ff;
margin:10px 10%;}
h4{color:#0099ff;
margin-top:10px;
margin-left:10%;
clear:left;}
h5{margin:0px 10%;}
p{line-height:150%;
text-indent:1em;
margin:2px 10%;}
p#nabi{font-size:x-small;
text-align:left;
margin:0 0;
clear:both}
div{line-height:150%;
margin:0 10%}
div#menu{font-size:x-small;
margin:0 0;
width:20%;
float:right;
border-style:solid;
border-width:thin;
background-color:#bbffcc}
ul{margin:0px 10%;
line-height:150%;}
ul.solid{border-style:solid;
border-width:thin;
padding:5px;
background-color:#bbffdd}
ul.sub{margin:0 0;
margin-left:1em;}
ol{margin:0px 15%;
line-height:150%;}
dl{margin:0px 15%;
line-height:150%;}
dt{font-weight:bold}
table.solid{border-style:solid;
border-width:thin;
padding:5px;
background-color:#bbffdd}
span.red{color:#ff0000;
font-weight:bold;}
span.bold{font-weight:bold;}
span.maroon{color:maroon;
font-size:80%}
span.blue{color:#0066ff;
font-weight:bold}
ここまで作ったページは、段落の前後に空白行があり間延びした感じです。スタイルシートがまだ適用されていないからです。HTML Project2 で設定したマクロの［html］を使い、文頭と文末にHTMLファイルの基本のタグを挿入すると、
7行目に
<link rel="stylesheet" type="text/css" href="style.css">
とスタイルシートのCSSファイルを呼び出していますが、［style.css］が用意されていません。この［style.css］は今のところダミーファイルです。スタイルシートを最初から作るには大変ですから間に合わせの大まかなスタイルシートのファイルを作ります。
右の枠の中のテキストを選択してコピーし、メモ帳などのエディタ（HTML Project2でも可）に貼り付けて、［style.css］と名前をつけ作成中のファイル(newyearcard.html)と同じフォルダに保存します。拡張子を[.css]とするのが一般的です。 style.cssファイルを適用した参考ファイル
これで編集中のファイルに背景色などのスタイルシートが適用されました。見栄えに手を加えたくなったらこのファイルを編集すればよいわけです。CSSファイルを置くフォルダはHTMLファイルと同じフォルダに置くのがわかりやすいのですが、共用する場合は別の共用フォルダに置き HTML ファイルの head 要素の中の link 要素で
<link rel="stylesheet" href="../style.css" type="text/css"> などと(一つ上のフォルダにstyle.cssがある例)パスを指定すれば参照されます。
また、CSSファイルは１個だけでなく複数使えますので、共用スタイルとそのHTMLファイルだけに適用するスタイルシートを別の link 要素であわせて指定できます。この場合下に書かれた link 要素が優先順位が上になります。
例えばこのファイルだけ背景色をピンクにしたいときは、次のスタイルシートを書いたpink.cssというファイルを作り同じフォルダに入れます。
----
body{
background-color:#FFC0CB}
----
そして<link rel="stylesheet" type="text/css" href="style.css">の次の行に
<link rel="stylesheet" type="text/css" href="pink.css">を加えます。background-color が重複しますが後に書かれたものが優先します。
別の方法では、
style.css に body.pink {background-color:#ffc0cb} とクラスを作り、
HTMLファイルの body 要素に <body class="pink"> とクラスを指定して実現することが出来ます。クラスについては次項で説明します。
それぞれのスタイルシートの機能と使い方は、必要なものを「使って覚える」ようにしたいものです。
別ファイルでスタイルシートを指定するCSSファイルについて説明します。
［セレクタ(selector)］に続いて［宣言ブロック］を書きます。
［セレクタ(selector)］ + ［宣言ブロック］
見やすいように整形する事が出来ますが、全角のスペースは使用できません。全角文字はコメント文やフォントをfont-familyで指定するときに使用できます。
セレクタ(selector) {属性(property) : 値(value) ; }
［宣言ブロック］は中括弧で囲み、中に宣言を［プロパティ(property)］と［値(value)]を半角コロン［:］で区切って書きます。
宣言を半角セミコロン［;］で区切って複数連続して［宣言ブロック］の中に書く事ができます。
例えば段落の文字の色を赤色・太字にするには、 p {color:red;font-weight:bold;}
CSSファイルの中で改行・タブを使って次のような書き方がありますが、どれでもかまいません。
宣言を改行しないで連続して書く事もできますが、宣言ごとに改行した方がわかり易いと思います。
p{line-height:150%;
text-indent:1em;
margin:2px 10%;
}
CSSファイルの中では、全角文字(空白を含む)を使えるのは、font-familyプロパティの値とコメントの中だけだと思います。
コメントは、半角のスラッシュ［/］アスタリスク[*]で
/* ここにコメントを書きます */
という様に覚書を書いておくと判りやすくなります。
スタイルシートとしてはこの［/*］と［*/］の間に書かれた文字は無視されます。
すべての属性（プロパティ）の値（Value）にはあらかじめ初期値が設定されていて、何も設定しなければ初期値で表示されます。普通その属性の一般的な値（auto,none,normal など）が初期値に決められています。文字列が左寄せに表示されるのは、{text-align:left;}が初期値になっているためだと思います。背景色の初期値は｛background-color:transparent;｝（透過）だそうです。
auto が初期値の場合は使用するブラウザ（User Agent（ユーザーエージェント - 略称:UA）と言われることがあります）の設定で自動的に決まります。同じページがブラウザにより表示が違うのはこのためのようです。
none が初期値の場合は、属性の値になにも設定されなければ何事も起きません。
親要素が持っているスタイルの設定をその子要素が受け継ぐ事を継承といいます。例えばbody要素で文字色（color）を指定すると、その子要素で文字色を明示しない限りその文字色が適用されます。
また、属性の値に相対値を指定したときは、指定した値（% など）を継承するのではなく、それによって算出された値が継承されます。
たとえばこのテキストで使う style.css では ul {margin:0px 10%;} と左右の余白を取っていますが、目次のように ul 要素に ul 要素を入れ子にすると余白が大きくなりますので、ul.sub {margin:0 0;} とクラスを作ってあります。
しかし、継承するものとしないもの（背景やボックスなど）があり、ブラウザによって対応が変わったりして、判り難く複雑になり期待通りの表示にならない事があります。
各要素にボックスモデル（Box model）という概念があります。ブラウザで表示するのは二次元の矩形の重複したものですが、大きい箱の中に中くらいの箱が入り、中くらいの箱の中に小さい箱が入っている………、といった箱（ボックス）をイメージしています。
親要素の内容領域（content）の中に子要素が入ります。例えばhtml要素の中にhead 要素とbody要素（場合によってはframeset要素も）が入り、body要素の中にh1,p,div,olなどの要素が入ります。
スタイルシートでは、それぞれの部分にプロパティと値を設定する事ができますが、色々条件があるので面倒になります。インライン要素の場合ボックスの高さ（height）や幅（width）は指定できない、などブロック要素とは違うことがあります。
背景はボーダーとパディングと内容領域に設定できますが、ボーダーの色が透明の場合に背景が表示されます。またhtml,body要素では、マージンも含めて背景が適用されます。
HTML Project2 のスタイルのダイアログボックスを開くと、どのプロパティでも設定できますが、要素によっては適用されないスタイルがあります。例えばmarginプロパティは、表のtr,td,th,col要素などには適用しません。気になったらリファレンスなどで確かめてみると良いでしょう。
例えばこのテキストのタイトル「長い文書のWebページ作成」はh1要素ですが、 border-style:outset; で浮き上がった縁取りになっています。Internet Explorer では灰色で、Firefox ,Opera では色の濃さは違いますが緑色です。
ボーダーの色の border-color は指定していないので初期値になるはずですが、初期値は「個別のプロパティの初期値（colorプロパティの値）を参照 」となっています。h1では、color:#009900;と緑色を指定していますので、この場合は Firefox ,Opera の方が正しい実装と言えるようです。
このようにW3C で勧告されているスタイルシートであっても、ブラウザやそのバージョンによって同じファイルの見え方が違うことがあります。ブラウザの独自仕様はなるべく使わないようにして、なるべく普遍的な使い方をした方が良いと思います。このテキストでは h1 に[border-color:#c0c0c0;]と書き加えた方がよいのかもしれませんが、それでもブラウザにより微妙に変化します。モニタなどページを見る人の環境によっても解像度や色合いは変わりますから、とことん拘っても効果が無い事があります。それよりも柔軟なページを目指す方が有益と思います。
プロパティ毎のブラウザの対応状況は、リファレンスで説明されていますので参考書やサイトで調べて確かめることが出来ます。例えばリスト項目（li要素）のマーカー（行頭記号）の形は［list-style-type］で指定しますが、［list-style-type］プロパティはブラウザに実装されていても、値によっては対応してないものがあり、disc（黒丸）や circle（円）に変えられるものがあります。詳しくはW3Gのサイトで
スタイルシートの属性は、参考書や解説ページでは色と背景、フォント、テキスト、リスト、ボックス、表示と配置、表など、グループにまとめて説明されています。各グループにどのような属性があるかおおよその見当をつけておくと、必要な属性を探すときに便利です。
自分が良く使う（常用）属性について、その働きや値の決め方を熟知している事が、作業を早めます。
HTML Project2 を使っているときは、ダイアログボックスでCSSファイルで設定したスタイルシートの編集や要素の属性でクラスを指定できますが、このソフトでプログラムに書き込んである範囲で編集ができるので、万能ではありません。
例えば、タグの再編集のダイアログボックスのclass-分類名の欄では1個しか指定できず、複数のクラスを指定するときには手動入力する必要があります。（ダイアログボックスの［挿入するタグの内容］欄でも入力出来ます。）
タグつけをしたファイルは、背景色や見出し・段落・リストがっ設定されて、Webページの大体の形が出来上がっていますが、クラスでもう少し細かい指定をします。
今まで要所々々にここまでの参考ファイルとして、作成中のファイルを用意してあります。ここをクリックすれば開いて見る事ができますし、右クリックで出るメニュー（コンテキストメニュー）［対象をファイルに保存］を選ぶとファイルとして保存できます。
h１の後の（目次・h2 の前）前書き部分は、本文とは少し違った表示にします。幾つかの p要素（段落）の一群を div要素（スタイルコンテナ）で囲み、まとめてスタイルシートを指定します。
p.nomargin{margin:0 0;}
div.inset{background-color:#d8f5ee;
font-size:small;
padding:5px 5px;
border-style:inset;}
目次の項目の中にリストの入れ子の深いところは、右側に余白があるのに折り返しています。ul要素のスタイルシートのmargin属性（左右10%）が下位のul要素にも働いているためです。これには最初からstyle.cssにクラスを用意してあります。
一番上の <ul> 以外の <ul> のタグの中にカーソルを置き、ツールバー１の［タグの再編集］をクリックして、［ulの再編集］ダイアログボックスの［汎用属性］［class-分類名］をクリック、スピンボタンで開いて、［sub］という値を選びます。ui要素が多いので、半角スペースを含めた［ class="sub"］をコピーしてタグの中に貼り付けても良いでしょう。
この文書には、ところどころ補足する説明があります。その部分はインラインのスタイルコンテナ span要素で範囲を指定して、文字の大きさと色を変えます。本文と区別できて記述が複雑になるのをある程度は防げると思います。
例えば、最初の［OpenOffice.orgのダウンロードとインストール］の項の最後の
［OpenOffice.org 2.2］フォルダの中のどれかのアプリケーションを起動して、メニューバーの［ヘルプ］→［更新のチェック］をクリックすると、インターネットに接続して新しいバージョンに更新できます。
は、本文とは離れたバージョンアップの説明です。この範囲を選択して、ツールバー３の［スタイルコンテナ］をクリックして、ダイアログボックスの［汎用属性］［class-分類名］をクリックして［maroom］クラスを選びます。
また、［nengaAP］のファイルの項の［送信する（宛名を印刷する）データが入っていて内容が違います。］を［bold］クラス、［葉書に印刷するときに APrint を使い、データの入力・変更・管理には nengaAP を使います。］を［blue］クラスにして強調するなどの箇所があります。ここまでの参考HTMLファイル CSSファイル
ページを見に来た人に与える最初の印象に強く影響するのが色彩です。特に長い文章に付き合っていただくには、疲れない・誰にも受け入れられる・色で文章の構造が理解できるなどに配慮すると良いと思います。
しかし、色を識別できるブラウザを使っている人だけに見ていただくわけでありませんから、色に頼った表現や編集は避けるべきだといわれています。そういう意味では、静止画や動画を使うときにも同じことで代替えの手段を用意するのが親切です。今まで作ってきた参考ファイルの中の、span.bold span.red span.maroon span.blue などのセレクタは、文書構造としては 単なるspan要素ではなく、 em要素（強調）か strong要素（より強調）を使い、クラスの宣言で font-style color などの属性を指定するべきでした。
具体的に変更してみます。
CSSファイルの次の部分を変更します。
span.red{color:#ff0000;
font-weight:bold;}
span.bold{font-weight:bold;}
span.maroon{color:maroon;
font-size:80%}
span.blue{color:#0066ff;
font-weight:bold}
em.red{color:#ff0000;
font-style:normal;
font-weight:bold;}
em.bold{font-style:normal;
font-weight:bold;}
em.maroon{color:maroon;
font-size:80%;
font-style:normal;}
em.blue{color:#0066ff;
font-style:normal;
font-weight:bold;}
span.red は使っている箇所がありませんが、一応用意しておきます。span.maroon は強調と言うほど強い意味は無いのですが、「添え書き」のような要素が判りませんので、これも em要素を使いました。
HTMLファイルで上のクラスを指定している span要素を em要素に変更します。箇所が多いので「置換」機能を使うことが出来ますが終了タグは一つずつ修正しなければなりません。
背景色は装飾のためよりも文章を読みやすくするために使います。初期値は白色ですが光に反射で長く読んでいると目が疲れます。また文字の色（前景色）と区別しやすい色であることが文字を読みやすくします。やわらかい、目に優しい色を選びます。
div要素などの background-color 属性は、本文と区別する役割がありますが、本文の背景色の系統で僅かに異なる色を選びます。
幾種類かの文章があるときは、種類ごとに色調を変化させたCSSファイルを用意するか、クラスで使い分けられるようにすると良いでしょう。
各段階の見出し［h1 〜 h6要素］の文字の色は、背景色に調和した色を選びます。見出しの色でどの段階か判るような色が選べると良いのですが、参考ファイルはあまり良く出来ていません。色々試して良い組み合わせを見つけて下さい。
本文の文字の色は強調したところ以外は規定値のまま（黒色）ですが、落ち着いた読みやすいページにするために、ページ全体で調和の取れた色を選択する事と、色数を多くしないようにします。