安売りセールでは、元々値段の上に線を引いて新しい値段を書くことがあります。例えば、
Webページでは、text-decorationを利用して、実現します。
text-decoration
文へ様々な線を引くCSSのプロパティです。
個別指定
text-decoration-line
線の位置を設定するプロパティです。
値
underline
overline
line-through
text-decoration-line: underline; /* 下線 */
text-decoration-line: overline; /* 上線 */
text-decoration-line: line-through; /* 打消し線 */
日本語 English
日本語 English
日本語 English
text-decoration-color
線の色を設定するプロパティです。
値
色を設定します。
text-decoration-line: line-through; /* 打消し線 */
text-decoration-color: red; /* 赤線 */
日本語 English
text-decoration-style
線の種類を設定するプロパティです。
値
solid
double
dotted
dashed
wavy
text-decoration-style: solid; /* 一本線 */
text-decoration-style: double; /* 二重線 */
text-decoration-style: dotted; /* 点線 */
text-decoration-style: dashed; /* 破線 */
text-decoration-style: wavy; /* 波線 */
日本語 English
日本語 English
日本語 English
日本語 English
日本語 English
text-decoration-thickness
線の太さを設定するプロパティです。
値
長さを指定します。
auto
初期値。自動で線の太さを決めます。
from font
フォントファイルに含まれている推奨値を適応させます。推奨値がなければ、autoと同じになります。
text-decoration-thickness: 5px; /* 5px */
text-decoration-thickness: auto; /* 自動 */
text-decoration-thickness: from font; /* font指定 */
text-decoration-thickness: 20%; /* font幅の20％ */
日本語 English
日本語 English
日本語 English
日本語 English
一括指定
書式
text-decoration: 値 ;
一括指定のプロパティです。
値
個別指定の値を書くことで、装飾を指定できます。複数設定する場合には、値と値の間に半角スペースを置き、区切ります。
none
線を引きません。<a>の下線を無効にする場合などに使います。
text-decoration: none;
text-decoration: line-through red;
text-decoration: overline line-through underline red;
日本語 English
日本語 English
日本語 English
text-decoration-skip-ink
※text-decorationの仲間ではなく、独立したプロパティです。
上線と下線が文字の上を横切る場合、文字を避けて引くかどうかを指定します。
書式
text-decoration-skip-ink: 値 ;
値
none
文字上を通過する場合には、線を中断しません。
auto
初期値。自動で文字上を通過する場合には、線を中断します。
all
日本語、中国語、韓国語用の設定値です。autoと同じ動作をします。
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;
日本語 English संस्कृत
日本語 English संस्कृत
日本語 English संस्कृत