TOP ＞ スタイルシートで文字をデザイン ＞ 文字サイズを指定する
文字サイズを指定する
いままではHTMLのfontタグを使って文字のサイズを指定するのが一般的でした。ただ、fontタグを使った場合、 文字の色を変えるごとにテキストをfontタグで囲む必要が出てきます。
スタイルシートでは、font-sizeプロパティを使うことで文字の大きさを指定することが出来ます。 クラス等にうまく指定することで、HTML本文に書き込まれるタグの数を減らすことができます。
サイズの指定方法は以下のとおりです。
| 指定方法 | 内容 |
| 絶対サイズ指定 | キーワードで指定する |
| 相対サイズ指定 | 親要素に対する相対的なキーワードで指定する |
| 数値で指定 | px、ptのような単位を使って数値で指定 |
| パーセントで指定 | 親要素に対する相対的な％で指定する |
数値や％で文字サイズを指定したい場合はこちらを参考にしてください。
絶対サイズで指定する場合、使用するキーワードは次のとおりです。
| キーワード | 文字の大きさ |
| xx-small | 極小 |
| x-small | 小 |
| small | やや極小 |
| medium | 標準 （デフォルト） |
| large | やや大 |
| x-large | 大 |
| xx-large | 極大 |
相対サイズで指定する場合、使用するキーワードは次のとおりです。
| キーワード | 文字の大きさ |
| smaller | 親要素より一段階小さい |
| larger | 親要素より一段階大きい |
文字サイズを指定する。
【書き方】
font-size : [ 絶対サイズキーワード指定 | 相対サイズキーワード指定 | 数値指定 ];
- サンプルページのコードは以下の通りです。
|
<html> <head> <title>文字を斜体にするのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css"> <!-- .s1{ color: #aa0000; font-size: 30px;} .s2{ background-color: #00ff00; font-size: 18pt;} .s3{ color: #00aa00; font-size: small;} .s4{ background-color:#ff00ff; font-size: larger;} .s5{ color:#0000aa; font-size: 200%;} --> </style> </head> <body bgcolor="silver"> <p><span class="s1">この文字列はfont-sizeを30pxで指定しております。（絶対数値指定）</span></p> <p><span class="s2">この文字列はfont-sizeを18ptで指定しております。（絶対数値指定）</span></p> <p><span class="s3">この文字列はfont-sizeをsmallで指定しております。（絶対キーワード指定）</span></p> <p><span class="s4">この文字列はfont-sizeをlargerで指定しております。（相対キーワード指定）上の段落よりも一段階文字サイズが大きくなってますね。</span></p> <p><span class="s5">この文字列はfont-sizeを200％で指定しております。（相対数値指定）上の段落よりも文字サイズが2倍になってます。</span></p> </body> </html> |
[
スタイルシートで文字をデザイン ]
