この記事は、主に自分のWebサイトをもっている人のための情報です。
CSSを知っている人ならば不要だろうから、主にHTMLの初心者向けです。
ネット上で調べ物をしていて、いろんなWebページを見ていると、時には非常に読みづらいページがある。
たとえば、画面上に文字がびっしり書かれているページとか。
もっと改行を多く入れてすれば読みやすくなるのにと思う。
また、行間が詰まっていて、読みづらいページとか。
昔のホームページ作成ソフトで作られたものに多いのではないか。
うちのサイトでも、そういうページがけっこうあった。
その場合は、CSSというテクニックを使って、ちょっと手直しすれば、かなり読みやすくなる場合もある。
その方法を紹介する。
Webサイトでは、フォントが小さすぎて読みづらいというところもある。
うちでも、百福市場のサイトの中で、そういう指摘を受けたところもあった。
15年も前につくり始めて、あの当時と比べると画面の解像度が上がって、文字が小さくなってしまう場合もある。
また、行間が狭いというところもあった。
いまでも全部直しきれていないところもある。
前述のCSSとは「Cascading Style Sheets」(カスケーディングスタイルシート)の略だ。
Webページのレイアウトを定義する規格というもの。
スタイルシートは、「*.css」というファイルを作っておいて、HTMLファイルの外部から参照することができる。
これによって、たくさんのHTMLファイルのレイアウトを、1つのCSSで一括して定義することができる。
HTMLファイルの方では、もっともシンプルな例だと、参照するCSSファイルを指定する1行を挿入するだけでOKになる。
CSSの指定方法
まず、前述の改行が少ないページについて。
これは、CSS云々の話ではなくて、改行をもっと多く入れてもらうしかない。
行間を開ける方法については、CSSを利用して以下のようにすれば良い。
HTMLページに次のようなコードを挿入することによって、簡単に行間を広げることができる。
この例は、HLTMLファイル上で<p>タグと</p>タグで文章が囲まれている領域に対して有効だ。
文章が<p>タグと</p>タグで囲まれていない場合は…。
ここで紹介するように簡単にはいかず、ちょっと厄介です。
ホームページ作成ソフトで作った場合、そういうケースは少ないと思いますが。
まず、以下の行をコピーして、HTMLファイルの<thead>タグと</head>タグで囲まれた領域の中に貼り付ける。
次に、メモ帳やテキストエディタのソフトで、次の内容をコピーして、「line.css」というファイル名で保存する。
p {
line-height: 150%;
width: 90%;
margin-left: 5%;
margin-right: 5%;
font-size: 100%;
letter-spacing: 2pt;
}
保存したファイルを、HTMLファイルと同じフォルダに置く。
まずローカルPC上でブラウザで読み込んで、どう表示されるかをチェックする。
上記のCSSファイルを、次のようにして調整できます。
「line-height:」の値を変更すれば、行間を変えられる。
「width:」は、ブラウザの幅に対する文章の表示エリアの幅を指定する。
「margin-xxxx:」は、文章の表示エリアの左右のスペース(マージン)を定義するもの。
好みに応じて変更すれば良いでしょう。
その場合、「line-height:」と「margin-xxxx:」の合計が100%になるようにします。
もともとマージンが設定されていて不要な場合は、「width:」と「margin-xxxx:」の行を削除するか、または行頭に「#」を付ければ無効になります。
フォントが小さすぎる場合は、「font-size:」の値を変更してください。
%で指定すると、各人のブラウザで設定されている標準の大きさからの相対的な値になります。
「15pt」とかで設定すれば、絶対的なポイントの値で指定できます。
文字はなるべく大きめにした方が、お年寄りなどに優しくなります。
「letter-spacing:」は、字間を設定する値です。
これも0よりは多少開けた方が読みやすくなります。
ブラウザで表示してみて問題なければ、修正したHTMLファイルとCSSファイルをWebサーバー上にアップロードする。
やってみて、何かわからない点があれば、質問してください。
HTML&スタイルシート トレーニングブック CSS3増補版
- 作者: 渡邉希久子
- 出版社/メーカー: ソーテック社
- 発売日: 2010/04/22
- メディア: 単行本
- 購入: 1人 クリック: 79回
- この商品を含むブログ (12件) を見る