初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第１号   第２号   第３号   第４号   第５号   第６号   第７号   第８号   第９号   第10号
 第11号   第12号   第13号   第14号   第15号   第16号   第17号   第18号   第19号   第20号
 第21号   目次

プレーンテキスト版バックナンバー

今週＜第22号＞マガジンのおさらい

■ テキストの記述に関する作法

テキストとは文字列のことです。文字列とは、私たちが理解できる「コンテンツ」でもあります。コンテンツを形成する上で、圧倒的にテキストが利用されています。そしてそれは間違いなく情報です。

ネットにおける情報とは、世界中のネットのアクセスするユーザへの大切なリソースとなります。そのためにも情報を発信する側、つまり Webコンテンツ制作者はテキストを記述する上での最低限の作法を身に付ける必要があります。

◆ 改行

テキストを改行する場合、強制改行要素 <br> を使用することが多々あります。この要素を使うことには何も問題ありません。ポイントは、どこで改行させるかということです。

例えば次のHTML文では、文字列を無理に整えようとしています。

童謡：ウサギと亀より<br>
もしもし亀よ亀さんよ、世界の<br>
うちでお前ほど、歩みののろい<br>
ものはない。どうしてそんなに<br>
のろいのか

＜結果＞

童謡：ウサギと亀より
もしもし亀よ亀さんよ、世界の
うちでお前ほど、歩みののろい
ものはない。どうしてそんなに
のろいのか

このように、文脈の途中で改行するのは感心できません。できることなら句読点で改行させるようにしましょう。音声ブラウザでは、妙な発音をしてしまう可能性があります。

また、改行要素を連続して空白を作り、あたかも段落のような表現がありますが、醜いだけのHTMLになり、しかも明らかな文法違反です。

誤ったHTML文
ウサギと亀<br><br>
昔々ウサギと亀が競争をしました・・以下省略
<br><br><br><br><br><br>
浦島太郎<br><br>
昔々浦島太郎は、浜辺でいじめられている・・以下省略
<br><br><br><br><br><br>

◆ 文字間のスペース

下記のサンプルでは、文字と文字の間に空白があります。これは単純に文字間にスペースを挿入して記述したテキストです。

講習会のお知らせ
場　所	ばんばんの家
日　時	11月１日　17:00

このように文字と文字の間に空白がある場合、音声ブラウザは「ば、ところ」とか「ひ、とき」と発声してしまいます。「視覚障害者」にとっては何のことだか通じません。どうしても文字間にスペースを入れたい場合にはスタイルシートを利用しましょう。

例：CSS  td.space { letter-spacing: 1em } 文字間に１文字分のスペース

    HTML <tr><td class="space">場所</td><td>ばんばんの家</td></tr>
         <tr><td class="space">日時</td></td>11月１日  17:00</td></tr>

◆見出し要素の使い方

見出し要素には１～６まであり、視覚系ブラウザの多くで大きさを変えて表示しています。

<h1>第１見出し要素</h1>
<h2>第２見出し要素</h2>
<h3>第３見出し要素</h3>
<h4>第４見出し要素</h4>
<h5>第５見出し要素</h5>
<h6>第６見出し要素</h6>

第１見出し要素

第２見出し要素

第３見出し要素

第４見出し要素

第５見出し要素

第６見出し要素

これらの見出し要素には、それぞれ意味があって段階的に分けられています。見出しはあくまでも見出しであって、決して本文ではありません。その意味を無視して HTMLの基本的な論理構造から外れてしまうような使い方は明らかな文法違反です。

見出し要素は段落ではありません。あくまで「章」あるいは「節」などの見出しでなければなりません。音声ブラウザの中には見出しを女性の声、本文を男性の声で区別して発声し、「視覚障害者」に理解しやすい工夫がなされているものがあります。

◆フォントの大きさ

お年寄りにとって小さな文字は読みづらいものです。そこでユーザ側でブラウザの設定を操作して、自由に文字の大きさを指定し、自分なりに読みやすい環境にすることができます。

しかし、作成者がスタイルシートでフォントのサイズをポイント（pt）、ミリ（mm）、インチ（in）、パイカ（pc）などで「絶対値」を指定してしまうと、ユーザ側で文字の大きさを変えることができなくなってしまいます。

このテキストは６ポイントで書かれています。ブラウザでは調整できません。

このテキストは3ミリで書かれています。ブラウザでは調整できません。

できるだけフォントのサイズを指定しない方がユーザにとって便利です。どうしても変化をつけたい場合はなるべく「相対値」を設定しましょう。相対値はユーザ側の設定にも対応できるので安全です。特に大切な情報を読んでもらいたい場合には「絶対値」を指定しない工夫が大切です。詳しくは、第６号のフォントのコントロールをお読みください。

◆フォント名の指定

スタイルシートでフォント名を指定することができます。ですが、ユーザ側で同じフォントがなければ違うもので代用されます。また、中には「明朝体は嫌いだ！」とか「ゴシック体はどうもね」という方も少なくありません。

このテキストは明朝体で記述しています。

できれば、フォント名を設定しないほうが安全です。ことさらお互いが不愉快な思いになる必要はありません。

◆文字色と背景色

文字色も重要なポイントです。色を使ったページでは、色弱障害者に配慮する配色を考えることも大切です。特に赤と緑の配色には注意が要ります。背景色に緑を使って文字色を赤にすると見えにくくなる可能性があります。それらの色はなるべく単独で使うようにしましょう。

**文字色と背景色の見本の一部**
見本	背景色	文字色	備考
黒と青の組み合わせ	#000000	#0000ff	決して見やすいとは思えません。
黒と赤の組み合わせ	#000000	#ff0000	青よりマシだが長文にはどうでしょうか？
緑と赤の組み合わせ	#00ff00	#ff0000	「色弱障害者」には読めません。
赤と緑の組み合わせ	#ff0000	#00ff00	同じく「色弱障害者」には読めません。
赤と黒の組み合わせ	#00ffff	#ff0000	長文では目が疲れてきます、やめましょう。
水色と赤の組み合わせ	#00ffff	#ff0000	短文でも目がチカチカしてきます。
灰色の組み合わせ	#dddddd	#cccccc	論外。近似色では読むのが困難です。
白と灰色の組み合わせ	#ffffff	#cccccc	うーむ、と唸ってしまいます。
白と水色の組み合わせ	#ffffff	#ccffff	読んでほしくないんでしょうね。
白色と黒色の組み合わせ	#ffffff	#000000	無難。長文に適して誰でも読めます。

◆物理タグ

テキストに用いる要素の中には「物理タグ」と呼ばれるものが存在しています。これらは、ユーザのハード及びソフト環境に依存するもので、使用しないほうが安全と言われています。

**物理タグ一覧**
物理要素	機能	備考
b	強調文字	一般的に太字で表示
i	斜体文字	一般的に斜体で表示
u	下線付き文字	一般的に文字に下線がついて表示（非推奨)
s	抹消線付き文字	一般的に文字に抹消線がついて表示（非推奨)
tt	テレタイプ文字	一般的に固定ピッチフォントで表示
strike	抹消線付き文字	文字に抹消線がついて表示（非推奨)

当講座では、物理要素はお奨めしていません。替わりに下記のフレーズ要素、もしくはスタイルシートを利用しましょう。

◆フレーズ要素

テキストに論理的な意味を与えるものを、「フレーズ要素」と呼びます。これは、通常のテキストの中で使われるインラインレベル要素です。

フレーズ要素には下記の種類があります。すべて終了タグ必須です。

**フレーズ要素一覧**
要素名	機能	備考	サンプル
em	強調	文字を強調させ、一般的には斜体で表示	Emphasis
strong	強い強調	文字を強調させ、一般的には太字で表示	Strong
dfn	定義用語	文書内での定義された用語を指し、一般的には斜体で表示	定義用語
code	コード	プログラムなどの記述に使用、固定ピッチフォントで表示	`code`
samp	サンプル	プログラムなどの記述に使用、固定ピッチフォントで表示	`Sample`
kbd	キーボード	ユーザによって入力された文字、固定ピッチフォントで表示	Keyboad
var	変数	プログラムの変数や引数の表現に使用、斜体で表示	`$banban`
cite	引用文献	文章を引用する際の引用先名を記述	なし
abbr	略語	発音できない略語などを表現する際に使用	www
acronym	頭字語	発音できる略語などの表現に使用一般的に視覚系ブラウザではツールチップが表示される	LAN

◆その他の推奨されている要素

下記の要素は、テキストにそれぞれの意味を持たせた場合に使用します。

要素名	機能	備考	サンプル
sup	上付き文字	数式などの使用する場合	a² + b² = (a + b) (a - b)
sub	下付き文字	科学式の表示	水の化学式は、H₂O
ins	追加部分	テキストに追加を加えた場合に使用	急性アルコール中毒だ
del	抹消部分	抹消されたテキストに使用	~~xam要素は使用不可です。~~
bdo	文字の方向	dir属性で文字方向を指定	文字方向

◆CSSによるテキストのスタイル

スタイルシートによってテキストのフォントの形や表現などを設定する方法です。物理要素の替わりに使うことを強くお奨めします。

**CSS属性と値一覧**
属性	値	CSS記述	サンプル
font-weight	bold	p { font-weight: bold }	強調文字
text-decoration	underline	p { text-decoration: underline }	下線付き文字
text-decoration	line-through	p { text-decoration: line-through }	抹消線付き文字
text-decoration	overline	p { text-decoration: overline }	上線付き文字
font-style	italic	p { font-style: italic }	斜体文字
color	色コード	p { color: #00f }	色付き文字
letter-spacing	数値＋単位	p { letter-spacing: 1em }	文字間隔
font-family	フォント名	p { font-family: serif }	明朝体
font-family	フォント名	p { font-family: sans-serif }	ゴシック体

◆整形済みテキスト --- pre要素

テキストを表示する場合、通常ブラウザは空白などは維持しません。また、長文は自動的に改行されて表示します。制作者側で、空白や改行位置などを意図的に維持したテキストを表示させるときに、pre要素は便利です。

ただしブラウザによっては、意図しない空白で表示させてしまう場合もありますので、スタイルシートを使って、狙い通りの整形したテキストを表示させます。また、pre要素は一般的に固定ピッチフォントで表示され、ひとまわり小さな文字になることが多いようです。。

下記の囲みのテキストは、pre要素を使って表示しています。

CSSの記述　 pre { text-align: left; white-space: pre; font-size: medium }

◆Webページに求められるもの

テキストを表示させる方法は実に様々です。大切なことはテキストの表示にもアクセシビリティが存在するということです。Webページ制作者として最低限の作法を身につけることはそれほど困難なことではありません。

どのような環境の、どのようなプラットフォームの、どのようなブラウザにも正しく情報が伝わることこそ、Webに求められるべきものなのです。

■ 外部に置くスタイルシート

先週に解説したとおり、外部にあるスタイルシートを読み込むには、link要素を使います。この要素を使って、複数のスタイルシートを HTMLに読み込ませることが可能です。

◆外部スタイルシートの利点

Webページ作成におけるがうぶスタイルシートの長所には次の点が挙げられます。

数ページ分のHTMLに１つのスタイルシート文書でまかなえる
編集や変更、更新の際に、効率よく作業できる
HTML作成作業時にミスが少なく高効率
サイト全体のデザインに統一性が保てる

既にXHTML1.0/1.1では、スタイルシートは外部に置かなければなりません。ヘッダに記述する場合のコメントタグ内のスタイルシートが、XHTMLでは危険ということで、そのような処置がとられています。

外部スタイルシートの利用はそれほど難しいものではありません。テキストエディタで CSSの記述だけを集め、拡張子「.css」で保存すれば HTMLに読み込むことが可能なスタイルシートができます。

初心者のためのホームページ作り 第22号