文字を斜体にするfont-styleプロパティ
CSSのfont-styleプロパティを使用することで、文字を
斜体にできます。値には
「normal」、「italic」、「oblique」を指定します。
英語のフォントには、筆記体のようなitalicや
斜めになった文字obliqueがありますが、日本語フォントで
2種類用意されているのはおそらくない・・・と思います。
文字を装飾したいときにtext-decorationプロパティ
文字に下線や打消し線を加えたいとき、text-decorationプロパティを
使います。
値
none 標準 デフォルトです。
underline テキストの下線をつける。
overline テキストに上線をつける。
line-through テキストに打消し線をつける。
blink テキストを点滅させる
htmlファイルのサンプルコードの最後のように
このプロパティは複数の値を設定することができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#container{ background-color: greenyellow; } p{font-size:16px;} /* 文字を斜体にします */ p.italic{font-style:italic;} /* text-decorationプロパティの設定 */ p.decorationNone{text-decoration:none;} p.decorationUnderline{text-decoration:underline;} p.decorationOverline{text-decoration:overline;} p.decorationLinethrough{text-decoration:line-through;} p.decorationBlink{text-decoration:blink;} p.decorationUnderAndOverline{ text-decoration:underline overline; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> <link rel="stylesheet" href="test.css"> </head> <body> <div id="container"> <p class="italic">(italic)文字を斜体にする。</p> <p class="decorationNone">text-decoration:noneだとこう見える。</p> <p class="decorationUnderline">decorationUnderlineだとこう見える。</p> <p class="decorationOverline">decorationOverlineだとこう見える。</p> <p class="decorationLinethrough">decorationLinethroughだとこう見える。</p> <p class="decorationBlink">decorationBlinkだとこう見える。</p> <br> <p class="decorationUnderAndOverline"> decorationUnderlineと<br> decorationOverline併用するだとこう見える。</p> <br> </div> </body> </html> |