マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > デザイン > 意外と器用なtext-decorationプロパティ

Mighty Ace Blog

マイティーBlog

デザイン

2021.09.04

意外と器用なtext-decorationプロパティ

線などの装飾を加えられるtext-decorationプロパティですが

下線の他にも色んな装飾に使えるのはご存じですか?

 

線の「形状」を変えるtext-decoration-style

text-decoration-style: wavy; /* 波線 */
text-decoration-style: double; /* 二重線 */
text-decoration-style: dashed; /* 破線 */
text-decoration-style: dotted;/* 点線 */

underlineによる下線の他にもstyleを適応させるだけで

見た目の異なる線を引くことが出来たり…

 

線の「色」を変えるtext-decoration-color

text-decoration-color: red;
text-decoration-color: inherit;/*下線を引いている親の値と同じに*/

colorを指定する事で自由に線の色を変えたり…

 

線の「太さ」を変えるtext-decoration-thickness

text-decoration-thickness: 5px;

線の太さも自由自在です!

 

まとめ

意外と器用なtext-decorationプロパティを紹介しました!

ちなみにIEでは一部対応していないものもあるので注意です△

この記事に関連するタグ

正しい効果測定は、正しい計測設定から!Googleアナリティクス設定項目チェックシート(無料)

正しい効果測定は、正しい計測設定から!Googleアナリティクス設定項目チェックシート(無料)

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.