アクセス向上大失敗 www.igros.net
Last updated 2004/8/15
コメントバック 対応

段落(改行)の幅 -ホームページリニューアル-

次頁 > スタイルシート
[PR]特集 Amazon.co.jp レコメンドコンテンツ



読みやすい文字?、これはフォントの大きさや色だけじゃないことに気づきました。
当初のリニューアルでは考えていなかった項目ですが、先のWordからフォントサイズを考えた際、ピィ〜ン!ときました。
以前は思いつくままに文章を書き、適当な位置(経験と勘)で改行タグ<BR>や段落タグ<P>を書き殴り、出来上がったページを自分で確認しながら、補正をしていましいた。
だいたいこの辺りで1行あけた方が読みやすいかな って、そんな感じです。
きっとみなさんも似たより寄ったりではないでしょうか?

挿絵:イメージ:2.10KB では、何故適当な位置で1行あけるのか?、これは上述の通り、文章全体のバランスとか読みやすいとか、そう言うことになると思いますが、何よりブラウザで表示される行間があまりに狭いことが一因しているように思います。
さっそく、デフォルトの行間について検証してみました。

結果、英語が苦手なので、情けないようですが、ブラウザに表示されている画面をキャプチャーコピーし、Word文書と実寸レベルで比較した結果、たぶん...、フォント縦長で後3pt付加され、実質行間は0ptになっているようです?
それに...、文字をマウスでなぞってハイライトすると、行間がくっ付いていますし。
つまり、見た目行間は3ptになっているわけです。

Wordでは行間1行とか1.5行とか、そのフォントサイズによって適当なマージン(幅)を確保する設定が一般的ですが、ちなみにフォントサイズ11の場合、フォント縦長で前後7pt付加され、見た目行間は14ptでした。
これをブラウザに合わせると、14pt-3ptで実質9ptの行間を与えれば同じになると思われます。
で、実際にやってみたのですが、正直、かなり「間抜け」な状態になってしまいました。(笑)

でもせっかくここまで調べてみたことだし、やっぱりちょっとこだわってみようかと、色々サイズを変更し、自分なりの行間を求めて悪戦苦闘した結果、4ptほどの行間(見た目7pt)で落ち着いた次第です。
ここでもスタイルシートを用いて、line-height: 140%; と与えることにしました。
色々グタグタ言ってますが、英語が苦手なため、実際の仕様や幅について、あっている保証は一切ありませんのでご了承くださいね。

ここだけの話(書いちゃったら、ここだけにはなりませんが)、line-height: 140%; で、リニューアル前のHTML文章をコピー&ペーストで移行していったところ、段落<P>位置が妙に合っていないことに気づきました。
つまり、改行幅をちょっと変えただけで、文章全体のバランスは大きく変わるものだなぁ〜と、垣間見えた気がします。


<<< トップ << テーマトップ < 前頁次頁 > スタイルシート >>

www.igros.net
[PR]特集 Amazon.co.jp レコメンドコンテンツ



Copyright(C) アクセス向上大失敗 All Rights Reservd.
version2.0