「CSSで蛍光ペンっぽいアンダーライン」はtext-decorationで実現できる
2022年現在、CSSでテキストに蛍光ペン風の下線を引く方法をググるとだいたいlinear-gradientを使った記事がヒットします。しかし、いまどきはlinear-gradientを使わなくてもtext-decorationで同じような表現ができるので紹介しておきます。 結論: こういうCSSをあてる /* セレクタ名はてきとう */ .highlight { text-decoration: underline; /* 下線 */ text-decoration-thickness: 0.5em; /* 線の太さ */ text-decoration-color: rgba(255, 228, 0, 0.4); /* 線の色 */ text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */ text-decoration-
Safariにおける日本語の文章に対する下線
(Mobile )Safari 7.1より下線がディセンダーに重ならずに引かれるようになった。主にリンクの下線で確認することができる。概ね問題なく期待通りにうまく機能しているものと考えていたが、日本語の文章ではそれなりの確率(再現条件はよくわからない)でおかしくなることを知った。例えば上記スクリーンショットでは、大きめのグリフを持つ「作」や「安」などで下線が途切れているように見える。 Safariでこの機能は、現状では一部実装に留まるものの、CSSのtext-decoration-skipプロパティーを使って実装されている。仕様で定義されているinkという値の実装というわけだ。つまり同じくこのプロパティーを利用することで、挙動を他のブラウザーと合わせることが可能になる。 a { -webkit-text-decoration-skip: none; } 下線がきれいに見えるかどうかは、ディ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
