2020/03/04

文字を装飾する基本のCSS一覧。とりあえずここから！

ホームページでテキスト変更くらいはできたけど、
テキストいっぱいで読みにくい。。。

そんなときには重要な箇所を太線にしたり文字サイズを大きくしたり、
文字の色を変えてみたり、
ちょっとした工夫をするだけでずいぶん読みやすくなります。

文章を読みやすくしてくれるCSSプロパティを一覧にまとめました。

文字の大きさを変更する

font-size: 16px;

ほとんどの場合、本文のフォントサイズは13px～16pxの間で指定します。
14pxを基準に、
若者向けのサイトには小さめな13pxを、
高齢者向けのサイトには大きめな16pxを指定してあげるとよいでしょう。

本文の一部を、少しサイズを大きくして強調したい場合は+2pxくらいしてあげるといい感じになります。

font-weight: bold;
font-weight: 700;

boldを指定することで太字にすることができます。
数値でも指定でき、標準が400、太字が700です。

フォントによって太さが細かく設定できるものは、100～900まで100単位の数値でも指定できます。

color: red;
color: #ff0000;

ブラウザに登録されている140色は色の名前で、それ以外はカラーコードを指定することで、文字の色を変更できます。

こういったサイトで選ぶと簡単です。
WEB色見本原色大辞典

text-align: left;
text-align: center;
text-align: right;

文章をleftで左揃い、centerで中央揃い、rightで右揃いにそろえることができます。

短い文章で詩的に伝えたいときなどは、中央揃えにすると効果的です。
逆に長い文章を中央揃えにしてしまうと、読みづらくなってしまいます。

line-height: 1.5;

行間の高さを指定できます。
pxでも指定できますが、フォントサイズの高さを 1.0とした倍率で指定することがほとんどです。

1.5～2.0の間で試してみて、実際に読みやすい数値を指定するのがオススメです。

text-shadow: 0 0 10px blue;

使う機会は少ないかもしれませんが、文字に影をつけることができます。

1つ目の数字は「横方向の影の位置」、2つ目の数字は「縦方向の影の位置」、3つ目の数字は「影のぼかしの半径」、最後に影の色を指定します。

文字の色を変えたり太さを変えたり、
少しの工夫でぐんと文章が読みやすくなり、
サイトを訪問した方々がしっかり見てくれるようになります。

それが閲覧者にきちんと伝わることにつながり、
SEO対策にもつながり。
いいことばかりなので、ぜひ文章のデザインを試してみてください。

ただやりすぎは禁物です。
伝えたいことは絞ることが伝わる文章をつくるコツです。

「この記事が役に立った！」方はこちら

フォロー