見る人に優しいウエブ作成


Directory

はじめに
CSSの利点
CSSの書式
CSSの定義
CSSの単位
継承について
CSSのプロパティ
CSS実例編 (1)
CSS実例編 (2)
CSS実例編 (3)
CSS実例編 (4)
CSS実例編 (5)


Contents

優しいウエブ作成
HTML入門
画像処理入門
ページレイアウト入門
スタイルシート入門
用語集
サポートタグ

+++ スタイルシート入門(実例編)+++

戻る
次へ

■ 行間の幅を指定する

ブラウザの標準では記載文を表示する場合、文字と文字の間隔が詰まって表示され読みにくい事があります。 スタイルシートを用いると、この文字の間隔を制御する事ができます。 line-heightプロパティを用います。line-heightは、文字の上下に均等に割り振られ設定は文字サイズを含んだ値を指定します。

■相対値での設定
ブラウザ側で設定したフォントサイズを(IEの大、中、小など)相対値では、1.0emと表わされます。 line-heightの設定で、1.4emと記載した場合には文字の上下に0.2emずつのスペースが確保されます。 140%と指定しても同じです。この場合、見ている側の文字サイズが変わっても相対的に変化します。

■絶対値での設定
絶対値での指定では、font-sizeとの関係が重要となります。font-sizeを8pt、line-heightを12ptと設定した場合には、 文字の上下に2ptのスペースが確保される事になります。 しかし、フォントの大きさは見る人のブラウザ設定で変えられる事もあり、逆に重なって表示される事もあります。 フォントサイズ変更時に全体のバランスを保つには、line-heightは相対値での設定の方がいい場合があります。

■記述例
P{line-height:1.4em;}



『注意』
IE3でもline-heightをサポートしてますが、動作が思わしくありません。 マック版では、フォントサイズとの併用及びpt(ポイント)での設定でないと恐ろしい事にまったく読めない文章になります。



■ 私の場合

次ページにフォントサイズについて記載してますが、面倒な事があって総合的に考えて

フォントサイズを指定せず、line-heightは相対値で130 or 140%に設定
IE3は、正式サポートできないのでスタイルシートをオフにして頂く




Prev | Home | Next




Copyright(C) 1999-2000, ken_yuu All Right Reserved.