[CSS] 文字を装飾する
CSSで文字を装飾するサンプルです。
太字
文字を太字にする
- 【CSS】
- font-weight:bold;
|
1 |
<p style="font-weight:bold;">あいうえお</p> |
- 【結果】
- あいうえお
斜体
文字を斜体にする
- 【CSS】
- font-style:italic;
|
1 |
<p style="font-style:italic;">あいうえお</p> |
- 【結果】
- ABCDE
取消し線
文字に取消し線を引く
- 【CSS】
- text-decoration:line-through;
|
1 |
<p style="text-decoration:line-through;">あいうえお</p> |
- 【結果】
- あいうえお
ちなみに２重取消し線はCSSにありません。
下線
文字に下線を引く
- 【CSS】
- text-decoration:underline;
|
1 |
<p style="text-decoration:underline;">あいうえお</p> |
- 【結果】
- あいうえお
上線
文字に上線を引く
- 【CSS】
- text-decoration:overline;
|
1 |
<p style="text-decoration:overline;">あいうえお</p> |
- 【結果】
- あいうえお
２重下線
CSSに２重下線というプロパティはありませんが、
２重枠線をbottomにのみ指定して２重下線っぽく見せることはできます。
文字に２重下線を引く
- 【CSS】
- border-bottom:3px double black;
|
1 |
<span style="border-bottom:3px double black;">あいうえお</span> |
- 【結果】
- あいうえお
上付き文字
上付き文字にする
- 【CSS】
- vertical-align:super;
|
1 |
<p>通常文字<span style="vertical-align:super;">上付き文字</span></p> |
- 【結果】
- 通常文字上付き文字
CSSでなく、HTMLタグ <sup>～</sup> を使ってもＯＫです。
下付き文字
下付き文字にする
- 【CSS】
- vertical-align:sub;
|
1 |
<p>通常文字<span style="vertical-align:sub;">下付き文字</span></p> |
- 【結果】
- 通常文字下付き文字
CSSでなく、HTMLタグ <sub>～</sub> を使ってもＯＫです。