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

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

今週のおさらいバックナンバーはこちらから
第1号  第2号  第3号  第4号  第5号  第6号  第7号  第8号  第9号  第10号
第11号  第12号  第13号  第14号  第15号  第16号  第17号  第18号  第19号  第20号
第21号  目次

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

今週<第22号>マガジンのおさらい

                  毎週金曜日配信 What's New 2002/10/11
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
 今週の課題 ■ テキスト(文字列、文章を構成するもの)
             ■ 外部に置くスタイルシートの応用

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

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

ネットにおける情報とは、世界中のネットのアクセスするユーザへの大切なリソースとなります。そのためにも情報を発信する側、つまり 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月1日  17:00

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

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

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

見出し要素の使い方

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

<h1>第1見出し要素</h1>
<h2>第2見出し要素</h2>
<h3>第3見出し要素</h3>
<h4>第4見出し要素</h4>
<h5>第5見出し要素</h5>
<h6>第6見出し要素</h6>

第1見出し要素

第2見出し要素

第3見出し要素

第4見出し要素

第5見出し要素
第6見出し要素

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

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

フォントの大きさ

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

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

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

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

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

フォント名の指定

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

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

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

文字色と背景色

文字色も重要なポイントです。色を使ったページでは、色弱障害者に配慮する配色を考えることも大切です。特に赤と緑の配色には注意が要ります。背景色に緑を使って文字色を赤にすると見えにくくなる可能性があります。それらの色はなるべく単独で使うようにしましょう。
文字色と背景色の見本の一部
見本背景色文字色備考
黒と青の組み合わせ#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上付き文字数式などの使用する場合 a2 + b2 = (a + b) (a - b)
sub下付き文字科学式の表示 水の化学式は、H2O
ins追加部分テキストに追加を加えた場合に使用 急性アルコール中毒だ
del抹消部分抹消されたテキストに使用 xam要素は使用不可です。
bdo文字の方向dir属性で文字方向を指定 文字方向

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

スタイルシートによってテキストのフォントの形や表現などを設定する方法です。物理要素の替わりに使うことを強くお奨めします。
CSS属性と値一覧
属性CSS記述 サンプル
font-weightboldp { font-weight: bold } 強調文字
text-decorationunderlinep { text-decoration: underline } 下線付き文字
text-decorationline-through p { text-decoration: line-through } 抹消線付き文字
text-decorationoverlinep { text-decoration: overline } 上線付き文字
font-styleitalicp { 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 }

整形済みテキストと言うのは、空白や改行などを維持しています。
    このように空白があってもそのまま空白も表示します。
    pre要素の特徴として、
        1.テキストは固定ピッチフォントで表示される
        2.一般的に文字が小さく表示される
        3.空白や改行を維持して表示する
    などがあります。
    プログラムなどを記述する場合には適した要素です。

一般的に pre要素内には他のブロックレベル要素は記述することができません。
これは初心者が犯しやすいミスです。

(詳しいHTML分は今週分(第22号)を参照してください。)

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

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

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

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

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

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

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

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



Copyright(C) 2002-2003 banban@scollabo.com