午後の庭園 /ノベルウッド 共通
| 2002年11月20日(水) | 行間をあけて読みやすくする方法・応用編 |
ノベルウッドに新規登録作品を追加しました。11/20付け登録作品
これにより、全登録件数は１３５件、うち小説作品は１２９件となりました。
「行間をあけて読みやすくする方法」の応用編です。
行間のほかに、文章の横幅などを調整しておくと、さらに読みやすさＵＰです。
↓行間・背景色・文字色・文章の横幅を設定するサンプル
<DIV style="line-height:150%;width:500px;
padding:20px;background:#EEEEEE;
color:#333333;margin:auto;">
ここに小説の本文を挟みます
</DIV>
(※表示の都合で開始タグ内に改行を入れましたが、実際には「style="〜"」の間は改行せず続けて書いてください)
画面の左右に広い余白があることが読みやすさの条件です。
また、背景色と文字色のコントラストが高すぎず低すぎずに設定されていること(＝まぶしくない＆背景に文字が埋もれてしまわない)も、読みやすさの重要なポイントです
赤文字のところは、好みに合わせて変更していく部分です。
「width」が文章の横幅のサイズ、「padding」は背景色のついている枠と、文章との間につく余白の幅、「background」が本文の背景色、「color」は文字色です。「margin:auto;」の部分は、枠全体を中央揃えするための機能を追加している設定です。これを消すと、枠全体はページの左端に寄ります。
上記サンプルでは、小説本文の背景色を、ごく淡いグレー(#EEEEEE)、文字色を濃いグレー(#333333)に設定してあります。これは一般に「読みやすい」とされる代表的な配色のひとつです。
今回紹介しましたタグは、「スタイルシート」と呼ばれる技術を利用しています。
理屈は分からない初心者さんにも、コピー＆ペーストして気軽に使ってもらえるように、上記のような書式をとりましたが、スタイルシートには、もっと洗練された記述方式が２種類あります。
(１)<HEAD>タグの中で<STYLE>タグを使用して、あらかじめ設定しておく方法。
(２)別ファイルとして用意した外部cssファイルを<LINK>タグで呼び出して使う方法です。
ページ数がかなりの数にのぼる小説掲載ページの場合、(2)の方法が一番管理しやすく、ページの模様替えも簡単なのでおすすめです。
本格的にスタイルシートの勉強を初めてみたいという人には、
【見る人に優しいウェブ作成・スタイルシート入門】などが参考になります。
中級編以降のお勉強でしたら、【とほほのスタイルシート入門】が、幾分とっつきにくいかもしれませんが、網羅的です。
良く分からない、という人は、あえて難しく考えず、サンプルをコピーしてそのまま使うのでも、読みやすさがＵＰすると思います
