text-decoration-styleのスタイル一覧

HTML・CSS

線のスタイルだけでもいろいろあります。それらのスタイルを知っていろんな表現ができるようになりましょう。

全部で5種類

説明
solid通常の直線─────
double二重線═════
dotted点線·········
dashed破線─ ─ ─ ─
wavy波線~~~~~

ブラウザやフォントによっては少し見え方が違うときがあります。

注意点

  • wavy一部の古いブラウザでは非対応(最新のChrome、Firefox、SafariではOK)
  • text-decoration-style だけでは効果がないtext-decoration-line も指定する必要あり)

まとめ

  • solid, double, dotted, dashed, wavy の5種類がある
  • ブラウザ対応を確認しながら使うとよい

使いどころに応じていろいろ試してみてください。

コメント

タイトルとURLをコピーしました