[CSS] 一列の文字数ってどのくらいがいいの? 読みやすさを比較したよ

文字が横に約70文字続いた場合

ではまずは横に70文字ぐらいが続いた場合です。

1カラムだと横幅があるので、普通にやるとこうなってしまいます。私はこれは結構見づらいです。好きなサイトならそれでも読みますが、初めて来たサイトがこんなでは、しょげてしまいます。

文字が横に約50文字続いた場合

お次は横に50文字ぐらいが続いた場合です。

横70文字から50文字に減っただけでかなり見やすくなった感があります。いい感じではないでしょうか。

文字が横に約35文字続いた場合

次は横に35文字ぐらい。

おおー。見やすいですね。デザイン学校で35文字ぐらいがいいよーって習うんですが、これ本当ですね。私が習った時代はネットなんて一般的に全く普及してなかった時代でしたので紙媒体での話でした。でも、こういうのはネットとか関係ないですね。

文字が横に約20文字続いた場合

今度は横に20文字ほど。スマホで見るとこんな感じですよね。

見にくくはないんですが、今度は縦が長くなりすぎます。

HTML

まずはHTMLです。

<p>ここの文章の文字数を調整したいんですよね。なんというか、こういう時の例文って何を書いていいのか、結構考えるのが面倒くさいんですよ。こんな感じでいいすか?</p>

CSS

お次はCSSです。

p { width : 70% ; }

とりあえず「70%」って入れていますが、フォントの大きさや、カラムの横幅なんかによって変わってくると思います。なので、ここは適宜調整して下さい。