Apollo Manroku

2010年以前に書いた記事の過去ログ

HTML形式の文章 2006年7月21日

Filed under: Internet — アポロ @ 10:51

今回の記事も「文章の整形」シリーズです。前回まではメールの文章についてのお話でしたが、今回は内容が大きく変わるので、タイトルを変えました。

主にテキスト形式で書かれるメールの文章は、前回までの記事で説明したように、いろいろと制限があり、整形にも限界があります。では、ブログやWebサイトで使われているHTML形式の文章ならどうでしょう。

たとえば、このブログ(MSN Spaces)に記事を書く場合、投稿用の入力フォームに文章を書いて、特に書式設定などをせずにそのまま投稿すると、私のパソコンではだいたい次のような見た目になります。

書式設定をしていないブログの記事の例

HTML形式なら画面の端で自動的に改行されるので、メールの時のように1行の文字数を考えながら改行する必要は全くありません。上の文章では、段落の区切りに1つだけ改行を入れてあるだけです。

ただ、このままではあまり読みやすいとは言えないので、入力フォームに備え付けられている機能で書式設定をしてみます。

書式設定してみたブログの記事の例

まず、文字のサイズを少し大きめにしてみました。ブログの記事というのは、どういうわけかどのサイトを見ても文字のサイズがとても小さく設定されていて読みづらくて困ります。上の例でもまだ小さいと感じるのですが、ここでは説明の都合上、小さめに表示しています。

それから、ここのブログでは初期設定のフォントが「MS UI Gothic」に指定されていて読みづらいので、「MS Pゴシック」というフォントに変えてみました。「MS UI Gothic」というフォントは、コンピュータの画面上でたくさんの文字を効率的に表示するために、ひらがななどが縦長にデザインされていて、通常の文章を読み書きするには適していないのです。フォント名の "UI" というのは「ユーザー・インターフェイス」の頭文字ですね(たぶん)。つまり、ウィンドウのタイトルやメニューなどに使うためのフォントです。

MS Pゴシック」の "P" は「プロポーショナル」の "P" で、その名の通り、文字ごとに幅が整えられたフォントなので、少なくとも「MS UI Gothic」よりは自然な見た目になります。「MS Pゴシック」は文章用のフォントと言えると思いますが、人によってはまだ読みづらいと感じることもあります。その点については、先の記事「文章の整形 (4) – プロポーションは美しくとも…」でも書いています。

上の例では段落を2つに分けてありますが、HTMLで段落(<p>タグ)が設定されていると、一般的なWebブラウザでは段落と段落の間に自動的に1行分程度の空白をあけて表示するようになっています。ただ、このブログの入力フォームの場合、標準の設定で文章を書いても改行時に段落が作成されないので、メールを書くときと同じように、余分に1つ改行して、見た目上の空白行を作っています。これでは、わざわざHTMLで書いている意味がないのですが……。

ブログの入力フォームの機能ではこのくらいが限界です。そこで、HTMLのソースを直接編集して、より細かくスタイルを設定してみることにしましょう。文章の構造は一番最初の「MS UI Gothic」で書かれた例と全く同じですが、スタイルを設定するだけで次のように整形することができます。

スタイルシートで整形したブログの記事の例

文字のサイズは2番目の例と同じです。行間はやや広めに設定しました。

2つの段落の間には余白(マージン)を設定したので、余分な改行は削除して、正しい文章の構造を取り戻しました。余白は上下左右の周囲にもとって、さらに読みやすくしました。

各段落の1行目は1文字分字下げしていますが、これは、メールを書くときのように空白文字を書き込んだわけではなく、スタイルシートで自動的に字下げして表示するように設定してあるだけです。空白文字には、それ自体に意味があって、その解釈は人それぞれなので、HTML文書内で整形のためにこの文字を使ってしまうと、あとあとトラブルの元となってしまうのです。たとえば、視覚障害者が音声読み上げソフトなどで読むときにその空白をどう読み上げるかということにも影響してくるでしょう。また、パソコンの環境によっては空白文字の表示の仕方にも違いがあって、フォントによっては幅が異なるためにレイアウトが崩れたり、ブラウザ上では全く表示されなかったり、場合によっては文字化けすら起こすこともあります。人によっては字下げしてある文章は読みにくいと感じることもありますが、その場合にはスタイルを無効にすることで字下げせずに表示することもできます。ところが、空白文字を使ってしまうと、そのようなことはできません。

HTML文書で重要なのは、「段落」のような文章構造であって、字下げや余白などはあくまで見た目の問題です。余分な空白や改行は文章の構造を壊してしまうことになります。そのため、HTML文書内での字下げ整形などはこのようにスタイルシートで行うべきでしょう。

さらに、より自然な見た目にするために、もう少し手間をかけてあります。

フォントは書籍などでよく使われる明朝体にしました。ClearTypeを有効にしてきれいに表示しています。漢字やひらがな部分には等幅フォント、英単語などにはプロポーショナルフォントを別々に設定しています。また、日本語の文字と英単語の間隔が広めになるようにも設定してあります。メールを書くときには空白文字を入れて見た目を調整しましたが、HTMLなら空白文字を入れずにスタイルシートだけで調整が可能です。さらに、各行を均等割付して表示するように設定し、行末のテコボコをなくしました。禁則処理も厳密に処理されるように設定したので、2つ目の例のように小文字の「っ」などが行頭に来るようなこともありません。最後に、背景に和紙風の画像を表示して、画面上の機械的な印象を少しでも和らげてみました。

同じHTML形式でも、1つめや2つめの例とは大きく違うでしょう。最後の例は、もはや高級なワープロで作成した文章に匹敵するほどの見栄えに仕上がっています。HTML形式というのは、これほどまでにすぐれたものなのですが、残念なことに、すべての人が同じようなデザインで見ることができるというわけではありません。パソコンの環境によって、あるいは、使うブラウザによっても、見た目が大きく変わってしまうのです。そのため、スタイルシートによる整形は、たとえどんなに凝ったものであっても、あくまで補助的なものに過ぎないのです。スタイルシートを無効にしてしまえば、全ての記事は1つめの例のようなシンプルなものになってしまうわけです。

そう考えると、HTML形式の文章で大切なのは、1つめの例のような、もっともシンプルな文章の構造部分だということになります。まずは、ここにしっかりとした文章を書いて、その上で、少しでも気持ちよく読んでもらうために、スタイルシートで見た目を整えるようにしましょう。

中身も大切ですが、それを伝えるためには見た目も大事。どちらもおろそかにせず、しっかりと組み立てられた文章だけが人々の心に強く響き、感動を与えられるのではないかと、そんな風に思います。

パソコンの画面上なのだからと、あまりに効率を優先しすぎて、見た目に美しくない文章など、いくらたくさんの情報が詰め込まれていようとも無価値ではないか! と、暴言を吐いてみたりもする……。

– © 2006 アポロのタロット占い

広告
 

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中