表現者のためのHTML・JavaScript

その５　一行の文字数
　ホームページの長文の文章を読むとき、一行中に何文字あるか（一行の長さ）は読みやすさを決める重要なポイントだと思います。本来横書きの文章は、報告書や学術文書を書くためのもの。一文の短い箇条書き文であれば違和感なく読めるのですが、ダラダラと続く小説文を読むにはちょっと不向きです。
　ページの横幅一杯に文章の並んだベタ打ちのページは、正直一目見ただけで読む気力が失せてしまいますね。ある程度余白の取られたレイアウトの方が、読み進める上でも明らかに読みやすい。雑誌なんかの文章ページは、段組やタイトル・カットの挿入や裁ち切りの空白量などで、ページを印象的にしたり読者の目線移動をスムーズにする工夫がされています。
　紙の誌面で読むことに比べ、ディスプレイで文章を読むことはやはり疲れる度合いが大きいです。読む人に無理なく読んでもらうためには、表示される文章量をセーブしたメリハリのあるレイアウトをすることが必要になってきます。
　読みやすい文書のポイントとその順位は

文字の大きさ

一行の文字数

行間

フォントデザイン

の順かな、と思っております（個人的意見だけど）。
■■■■■■■■■

　ご存じの通りブラウザ画面の大きさは可変です。たとえば横長のテーブルを使って一行に100文字ぐらい表示するようなレイアウトだと、ノートパソコンでは横スクロールしなきゃ読めないページになります。これがメチャクチャ読みにくい事は、考えなくても判るでしょう。A5版のノートとか640×480解像度の機械でこんなページを読むのは、苦行としか言いようがないですね。そこまででなくても、デスクトップでは表示できてもノートでは読めないページと言うのはちょっとお粗末です。
　そういうハードウェア的な制約はさておいても、長いお話をそれなりの勢いで読んでもらうには、一行の文字数はちょっとすくな目の方が効果的です。だいたい一行が30～40文字ぐらいが「もっと読みたい」みたいな気分にさせてくれる目安じゃないでしょうか。
■■■■■■■■■

　ＨＰレイアウトの王道と言えば、テーブルを使う方法でしょう。文章や絵を思い通りの位置に張り付けるには、まずテーブルを作ってその枠の中にはめ込んでいくのが一番簡単な方法です。ＨＰ作成ソフトでも、かなり簡単な操作でテーブルを作ることができますから、使っている方も多いですね。
　テーブルの横幅をピクセル単位で指定してセルに文章を流し込めば、一行の文字数を制限することができます。テーブルの表示位置を右寄せや左寄せにすれば、面白い画面が作れますね。セル数を増やして右セルに文章・左セルにカット、なんてレイアウトだってできます。テーブルセルのバックにイメージを張り付けて、可愛らしい文書にすることだってできます。
　テーブルを使う問題点は「表示に時間がかかる」ということ。ページ内にテーブルがあると、ブラウザはページ内の全ての要素を読み込んでから、おもむろに表示を始めます（ブラウザがテーブルの画面上での位置を確認してから表示するためです）。ですから長文をテーブルに流し込んだページは、テレホタイムにアクセスすると表示するまでにけっこうな時間がかかります。ブラウザ画面の大きさを変更した場合も同じ事が起こります。
　テーブルを使う場合は、あまり長い文章を一ページに表示しない方がよいでしょう。
    <BODY>
    <TABLE>
    <TR>
    <TD WIDTH=300><IMG SRC="スペース.gif" WIDTH=300 HEIGHT=1 ></TD>
    <TD WIDTH=300><IMG SRC="スペース.gif" WIDTH=300 HEIGHT=1 ></TD>
    </TR>
    <TR>
    <TD>
    …………文章……………
    </TD>
    <TD>
    <IMG SRC="挿し絵イメージ.gif">
    </TD>
    </TR>
    </TABLE>
    </BODY>
　複数セルのテーブルを作る場合、ブラウザによってはテーブルの横幅が指定した幅にならない事があります。枠線だけの、中に文字もイメージもないセルを作った場合によく起きる現象です。
　これを直すためには、スペースイメージ（gifファイル）を高さと幅を指定して貼り付ける方法が有効です。くしゃけてしまうテーブルの中に詰め物をして内側から支える感じですね。上の枠内にあるのがその方法です。
　赤い字で書かれている部分を見て下さい。テーブルの一番最初の行に大きさを指定したスペースイメージを張り付けています。こうする事でセルの大きさを決め、テーブルの表示が崩れないようにしているのです。
　テーブルの表示が崩れる現象が出たら、迷わずこの青字の部分を崩れたテーブルの一目に追加して下さい。<TD>行をテーブルの列数分追加して、WIDTHの数値を表示したい横幅に変更すればいいのです。ＨＰデザイン書にも紹介してあるテクニックです。ぜひ試してみて下さい。
■■■■■■■■■

　このページでは左右のスペースを取るのに<BLOCKQUOTE>タグを使っています。これは引用を示すＨＴＭＬタグなのですが、これをつけるとそのタグ内の文章をインデントして表示してくれます。二回続けて<BLOCKQUOTE>タグを書けば、二回分インデントしてくれます。左右にスペースを取って中央に文章を表示するには効果的な方法です。シンプルなレイアウト方法ですが、一行の文字数を制限するには効果的です。
　この方法の長所でもあり短所でもあるのは、ブラウザ画面の表示サイズにより文字数が変わってしまう事でしょうか。テーブルを使用した場合はパーセントで横幅を指定しない限り、ブラウザ画面の幅を変えても文字数は変わりません（反面モバイルギアなどのアクセスでは横スクロールを強要する表示になります）。<BL
OCKQUOTE>を使えば、ブラウザの画面サイズにしたがって一行文字数は変わっていきます。早い話、大きな画面でも小さな画面でも読むことが可能な訳です。
　自分が使っているから、という訳ではありませんが、一度トライしてみてよい方法だと思います。
■■■■■■■■■
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    </HEAD>

    <FRAMESET COLS="150,*">
    <frame src="文章メニュー.htm">
    <frame src="文章.htm">
    <NOFRAMES>
    <BODY>
    このページにはフレームが使用されていますが、
    お使いのブラウザではサポートされていません。<BR>
    <A HREF="文章.htm">こちら</A>をクリックして下さい。<BR>
    </BODY>
    </NOFRAMES>
    </FRAMESET>
    </HTML>
　一行の文字数を制限する方法として、フレームを使ってみるのも効果的です。ブラウザの画面を左右に分けて、左側に目次・右側に文章を表示するようなやりかたです。スクロールバーの表示を消したり、背景のイメージを工夫したりすれば、ちょっと印象的な効果を生むことができます。
　ホームページデザイン書などでは「使わない方がいい」と書かれている物もありますが、一行の文字数を制限するには効果的です。ページ全体がスクロールするのでなく、文章部分だけがスクロール表示されていくのは見た感じとしていかにも小気味がいい。
　この方法で忘れてはいけないのは、フレーム対応していないブラウザへの対応を考えておくことです。上の枠内赤い文字の部分を見て下さい。<NOFRAMES>から始まるのがフレームに対応していないブラウザで表示される部分です。この部分に文章ページの表示を行えるリンクを作っておきましょう。
　二大ブラウザのＩＥ・ＮＮ共フレームには対応していますから、９割以上のお客様には意図した形の文章を読んでいただけます。そしてそれ以外のお客様にも、作品だけは読んでいただけるようにする。細かい事かも知れませんが“読んで欲しい”という思いを形にする大切な作業です。面倒くさがらずにやりましょう。
■■■■■■■■■

　一行の文字数を決める事には、文体というものがいくらか関係してきます。さほど難しいことではありません。ジュブナイル文かそうでないか、というレベルの問題です。
　ご存じのように主に10代を対象としたジュブナイル作品は、一文が非常に短いのが特徴です。それだけに改行が多く、ＨＰ上の横書き表示でもそれほど読みにくさを感じません。文章に勢いがあり、ネットで作品を公開するにも適した文体と言えます。ＨＰ上で作品を公開しているみなさんも、ページをプレビューしながら文章を推敲し、通常より短めの文節を心がけていらっしゃるのではないでしょうか？
　それ以外の文体で作品を書いていらっしゃる方の場合、一行の文字数は大変重要な読みやすさのポイントになります。特に大江健三郎調（？）の句点を多用した文章を持ち味としていらっしゃる方は要注意。大ざっぱに言うと、一文の長さ（読点までの長さ）が長い文章ほど、一行の文字数が少ない方が読みやすいと考えるのがいいでしょう。