【初心者向け】CSSプロパティ「text-decoration-skip-ink」の使い方と効果について

CSSプロパティ「text-decoration-skip-ink」の使い方と効果を解説

デザイナー・イラストレーターの志摩🍥 です!
今回は、意外と見落としがちなCSSプロパティ「text-decoration-skip-ink」についてお話ししたいと思います。
さっそく使い方と効果を見ていきましょう。

「text-decoration-skip-ink」とは?

「text-decoration-skip-ink」は、テキストに下線や打ち消し線などの装飾を付ける際に、文字の輪郭をスキップするプロパティです。
というとちょっと難しく感じると思いますが簡単です。

「text-decoration-skip-ink」の使用方法

p {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

※適用したい要素(例:p要素)にtext-decoration-skip-ink: none;を指定することで、文字の輪郭をスキップさせます。

「text-decoration-skip-ink」の実例

実際に「text-decoration-skip-ink」を使ってみましょう。
例えば、下線を反映したい文言内に「pやq,()などの記号」がある場合、文字が下線をはみ出してしまって文字が読みにくくなってしまいます。。

そこでこのプロパティの登場です、上記コードをCSSファイルに追加して、テキスト要素にこのcssを使うと、下線が文字の輪郭を避けて描かれるため、見た目がすっきりとします。

これでテキスト要素へ下線が付く際に、文字の輪郭をスキップする効果が得られます。
ブラウザでプレビューしてみると文字がはみ出さず、下線が邪魔されずに反映されるはずです。

「text-decoration-skip-ink」の効果とブラウザのサポート状況

「text-decoration-skip-ink」は、現在のところ、主要なブラウザ(ChromeやFirefoxなど)でサポートされています。
ただし、IEではまだ使えませんので、互換性には注意が必要です。ブラウザのサポート状況は常に変動しているため、最新の情報を確認することをおすすめします。

まとめ

「text-decoration-skip-ink」は、テキストのボーダーをより美しく反映するために必須なCSSプロパティです。
ぜひ、実際に試してみて、その効果を体感してみてください!

著者:

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。