軽々しくいこう! 4「見やすいって事は」


ご覧戴ければお判りでしょうが、このサイトのメインは「小説」であります。
小説といえば「文字」ばかり。そして、パソコンの画面上で「文字」を追うのはかなりの疲労を伴います。おまけに、管理人執筆のものは長いのが多いし。
それでも四〇〇字詰め原稿用紙に換算すると一五〇枚もないんですけど(これは、雑誌社の新人賞申し込み要項の短編クラスです)、画面上で見ると、必要以上に「長く」感じるものなのです。
ですから、少しでも「見やすい」事を心掛けておかないと、途中で放り出されてしまいます。
例を上げましょう。
世界で最も不可思議な港町として名高いこのシャーケン。
ここにも、朝はきちんとやってくる。
同時に、面倒な騒動までやってくる。
平穏な日は、一日としてなかった。
この広い町のどこかで、必ず誰かがはた迷惑な騒動を引き起こし、巻き込まれるのだ。
だからこそ、ここへ来れば――どんな職種であれ――仕事にあぶれる事はない、とまで云われている。

柔らかなフカフカのシーツにくるまって、幸せそうな顔でグッスリと眠っていた彼女がようやく目を覚ました。
名前はグライダ・バンビール。
当年とって19歳の(自称)美少女剣士。
だが、すがすがしい朝とは反対に、体の方はやけに重く感じられた。全身が、ギュッと締めつけられるような感覚さえある。
しかし、彼女は昨日はそんなに飲んでいたわけじゃないし、全身がだるくなるほど疲れているわけでもなかった。
<当サイト「Baskerville FAN-TAIL the 1st.」より抜粋>

……こんな感じの文章がずら〜〜と続くとします。あなたは読み続けたいと思いますか?
おそらく大半の人が読む気をなくすでしょう。文章の上手下手の問題ではありません。読みずらかった筈です。
その理由は「行間がない」から。それだけです。お手持ちの適当な小説を手に取り、中を見てみて下さい。
発行する会社や年代にもよるのですが、だいたい使われている文字の大きさの半分前後の行間が空いている筈です。
そうした行間があるから、見やすい文章になるんです。パソコンの画面上の文章も、それを心がけねばなりません。
ですが、このサイトを作るという技術そのものは欧米諸国で開発されたもの。日本の文章事情など考慮してはくれません。そこで、こういうアイデアが出てきます。
世界で最も不可思議な港町として名高いこのシャーケン。

ここにも、朝はきちんとやってくる。

同時に、面倒な騒動までやってくる。

平穏な日は、一日としてなかった。

この広い町のどこかで、必ず誰かがはた迷惑な騒動を引き起こし、巻き込まれるのだ。

だからこそ、ここへ来れば――どんな職種であれ――仕事にあぶれる事はない、とまで云われている。



柔らかなフカフカのシーツにくるまって、幸せそうな顔でグッスリと眠っていた彼女がようやく目を覚ました。

名前はグライダ・バンビール。

当年とって19歳の(自称)美少女剣士。

だが、すがすがしい朝とは反対に、体の方はやけに重く感じられた。全身が、ギュッと締めつけられるような感覚さえある。

しかし、彼女は昨日はそんなに飲んでいたわけじゃないし、全身がだるくなるほど疲れているわけでもなかった。

<当サイト「Baskerville FAN-TAIL the 1st.」より抜粋>

さっきよりは幾分マシかと思います。
これは<p>タグというものです。段落を指定する時に使われるもので、ご覧の通り1行分空いて見えます。それを利用して行間を確保した訳です。
しかし、これはあくまでも「段落」のためのタグ。「1行空けるためのタグ」ではありません。しかし、不自由な環境下で使えるものを使う。それは非常に賢い判断と言えます。
ですが、これも全く問題がない訳ではありません。
肝心の彼は戦場育ちの常識知らず。どうも「恋愛」という「事態」そのものが良くわかってないんじゃないか、としばしば思ったものだ。

「あのサガラさんの事です。『何故大佐殿が自分の写真を持っているのだ? 一体これにどんな秘密が隠されているというのだ?』とか思うに決まってます。そしてその後絶対にカナメさんに相談しに行ってしまいます。彼とカナメさんの仲が以前に比べて良くなってしまっているのは、今や動かしようのない事実ですし、それは認めなければなりません。カナメさんがあの写真を見たら、絶対に何だかんだと理由をつけて着服してしまうに違いありません!」

かなり切羽詰まった調子で一気に吐き出すように言ったテッサは、そこで一息ついた。軽く開いた両手の指が小刻みに揺れ、目がうつろになり焦点が合わなくなってくる。その時マオは後に「テッサの背後に妖しげなオーラを見た気がした」と言っている。

「そして、その写真を使ってわたしを脅迫するんです。『部隊のみんなにこの事をバラされたくなかったら……』とか言って。そしてわたしは彼女のなすがままとなって、さんざんからかわれて、いいようにおもちゃにされた挙げ句、やがて後戻りできない破滅の人生を歩まざるを得ない事態にまで追い込まれて、やがて、人間社会のヒエラルキーの底辺で這いつくばって一生を終えるんです。そうに決まってます」

話しているうちにエキサイトしてきたのか、はたまた壊れたのか、だんだん考えがとんでもない方向ヘ行こうとまでしている。

<当サイト フルメタル・パニック!「恋する仔猫のミックス・アップ 前編」より抜粋>

……このように、1行が長いものですと、この「段落」の意味が薄れてしまいます。
確かにこうならないように、ある程度の長さで行を区切ればいいのですが、「長いセリフを一気に言っている」という事を表現したい時は、やっぱりこうしたくなります。管理人的に。
それに、行を区切ったとしても、ちょっと問題が出てきます。

それは、見る人によって環境が異なる、という事。
こうした文字の大きさ・1行あたりの文字数は、見る人の「モニター(画面)の解像度」で総て変わってきます。
「モニター(画面)の解像度」とは『モニターに表示される1単位当たりのピクセル数又はドット数をモニター解像度と呼び、一般に1インチ当たりのドット数(dpi)で表示される』などとモノの本にはありますが、これじゃ良く判りませんね。
画面の設定などにあるVGA(640×480)SVGA(800×600)XGA(1,024×768)SXGA(1,280×1,024)などの表示領域の事です。15インチとか17インチといったモニターの大きさとは別物です。
見た目の変化で言うならば、この数字が大きくなるに従ってアイコンや文字の大きさが小さくなっていく筈です。
どれが一番イイかというのは完全に好みですし、モニタの大きさによっても「ちょうどイイ」という印象が変わってきます。
たとえば小さい15インチのモニターでSXGA(1,280×1,024)に設定したら小さくて見づらいだろうし、逆に21インチのモニターでVGA(640×480)に設定したら大きすぎて鬱陶しいでしょう。ですから、適当と思えるものを選ばないとなりません。
使用頻度が高いと思われるのはSVGA(800×600)XGA(1,024×768)のどちらかだと思います。
ちょいと話が脱線しましたが、こういう事を考えて行を区切らないと改行具合がメッチャクチャになるって事です。
たとえば……こんな具合に。

<当サイト サクラ大戦「輝きの向う側 後編」より抜粋>

マリアは公園の手前まで脇侍を引きつけてきた。

「……もう弾が残り少ないわね」

物陰に隠れ、銃に弾を込めながら呟く。戦場ではないから、予備の
弾丸は沢山は持ち歩かない。それが仇になってしまった。

しかし、もうすぐ公園。ここまでやったのだ。最後までやりとげな
くては。

あくまで今の自分の役目は誘導と時間稼ぎだ。倒す事ではない。

そんな使命感を抱いて物陰から飛び出し、再び発砲。その時初めて
脇侍が今までとは明らかに違う反応を見せた。

小さいが、脇侍の装甲に穴が開いていたのだ。

マリアは単に適当に銃を撃っていたわけではない。同じ所に命中す
るように撃っていたのだ。いくら金属の装甲でも、全く同じ所に攻
撃を与え続ければいつかは壊れる。

しかし、止まっている目標ならまだしも、ゆっくりとはいえ動いて
いる相手にそれをやってのけるとは。恐るべき精密射撃だった。

マリアは公園の手前まで脇侍を引きつけてきた。

「……もう弾が残り少ないわね」

物陰に隠れ、銃に弾を込めながら呟く。戦場ではないから、
予備の
弾丸は沢山は持ち歩かない。それが仇になってしまった。

しかし、もうすぐ公園。ここまでやったのだ。最後までやり
とげな
くては。

あくまで今の自分の役目は誘導と時間稼ぎだ。倒す事ではな
い。

そんな使命感を抱いて物陰から飛び出し、再び発砲。その時
初めて
脇侍が今までとは明らかに違う反応を見せた。

小さいが、脇侍の装甲に穴が開いていたのだ。

マリアは単に適当に銃を撃っていたわけではない。同じ所に
命中す
るように撃っていたのだ。いくら金属の装甲でも、全く同じ
所に攻
撃を与え続ければいつかは壊れる。

しかし、止まっている目標ならまだしも、ゆっくりとはいえ
動いて
いる相手にそれをやってのけるとは。恐るべき精密射撃だ
った。

……てな具合になりかねないのです。まぁ、これは極端な例ですけどね。
まぁ、各解像度に合わせてページを作れば問題はないんですが、それだと手間ひまが数倍に跳ね上がるし、サーバーの容量だって喰う。
それに、全員がブラウザの大きさを画面一杯にしているとは限りませんし。
全体的な事を言うのなら、画面の端から端まで文字があるというのは、眼球がより多く移動するために目が疲れやすい。
ですから、両サイドに空間を空けるだけで随分と違ってきます。これはマジな話です。

「百物語?」

惣流・アスカ・ラングレーが首をかしげる。

「何、それ?」

「……まあ。みんなで集まって、恐い話をするっていう、日本の夏の風物詩ね」

と、葛城ミサトが説明する。セカンド・インパクトの影響で、一年が夏の気候になってしまった今、ちょっと説得力に欠けるセリフではある。

「はん。……」

バッカみたい、と続けようとした時、アスカはふと考えた。

『バッカみたいって答えるのは簡単だけど、こいつらの事だから、「恐い話とか苦手なんだろ?」な〜んて言うに決まってるわ。それで、話に尾ひれをつけてあっちこっちに言いふらして、このあたしに恥をかかせようって魂胆ね。そうよ。絶対にそうに決まってるわ』

深読みしすぎという気がしないでもないが、彼女は、

「へ〜え。何だか面白そうね。あたし賛成」

と言って、勢い良く手を上げる。

「シンジ君は?」

ミサトは、台所で夕食の後片づけをしている、碇シンジに声をかける。

「……え? ボクですか?」

彼は、後片づけをしながら、

「……いいですよ、ボクは。恐い話なんて知らないし」

いつもの調子でボソッと答える。

<当サイト 新世紀エヴァンゲリオン「奇譚・百物語」より抜粋>

……と、このように「表」を応用してこのようにすれば眼球運動にも優しいです。でも、ウチのようななが〜〜い文章のところでコレをやると、画面横のスクロールバーを延々と動かさねばならないので鬱陶しくなってくるのは実体験済み(>_<)。
それに「表」というものは枠の表示と文字の表示にタイムラグがあるので、若干表示が遅れてしまいます。でも、(多分)日刊日記掲示板などで管理人はあえて使ってますけどね。
そのため当サイトでは折衷案をとり、<blockquote>というタグを使ってます。余白を空けるだけなら<body>タグに「leftmargin="xx"」という物を入れて、数値分だけ余白を作るやり方もあります(単位は「ピクセル」)。
が、Internet Explorerだと画面の両端に開いてくれるけれど、それ以外のブラウザですと本当に左端のみ余白が空くというおまぬけな状態になるので、上下左右総てに数値を入力しないとなりません。こういう時は<blockquote>タグの方が手軽だと判断します。
本当は<blockquote>タグは「引用文であることを明示する」タグです。前後に改行され、両側に隙間をあけて表示されます。
が、昔はコレを使うしか方法がなかったので、今でもコレで代用する方も多いです。
スタイルシートの普及した今なら、そちらを使う方がいいと思いますが。


環境違いといえばフォントだってそう。Netscape Communicator(WIN&Mac)やInternet ExplorerでもMacintosh版になりますと、基準の文字サイズの指定はポイント単位で可能です。それを基準に「大きく」したり「小さく」したりするんです。
しかし、一番使用頻度の高いWINDOWSのInternet Explorerの場合、標準の文字の大きさの変更は不可(らしい)で、それを基準にして、フォントの大きさを「最大」「大」「中」「小」「最小」の5パターンに調整可能です(そんな訳なので「文字サイズは『中』を推奨」などと書かれても「『中』ってどれ?」となるMacユーザーが多いんですわ)。
ハッキリ言ってしまえば、あんまりアテにならないんです。
こういったページを作る時のHTML言語で指定できるフォントの大きさというのは、あくまでも相対的なものだから。OSやブラウザが変わると随分と感じが変わるのです。

そこで登場するのが「スタイルシート」
前にも書きましたが、これはOSやブラウザが変わっても、その変化が少なくデザインできます。
ココの例文以外の文章は、全部スタイルシートで文字の設定をしています。だいたいこんな感じになる訳です。
これならポイント単位での設定が可能なので、文字の大きさも行間も比較的自在に設定できますし、上の例に挙げたような事は起こりません。
だから、解像度さえ同じにすれば、こっちの意図したパターンに酷似した文字配列になってくれる訳です。
……ですが、一見完璧で問題なさそに見えるこの「スタイルシート」。欠点があるんです。
それは、WINとMacの問題でもある事です。
仕組みなどは一切判りませんが、同じ文字の大きさでも、Macの方が微妙に大きい字で見えるそうなんで。
だから、同じ解像度で同じ名前・バージョンのブラウザを使ったとしても、1行あたりの文字数が1文字2文字違ってしまうんです。その小さな違いがまた困った事になるんです。
文章の決まりとして「行の頭に来ちゃいけないもの」があります。「、」「。」「・」など、いろいろです。これが来ないように文字間を広げてみたり詰めてみたりするのが、印刷の重要なお仕事になるのですが、ブラウザの場合はその1つ前の文字と共に次の行に送ってしまうくらいでしょうか。
でも、たま〜〜に文字を送らずに行の後ろに来て、理由は判りませんが、その下の行間が他のものより広く空いてしまう事態が発生します。
……困ったもんです。
それに、スタイルシートはNetscape Communicator 4.xとかマイナーなブラウザになりますと対応が未完全という事が多いですし、いろんな意味で問題を抱えているのです。
文章書きサイトの悩みとは、文章を書くだけじゃあないんですぜ、皆様方。


文頭へ メニューへ
inserted by FC2 system