139395 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

ブログ*小鳥ぶらり鹿児島の旅*

HTML小技集*文字の間隔と行間をあける

楽天ブログ&アフィリエイトで使えるHTML小技集
画面に文字ぎっしりでも見やすいページ作り
●文字の間隔と行間をあける


日記で伝えたいことがたくさんある。。。
ついたくさん書いてしまい、画面いっぱいに文字がひしめき合ったページになったことありませんか?
読むのはとっても目が疲れるし、読み手が読むのをリタイヤしないとも限りません

そこで文字が多くても見やすい、読みやすいページを作って
最後まで文章を読んでもらえるページを作りませんか?

今回も属性 styleを使用します
前回はTABLEタグに限定してお話しましたが、属性 styleはTABLEだけに限って使われるわけではなく DIVタグにもPタグにもFONTタグにも様々な使い道があります
このページを参考にして、みなさんの使い方見つけてください♪

長い文章ってこんな風になりますよね
おいしい紅茶の入れ方
日本茶を入れる時は沸騰したお湯を冷ましてから使いますが、 紅茶は沸騰直前のお湯を使います。
しかし熱々のお湯であればいいというわけではありません。 100℃になる直前のお湯を使うことがおいしい紅茶を入れる秘訣なのです。
なぜ沸騰直前にこだわるのか…。
タンニンなどの紅茶の成分が抽出されないとおいしい紅茶にはなりません。 湯の中で茶葉が完全に開いてくれないといけないわけです。 そこで大事になってくるのが湯の中の酸素含有量です。 ポットに湯を注ぐと湯に含まれる酸素が小さい泡となって茶葉にくっつきます。 泡が茶葉を水面に押し上げてくれるのです。 対流に乗りやすくなるので、適度に水泡のついた茶葉はポットの中を何度も上下します。
文字と文字の間隔をあけました
 style="letter-spacing: 2pt;"
おいしい紅茶の入れ方
日本茶を入れる時は沸騰したお湯を冷ましてから使いますが、 紅茶は沸騰直前のお湯を使います。
しかし熱々のお湯であればいいというわけではありません。 100℃になる直前のお湯を使うことがおいしい紅茶を入れる秘訣なのです。
なぜ沸騰直前にこだわるのか…。
タンニンなどの紅茶の成分が抽出されないとおいしい紅茶にはなりません。 湯の中で茶葉が完全に開いてくれないといけないわけです。 そこで大事になってくるのが湯の中の酸素含有量です。
文字と文字の間隔をあけると比較的読みやすい文章になります
さらに行間をあけました
 style="letter-spacing:2pt;line-height:120%;"
おいしい紅茶の入れ方
日本茶を入れる時は沸騰したお湯を冷ましてから使いますが、 紅茶は沸騰直前のお湯を使います。
しかし熱々のお湯であればいいというわけではありません。 100℃になる直前のお湯を使うことがおいしい紅茶を入れる秘訣なのです。
なぜ沸騰直前にこだわるのか…。
タンニンなどの紅茶の成分が抽出されないとおいしい紅茶にはなりません。 湯の中で茶葉が完全に開いてくれないといけないわけです。 そこで大事になってくるのが湯の中の酸素含有量です。
行間をあけると文字の周りにゆとりができ、さらに読みやすくなりました
※ここで注意していただきたいのが、指定する行間の幅は
行間そのものの大きさを指定しているのではなく、
文字の大きさに対する相対的な大きさを指定している
ということです
例えば
文字の大きさが12ptでline-height:15pt;とした場合
差し引き3ptが行間の大きさとなるわけです
さらに、
style="line-height: 1.5em;"とすると、
文字の大きさに対し1.5倍の行間となります
(1emで1文字分の大きさを表す)
style="line-height: 200%;"とすると、
文字の大きさの2倍の行間となりますし
style="line-height: 3;"とすると、
文字の大きさの3倍の行間となります

※今回ご紹介したletter-spacingやline-heightはブラウザの種類によっては間隔があき過ぎて間抜けな印象になってしまいますので、いろいろなブラウザで表示をチェックすることをオススメします

次回はmarginやpaddingをなどなどを使い、
余白を有効に使って見やすいページを作る一例をご紹介します

楽天ブログ&アフィリエイトで使えるHTML小技集TOPへ


© Rakuten Group, Inc.
X