Blog

[CSS] CSSで実装するテキスト装飾 — マーカー・点(傍点)・二重線などなど

こんにちは。開発部・アニマル部署統括のPです。
今回はテキストの装飾方法についてご紹介していきます。

段落内で太文字にしたり色を変えたりするだけでもいいけど、もうちょっと強調させたいな、というときに使えますので覚えておくと良いと思います。

マーカー表示

CSSで文字を強調する。

HTML

CSS

マーカー表示2

CSSで文字を強調する。

HTML

CSS

点を付ける(傍点)

CSSで文字を強調する。

HTML

CSS

二重線

CSSで文字を強調する。

HTML

CSS

波線

CSSで文字を強調する。

HTML

CSS

※ 補足:上記CSSはそれぞれのプロパティを分けて書いたのですが「text-decoration:underline wavy red;」と書くこともできます。ただしこの書き方ではIOS Safariでは動作しませんでしたので上記のように分けておくと良いです。

マーカーやドットの色を変えたい場合、グラデーションジェネレーター(Ultimate CSS Gradient Generator)などを使うと便利ですよ。

text-decorationってunderlineくらいしか使ってなかったんですが(むしろaタグにデフォルトでついてしまいリセットするのがだるいと思ってた)、波線もあったんですね~。

ちなみにtext-decoraionで設定できる項目はこんな感じです。

text-decoration: 線の位置 線の種類 線の色;

「線の位置」

none 線なし
line-through 取り消し線
underline 下線
overline 上線

「線の種類」

solid 一重線
double 二重線
dotted 点線
dashed 破線
wavy 波線

いろいろ使いどころがありそうですね。ではでは~(=゚ω゚)ノ

タグ:css,html

2021.02.01