Webで文章を書くときに最初にやっておくCSSの設定

Webサイトやブログを見てもらうためには、読みやすい文章を書く必要があります。読みやすい文章とは？？「結論から述べる」「1文の文章量を適切なものにする」などいろいろな技法があります。

しかし、文章を書くための技法は一長一短で身につけられるものではありません。

そのため、今回は文章を書くための技法については一旦置いておいて、行間や文字間隔・フォントなど事前の設定のみで今より見やすい文章になるための方法を紹介します。

Webで文章を書くときに最初にやっておくCSSの設定としては、この5つのプロパティがあります。設定方法については、以降の章で説明していきます。

font-family	：	ゴシック体 / 明朝体などフォントの設定を行うプロパティ
font-size	：	フォントサイズの設定を行うプロパティ
color	：	文字色の設定を行うプロパティ
line-hieght	：	行間の設定を行うプロパティ
letter-spacing	：	文字間隔の設定を行うプロパティ

「フォント」「行間」「文字間隔」の設定方法については、以前に記事を書きましたので詳細はそちらを参照してください。

「文字色」については、指定し無ければ黒色(#000)となるのですが、原色を使用するとディスプレイによっては目に痛い色となるため、少し灰色に近い「#111」～「#444」当たりを利用すると目に優しく柔らかい印象を与えられます。

font-familyの設定について

font-size, line-hieght, letter-spacingの設定について

細かな内容は上記の記事を参照していただき、ここではおすすめの設定を紹介します。

おすすめのCSS設定

font-family:"ヒラギノ角ゴ Pro W3",メイリオ,Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
font-size:14px;
line-height:2.0em;
letter-spacing:0.8pt;
color: #444;

ブラウザのデフォルト設定

デフォルト設定

おすすめの設定

おすすめ設定

同じ文章でもかなり読みやすくなったと思います。文章自体を変えなくとも、設定のみでここまで変化を与えられるため、これからWebサイトを作成する人はぜひ考慮してみて下さい。

http://webnonotes.com/web/web-article/trackback/

Web’Notes