[CSS] 文字を装飾する

CSSで文字を装飾するサンプルです。

太字

文字を太字にする

【CSS】
font-weight:bold;
【結果】
あいうえお

斜体

文字を斜体にする

【CSS】
font-style:italic;
【結果】
ABCDE

取消し線

文字に取消し線を引く

【CSS】
text-decoration:line-through;
【結果】
あいうえお

ちなみに2重取消し線はCSSにありません。

下線

文字に下線を引く

【CSS】
text-decoration:underline;
【結果】
あいうえお

上線

文字に上線を引く

【CSS】
text-decoration:overline;
【結果】
あいうえお

2重下線

CSSに2重下線というプロパティはありませんが、
2重枠線をbottomにのみ指定して2重下線っぽく見せることはできます。

文字に2重下線を引く

【CSS】
border-bottom:3px double black;
【結果】
あいうえお

上付き文字

上付き文字にする

【CSS】
vertical-align:super;
【結果】
通常文字上付き文字

CSSでなく、HTMLタグ <sup>~</sup> を使ってもOKです。

下付き文字

下付き文字にする

【CSS】
vertical-align:sub;
【結果】
通常文字下付き文字

CSSでなく、HTMLタグ <sub>~</sub> を使ってもOKです。

コメント

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