神戸グルメゲリラ

Nukko Nuko, sometimes gourmet blog

pタグのcss設定で読みやすいブログにしたい。研究中

例えば以下はブログ本文中のコンテンツフレーム内とします。

f:id:tommyoctopas:20190728124359j:plain

はてなブログの文章はpタグで囲まれてます。

pタグのCSS設定でボトムにマージンが設定されていまして、1センテンスが終わると自動的に空行が入る仕掛けです。これで文章の分かれ目を見易くなり、手動で不要な改行を入れないでいいようになります。

pタグ内で文書が折り返した場合は、別のCSS設定で行間のマージンが入り、続きの文章が折り返し表示されます。

関係性は(pタグ後の空行の高さ > 折り返し行間)となっていて、もし同じだと、すべての行がピタリと引っ付いた感じとなり、切れ目を表現したい場合、自身で空行を入れなければなりません。

pタグ後の空行の高さの適切な値は、だいたいその文字高さ

折り返し行間の適切な高さは、だいたいその文字高さの50%から70%

との事らしいのですが、フォントの書体によって見え方も違いますし、その人その人によって読みやすい好みがバラバラで、自分がこれが読みやすいと設定した値が、結構外れてたりします。

どういった手法でこの関係性を導き出すのが、おおよそ万人向けの値になるか、google先生を調べるも、これだ!って記事がありません。

あとコンテンツフレーム幅も人間が目で左から右へ文章を追う時の適切な幅があるようです。この幅はフォントの大きさも関係しており、となるとpタグの設定、行間にも影響してきます。そしてスマホ向けにレスポンシブした場合と包括的なcss設定は、現在の手法では、かなり無理があるのではと思います。これはちょっと研究してみたいと思います。