WEBサイトをつくる (3) テキストのレイアウト

■WEBサイト作成ソフトを使うと、文字の入力や属性の変更はワープロソフトと同じようにできる。改行に段落を変える改行(p)と、段落を変えない改行(br)があって、そのつど使い分ける必要があるところは、すこし違う。

■MicrosoftのWordやPowerpointでつくった文書もHTML形式で保存することでWEBページとして使うことができるが、細かい設定を忠実にHTML化しようとするあまりか、複雑奇怪で後から修正するのが困難なコードができあがってくるので、あまりスマートな方法とはいえない。親切なことに、Dreamweaverには【ファイル→読み込み→Wordドキュメント】や【コマンド→Word HTMLのクリーンアップ】などという機能までついている。ただ、現状のHTMLでは扱いが困難な数式などの入った文書はWordなどでつくってHTMLに変換すると、数式の部分だけが自動的に画像ファイルとして組み込まれるのでこういう場合にはワープロソフトを使うメリットはまだあるといえる。

■文字のフォントや大きさ、色彩などはワープロと同じように指定できる。Dreamweaverの場合は【ページプロパティ】から、ホームページビルダーの場合は【編集→背景・文字色の設定】で設定できる。

■背景と文字色の組み合わせでページの雰囲気は大きく変わる。背景と文字色の対比(似たような色か対照的な色か)、全体の彩度やコントラストなどを工夫する。コントラストが強すぎるとどぎつくて見苦しくなり、コントラストを弱めると弱々しい感じになる。背景には壁紙として背景イメージを張り込むこともできるが、背景画像が派手すぎると文字が埋もれてしまうので、あまり乱用しないほうがいい。

■現在、パソコンでもRGB8ビットずつの True Color が使われるようになったが、WEB上では見る側のさまざまな環境でも正確に再現されることが保障されている「Webセーフカラー」を使うことが推奨されている。RGBそれぞれに00-33-66-99-CC-FFの6段階だけを使い、その組み合わせで6×6×6=216色からなる。音楽でいえば12平均率のようなものである。

■文字の色にかんしては、リンクされている部分は青字に下線、クリックした瞬間には色は赤く変わり、その後はマゼンタになるのが、コンピュータが基本8色のテキストしか使えなかった時代からの古いしきたりだが、見かけをきれいにするために、近年はこの決まりはあまり守られなくなった。しかし、ページを美しくつくりつつも、ようするに見る側が、どこにリンクが張られているのかがわかるように配慮したいものではある。たとえば、色はともかく、リンクされている文字には下線を引き、逆にリンクされてない文字列には、強調などの、リンクとは別の意味では下線を引かないようにする、などを心がけるのは結構なことである。

■文字のフォントはワープロと同じようにいろいろ使えるが、WEBの場合はブラウズする側が全員同じフォントを持っていないと表示できないので、あまり細かい指定をしても無意味なこともある。どうしても製作側のフォントを強制的に表示させたい場合は、画像データにして張り込むという方法もある。同じページ内でたとえばかな・漢字とアクセント記号つきのラテン系文字を両方表示させたい場合は、使用フォントとエンコーディングをUnicodeにする必要がある。

■文字の大きさの指定は、見出し、相対指定、絶対指定など、歴史的な事情でいろいろな方法が混在しているが、基本は、見る側に任せて、つくる側があまり細かい指定をしないことである。文字の飾りも、基本のHTMLでは、太字、イタリック、下線などごく基本的なものしかない。

■行間を空けるなど、それ以上に細かく文字のレイアウトを決める場合には、CSS(スタイルシート)を使うことになるが、高度な機能ほど互換性が低く(たとえば、Netscapeではうまく表示できないなど)、見る側が文字の大きさを自由に変えられなくなるので、できるだけ基本的な機能だけを使うほうが無難ではある。

■また、文字の配置についても、HTMLにも、ワープロと同じように、インデントや左/中/右揃えなどの機能があるが、それ以上のあまり細かい機能がないのは、ブラウズする側の窓枠の大きさなどで文字の配置が変化するほうがよいからである。

■WEBサイト上で文字の配置を行う場合、表機能を応用するのが簡単で役に立つ。たとえば、縦二段組み文書を作りたければ、一行二列の表を作り、その中に文字を打ち込めばよい。表の幅は絶対指定(ピクセル単位)と相対指定(%)の両方ができるが、これもつくる側のデザインを優先させたければ絶対指定、見る側の多様性を考慮するなら相対指定が良い。

■作るがわで表機能などを使ってページの大きさを決める場合は、見る側がどれぐらいの大きさで見ているのかを考慮しなければならない。コンピュータの画面の解像度はひとつの基準になる。昔のパソコンはVGA(640*400)が主だったが、今は最低でもSVGA(800*600)か、普通はXGA(1024*768)以上になっているものが多いため、それよりひと回り小さい800×600がひとつの目安になっている。

■ひとつの画面を分割して複数のページを同時に見せるフレーム機能は便利でメモリの節約にもなるが、最近は逆にあまり使われなくなってきている。見る側の窓枠の大きさによってはデザインが崩れてしまう、検索サイトから入ってきた場合にもデザインが崩れてしまう、特定のページにブックマークやリンクがしにくい、等々の理由から、むしろ普通の表機能を使う方法が見直されている。






(2006/2549-06-30 蛭川 立)