文字のサイズを変える
フォントサイズ - 種類
medium | 標準 |
xx-large | 超特大 … 最も大きいサイズ |
x-large | 特大 |
large | 大 |
small | 小 |
x-small | 極小 |
xx-small | 超極小… 最も小さいサイズ |
実際にどのような大きさで表示されるかはブラウザの種類とバージョンによって異なります。
IE6以降 は「medium=100%」、IE5.x以前 は「small=100%」です。
またIEでは「small=16px」
FireFoxでは「small=13px」なのでブラウザによって見え方が違ってきます。
文章の途中でフォントサイズを変えます↓↓
こんにちはサイズをlargeにしました
こんにちは<span style="font-size:large">サイズ</span>をlargeにしました<br>
文字の値には絶対サイズと相対サイズ、% があります。
絶対的単位は直接大きさを指定する方法(どんな環境下でも変化しない値)
絶対的単位 | mm ミリメートル 10mm = 1cm |
---|---|
cm センチメートル 1cm = 10mm | |
in インチ 1in = 2.54cm | |
pt ポイント 72pt = 1in | |
pc パイカ 1pc = 12pt |
相対的単位 | em エム 1em = 1文字分の長さ |
---|---|
ex エックスハイト 1ex = 「x」文字の長さ | |
px ピクセル 1px = 画面上の1ピクセル | |
相対的単位−割合 | % パーセント 親要素のフォントサイズに対する割合をパーセントで設定します |
ページ全体の文字の大きさを指定する
◆<head>と</head>の間に下記のようにスタイルシートを記述します。ページ全体に適用されます。例 ↓↓ ページ全体を13ピクセルの文字で作成します。
<style type="text/css">
<!--
body {font-size: 13px;
}
-->
</style>
セル、div要素内、全てを13pxにする場合<!--
body {font-size: 13px;
}
-->
</style>
<style type="text/css">
<!--
body,td,div {font-size: 13px;
}
-->
</style>
<!--
body,td,div {font-size: 13px;
}
-->
</style>
最初にページ全体の文字サイズを指定しても、文章の途中で、
個別に文字の大きさを変えられます。全体指定よりも個別指定が優先します。
フォントタグで部分的に文字サイズを変える (1〜7の数値)
フォントタグは非推奨タグです。下記に記述したものは間違いではありませんが、なるべくスタイルシートで設定しましょう。こちらにサンプルを用意しました。文字サイズ | <font size="1">文字サイズ</font> |
---|---|
文字サイズ | <font size="2">文字サイズ</font> |
文字サイズ | <font size="3">文字サイズ</font> |
文字サイズ | <font size="4">文字サイズ</font> |
文字サイズ | <font size="5">文字サイズ</font> |
文字サイズ | <font size="6">文字サイズ</font> |
文字サイズ | <font size="7">文字サイズ</font> |
<font size="数値">文字サイズ</font>
1〜7までの数値を入れます。フォントタグで部分的に文字サイズを変える (+−)
文字サイズ | <font size="-2">文字サイズ</font> |
文字サイズ | <font size="-1">文字サイズ</font> |
---|---|
文字サイズ | <font size="+0">文字サイズ</font> |
文字サイズ | <font size="+1">文字サイズ</font> |
文字サイズ | <font size="+2">文字サイズ</font> |
文字サイズ | <font size="+3">文字サイズ</font> |
<font size="数値">文字サイズ</font>
-2〜+3までの数値を入れます。フォントタグで部分的に文字サイズを変える pt, px, % などの数値を入れる)
文字サイズ | <font style="font-size:7pt;">文字サイズ</font> |
---|---|
文字サイズ | <font style="font-size:10pt;">文字サイズ</font> |
文字サイズ | <font style="font-size:15pt;">文字サイズ</font> |
文字サイズ | <font style="font-size:20pt;">文字サイズ</font> |
文字サイズ | <font style="font-size:25pt;">文字サイズ</font> |
<font style="font-size:数値pt;">文字サイズ</font>
1〜 のピクセル数値を入れます。max かなり大きい数値までOK、パソコンからはみ出さないように ...
<div>と<span>の違い コメント(メモ) 見出しをつける 段落をつける 位置を決める
●当サイトのソースは、IE6.0+のみ動作確認をしております。 それ以外のブラウザでは同じように表示されない場合がございます。ご了承下さい。
★skip ページtop