CSSに貼り付けで簡単！見やすい文章に必須の文章装飾まとめ

WEBメディアは主に文章をユーザーにじっくりと読んで貰う必要があり、その為に、どうやったらユーザーが読みやすい文章を作れるか？という所に時間を割いています。

太字にしたり、色を付けたり、枠を付けたり・・・と、文章の装飾方法は色々とありますが、今回は僕自身の保存用メモという意味も込めて、CSSに貼り付けるだけで簡単に出来る文章装飾のまとめを紹介したいと思います！

※カラーコード表はこちらを参考にしています。

見やすくする為の文章装飾編

見やすくする為の文章装飾はめちゃくちゃ大事だと思っています。

bタグstrongタグに色を付ける

bタグとstrongタグは使用すると太字にはなりますが、ただの黒の太字だとちょっと味気ないです。

色を付ける事で「こんな感じになって」、より強調されて見えませんか？

アンダーライン

文字の強調に続いて使いやすいのが、アンダーラインです。

こんな感じになります。

蛍光ペンの様にマーカーを引いた風な文字装飾

まるで蛍光ペンを引いたかの様な、マーカー風の装飾です。

こんな感じになります。

色を変えて自由に文字を装飾してみてください。

見やすくするための枠

文章を見やすくする時や、引用文などを表示する時に使用する枠を色々なパターンで紹介します。

普通の枠

まずは基本的な枠です。

ちょっとおしゃれな枠

まとめ

この更新が結構疲れる事が分かりました。

色々とアイディアが思い付いたり、新しい文章装飾を見つけたら、順次更新していきたいと思います。