こんにちは。開発部・アニマル部署統括のPです。
今回はテキストの装飾方法についてご紹介していきます。
段落内で太文字にしたり色を変えたりするだけでもいいけど、もうちょっと強調させたいな、というときに使えますので覚えておくと良いと思います。
マーカー表示
CSSで文字を強調する。
HTML
|
1 2 |
<h4>マーカー表示</h4> <p>CSSで<span class="marker">文字を強調</span>する。</p> |
CSS
|
1 2 3 |
.marker { background:linear-gradient(transparent 60%, #FFC300 60%); } |
マーカー表示2
CSSで文字を強調する。
HTML
|
1 2 |
<h4>マーカー表示2</h4> <p>CSSで<span class="marker-2">文字を強調</span>する。</p> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.marker-2 { position:relative; z-index:1; } .marker-2::after { content:""; position:absolute; top : 0; left : 0; bottom : 0; right : 0; background:linear-gradient(transparent 60%, #FFC300 60%); animation : markerAnimation 3s ease-in infinite; z-index:-1; } @keyframes markerAnimation { 0% { right : 100%; } 25% { right : 0; } 100% { right : 0; } } |
点を付ける（傍点）
CSSで文字を強調する。
HTML
|
1 2 |
<h4>点を付ける（傍点）</h4> <p>CSSで<span class="dots">文字を強調</span>する。</p> |
CSS
|
1 2 3 4 5 6 7 |
.dots { padding-top: .4em; background-position: top -7px left; background-repeat: repeat-x; background-image: radial-gradient(red 10%, transparent 15%); background-size: 1em 1em; } |
二重線
CSSで文字を強調する。
HTML
|
1 2 |
<h4>二重線</h4> <p>CSSで<span class="double">文字を強調</span>する。</p> |
CSS
|
1 2 3 |
.double { border-bottom: double 2px red; } |
波線
CSSで文字を強調する。
HTML
|
1 2 |
<h4>波線</h4> <p>CSSで<span class="wave">文字を強調</span>する。</p> |
CSS
|
1 2 3 4 5 |
.wave { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } |
※ 補足：上記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