初心者に分かりやすい
ホームページ作成
ブログ(レビュー カメラ 写真)
無料CGI(Perl/PHP)配布
写真

 

 

 



 

  読みやすい文章を!

 

 あなたのホームページ、文字であふれかえっていませんか?せっかく書いた文書も、読みにくい(見にくい)と誰も読んでくれないかもしれません。宝の持ち腐れになってしまいます。例えば、画面横幅いっぱいまで文字が広がっている文章。これは、目が各行の文字を追う距離が長くなってしまうので、意外と読みにくいです。 雑誌や新聞といった印刷物をを注意深く見ると気がつくのですが、各行とも文字サイズや紙面サイズにあわせて、読みやすい一行の文字数というものが決まっているのです。

 また、改行を上手に使うだけで、読みやすい文章という印象を生み出すことができます。 以下の文章を見比べて下さい。(以下、東京新聞の記事を抜粋。)

 


 宮城県警生活保安課と仙台南署は三十一日までに、市販のコンピューターのソフトウェアを無断でインターネットのホームページに載せたとして、著作権法違反(公衆送信権の侵害)の疑いで、東京都世田谷区に住む私立高校2年の少年(16才)の自宅などを家宅捜索し、パソコンやフロッピーディスクを押収した。

 同県警によると、同容疑での摘発は5月下旬、愛知県警が音楽CDを無断複製しホームページに載せたとして、札幌市の会社員を捜索したのに続き、全国で二例目という。調べによると、少年は昨年12月5日頃、米マイクロソフト社製のゲームなどを作成するためのソフトを、千葉面鎌ヶ谷市の男性会社員が無料で開放していたホームページに送信。インターネットを通じて、利用者が無料で同ソフトを取り込めるようにし、著作権者の権利を侵害した疑い。事情聴取に対し、少年は「違法行為だと分かっていた」を容疑を認めているという。


 宮城県警生活保安課と仙台南署は三十一日までに、市販のコンピューターのソフトウェアを無断でインターネットのホームページに載せたとして、著作権法違反(公衆送信権の侵害)の疑いで、東京都世田谷区に住む私立高校2年の少年(16才)の自宅などを家宅捜索し、パソコンやフロッピーディスクを押収した。

 同県警によると、同容疑での摘発は5月下旬、愛知県警が音楽CDを無断複製しホームページに載せたとして、札幌市の会社員を捜索したのに続き、全国で二例目という。

 調べによると、少年は昨年12月5日頃、米マイクロソフト社製のゲームなどを作成するためのソフトを、千葉面鎌ヶ谷市の男性会社員が無料で開放していたホームページに送信。インターネットを通じて、利用者が無料で同ソフトを取り込めるようにし、著作権者の権利を侵害した疑い。

 事情聴取に対し、少年は「違法行為だと分かっていた」を容疑を認めているという。


 

 適度な文字数で一行の文字数をある程度統一したい場合には、適当なサイズのテーブルタグを作り、border属性を0に設定して見えない状態にしておいてから、その中に文章を書い下さい。ただし、ブラウザの性質上、テーブルタグを使っている場合、テーブルタグ内の文字を全て読み込むまでは何も表示してくれないので、文章が長いときは、複数のテーブルタグを用意し、文章をいくつかに分けてそれぞれのテーブルタグ内に入れてあげる工夫が必要です。

 こんなにホームページ上の文字が読みにくいのは何故かと言えば、本来HTMLは、アルファベット用に利用されることを前提とされているため、文字レイアウトなどは全てアルファベットにあわせてあるからです。特に行間に関して言えば、日本語を使った場合非常に窮屈な感じになってしまいます。行間のコントロールは、カスケードスタイルシート(CSS)を使うことで可能です。たとえばこの文章では通常より40%増しで行間を空けて読みやすくしています。

 

 また、頻繁に色やサイズを変えている文章も読みにくくなります。書いている側からすれば、色やサイズの変更に自分の癖が反映されるため、それほど読みにくいと感じないのですが、そうではない訪問者にとっては、読みづらくなってしまいます。

 とにかく、せっかく書いた文章も、見にくいと、それだけで読んでもらえなくなるかもしれません。できるだけ見やすい文章を作るように心がけましょう。

 

  行間をコントロールする

 日本語フォントを使ったページはどうしても行間が詰まった感じがして、非常に読みにくい文章になってしまいます。そこで、スタイルシートを使って、行間をコントロールしましょう(IE3以上、NC4以上)。

<style type="text/css">
<!--
body { line-height: 120%; }
//-->
</style>

 このタグをヘッドタグの中(<head>から</head>の中のどこか)に入れておけば、そのページの全ての文字に対し、通常より20%増しの行間を入れることが出来ます。但し、これだと、ネスケで見た場合、テーブル内の文に対してはなぜか適用されないことがあります。

 そこで、テーブル内の文字にも反映させるために、<p>タグが付いている文字全てに反映させる方法があります。

<style type="text/css">
<!--
p { line-height: 120%; }
//-->
</style>

 ただし、これだと、<p>タグのみに適用されることになるので、文字全てをPタグで囲っておく必要があます。ホームページエディタを使っていれば、大抵<p>タグが自動的につくのですが、タグを書いてホームページを作っている人は、<p>タグを省く場合も多く、ちょっと不便です。そこで、<p>タグが付いている文、及び、<p>タグがついていない文に反映させるために、上記二つのCSSをまとめて表記してしまいましょう。

<style type="text/css">
<!--
body { line-height: 120%; }
p { line-height: 120%; }
//-->
</style>

 こんな感じになります。

 

 しかし、油断してはいけません。ホームページエディタによっては、テーブル内の文字に<p>タグをつけないものが多く存在し、以上の記述でも、相変わらずテーブル内の文字にはスタイルシートが反映されない場合があります。そこで、そういう場合は、テーブルの<td>タグに注目して、

<style type="text/css">
<!--
body { line-height: 120%; }
p { line-height: 120%; }
td { line-height: 120%; }
//-->
</style>

 こんな風にしてみると良いでしょう。

 これで良いのですが、場合によっては特定のブラウザで見た場合に若干やっかいな問題が生じます。画像と文字を<BR>タグで改行した際に、文字と画像が重なったり、行間指定が反映されない場合があるのです。原因は分かりませんし、まだ私もいろいろ試している段階なので、他にどんなことが生じるのか分からない点も多いのですが、そのトラブルを避けたい場合は、<p>タグ内に画像と文字を一緒にいれないように気をつけてください。

 

  リンクの下線を消す

 文章を読みにくくする要因の一つに、リンクのアンダーラインと、そのカラーがあげられます。確かに、リンクは分かりやすくしておく必要があるのですが、それが仇となる場合もあるわけです。そこで、リンクのアンダーラインをコントロールしてみましょう(IE4、NC4以上)。

<style type="text/css">
<!--
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { color:red; text-decoration: underline; }
//-->
</style>

a:link と a:visited の2行で、「訪れたことのある・ない」リンクのアンダーラインを消すことが出来ます。 a:hover の行は、リンク部分にマウスが乗った場合にその文字の色を赤くして、アンダーラインをつけるように命令しています(ただし、一部のブラウザではこのa:hover 指定は無視されます)。色の指定は「red」部分を好きな色に変えて下さい。#FF0000のような16進法の既述でも大丈夫です。

 

  部分的にリンクの色を変える

 ホームページを作っていて、たまに「この部分だけ、リンク色を変えたい」ということがあると思います。そういうときは、外側にリンクタグをつけてから、中側にフォントタグで色を付けて下さい。この順番を間違えると、色が付きません。うまくいかない場合はソースを見て、<a>タグが、<font>タグよりも外側にあるか確認して下さい。

失敗例: <font color="white"><a href="***.htm">リンク</a></font>

成功例: <a href="***.htm"><font color="white">リンク</font></a>

 

 

[ 戻る ]

 


人気記事ランキング
   

サイトマップ
コンタクト

文章や画像等の無断利用・転載はご遠慮ください。
当サイトへのリンクは原則フリーです。どのページにリンクされても構いません。
Copyright © CoolandCool. All rights reserved.