ブログや解説は文章をつらつらと書き連ねるだけではなかなか読みずらいものです。
要点を強調・装飾することで、全文を細かく読まなくて理解してもらいやすくなります。
今回は、太文字・赤文字だけではなく、マーカー風の装飾などを載せています。
サイトの雰囲気に合わせて使ってください。
CSSでテキスト装飾をするための基本知識と準備
まず、テキスト装飾でCSSを使うには基本的にはclassタグを使います。
装飾したいところに「<span class=”○○○○”> テキスト</span>」のような形でテキストを囲みます。
そして、CSSファイル「.○○○○{}」の形式でCSSを書いていきますが、よく分からないという人もイーブロではコピペで使えるように書いてるので安心してください。
Class名を管理しやすいもの変更したり、色なども自由に変更して好みの装飾に変えてくださいね。
テキストを色々な方法で装飾しよう【基本編】
テキストのレイアウトはHTMLタグでもできるものもありますが、CSSの方が良いですよね。
ここでは基本的な装飾を記述していきます。
テキストを太文字にする
文章を強調させることで見やすくなります。
<div class="fb">テキスト</div>
.fb {
font-weight:bold;
}
テキストを大文字にする
文章を強調させることで見やすくなります。
<div class="bf">テキスト</div>
.bf {
font-size;24px;
}
フォントサイズは自由に変更できます。
元のフォントとのバランスを考えて、「font-size:○px」の数字を変えてください。
テキストに下線（アンダーライン）を引く
文章を強調させることで見やすくなります。
<div class="ul">テキスト</div>
.ul {
border-bottom;1px solid #000000;
}
二重線、太線、色付きなど様々なアンダーバーが引けます。
後ほど、複数のパターンを紹介するので参考にしてください。
背景に色を付ける
文章を強調させることで見やすくなります。
<div class="bc">テキスト</div>
.bc {
background-color;#ff8aa7;
}
背景色を変えることでより、効果的に強調することができます。
背景の色は「background-color:#○○○○○○」のシャープから後ろを、”色見本”で見て好きな色に変更してください。
テキストを色々な方法で装飾しよう【基本実用編】
基本的なCSSの装飾だけでは物足りないので、ここからは更に実用的で見栄えのよいものを解説します。
太文字＆色付き文字
文章を強調させることで見やすくなります。
<div class="bcr">テキスト</div>
.bcr {
color:#c40000;
font-weight:bold;
}
これも「color:#○○○○○○」のシャープ以降を”色見本”で見て、文字の色を好きな色に変更してください。
大文字＆太文字＆色付き文字
文章を強調させることで見やすくなります。
<div class="bbr">テキスト</div>
.bbr {
color:#c40000;
font-size;28px;
font-weight:bold;
}
「color:#○○○○○○」のシャープ以降を”色見本”で見て、文字の色を好きな色に変更してください。
また、フォントサイズも元のフォントとのバランスを考えて、「font-size:○px」の数字を変えてください。
二重線＆色付き文字
文章を強調させることで見やすくなります。
<div class="uwl">テキスト</div>
.uwl{
color:#c40000;
border-bottom:3px double #000000;
}
「color:#○○○○○○」のシャープ以降を”色見本”で見て、文字の色を好きな色に変更してください。
「border-bottom」はカラーコードや○pxの数字を変えて太さを変更してください。
色付き下線＆色付き文字
文章を強調させることで見やすくなります。
<div class="ubr">テキスト</div>
.ubr{
color:#c40000;
border-bottom:1px solid #c40000;
}
「color:#○○○○○○」のシャープ以降を”色見本”で見て、文字の色を好きな色に変更してください。
「border-bottom」はカラーコードや○pxの数字を変えて太さを変更してください。
同じに色にすることで強調性が増します。
色付き背景＆白抜き文字
文章を強調させることで見やすくなります。
<div class="cbw">テキスト</div>
.cbw{
color:#fff;
background-color:#db0000;
}
「color:#○○○○○○」のシャープ以降を”色見本”で見て、文字の色を好きな色に変更してください。
「border-bottom」はカラーコードや○pxの数字を変えて太さを変更してください。
同じに色にすることで強調性が増します。
少しだけおしゃれに分かりやすく装飾しよう
蛍光ペン・マーカー風装飾（太）
文章を強調させることで見やすくなります。
<div class="mbl">テキスト</div>
.mbl{
background: linear-gradient(transparent 40%, #ff426b 0%);
}
蛍光ペン・マーカー風装飾（中）
文章を強調させることで見やすくなります。
<div class="mblm">テキスト</div>
.mblm{
background: linear-gradient(transparent 60%, #ff426b 0%);
}
蛍光ペン・マーカー風装飾（細）
文章を強調させることで見やすくなります。
<div class="mbld">テキスト</div>
.mbld{
background: linear-gradient(transparent 60%, #ff426b 0%);
}
マーカーの太さは「transparent」のパーセントの値によって変わります。
パーセントの値を大きくすると細くなります。
透過性のある淡い感じの蛍光マーカーペン（太）
文章を強調させることで見やすくなります。
<div class="smbl">テキスト</div>
.smbl{
background: linear-gradient(transparent 40%, #ff426b 100%);
}
グラデーション蛍光マーカーペン（太）
文章を強調させることで見やすくなります。
<div class="mgbl">テキスト</div>
.mgbl{
background: linear-gradient(#ff8ca5, #c06eff);
}
グラデーションの色は「linear-gradient」のカラーコードで変更できます。
linear-gradient(上の色, 下の色)となるので、背景を好きな組み合わせで設定しましょう。
太文字＆蛍光マーカーペン（太）
文章を強調させることで見やすくなります。
<div class="bmb">テキスト</div>
.bmb{
font-weight:bold;
background: linear-gradient(transparent 40%, #ff426b 0%);
}幅が広い色背景＆白抜き文字
文章を強調させることで見やすくなります。
<div class="wbw">テキスト</div>
.wbw{
color:#fff;
background-color:#db0000;
padding:3px 8px;
}
幅が広いグラデーション蛍光マーカーペン（太）＆白抜き文字
文章を強調させることで見やすくなります。
<div class="gbw">テキスト</div>
.gbw{
color:#fff;
padding:3px 8px;
background: linear-gradient(#ff8ca5, #c06eff);
}
太い色付きの破線
文章を強調させることで見やすくなります。
<div class="hb">テキスト</div>
.hb{
border-bottom:3px dashed #ff426b;
}
テキストの装飾はシンプルなものを効果的に使う
テキストの装飾は過剰に派手にすると余計に見づらくなってしまします。
また、装飾の種類を多く使いすぎても、どの装飾がどのような意味があるのか分かりづらくなってしまいます。
装飾は好みのものでもいいと思いますが、どんな時にどのような装飾を使うのかをしっかりルールを決めて使ってください。
特に新たに取り入れたばかりの時は、派手なものを複数選びがちになりますので、なるべくシンプルなものも意識してください。
また、読みやすくするための基本的なことを、別記事で書いてるので良ければ参考にしてください。
おすすめ記事ＣＳＳの枠（囲み枠・ボックス）コピペで利用できるサンプル33選！
おすすめ記事CSSだけで動きのあるボタンを作る。コピペだけで使えるサンプル集15選！
