スタイルシート>>フォント>>font-size
////////////////////////////////////////////////////////////////////////
【直接指定の記述方法】
ほとんどのタグの中でstyleは指定できます。（これは楽天広場でも使えます！）
<h1 style="宣言(指定内容を宣言と呼びます)" >アクセスアップのでめらら</h1>
【CSS本来の記述方法】
div {宣言}
p {color: red;}
td {color: red;}
･･･etc
////////////////////////////////////////////////////////////////////////
■フォント
フォントの指定には以下のような種類があります。
□font-family（フォントのデザインの種類を指定します）
□font-style（通常体、イタリック体、斜体を区別して指定します）
□font-variant（英数文字の場合に、小文字／Small Caps を区別して指定します）
□font-weight（フォントの太さを指定します）
□font-size（フォントの大きさを指定します。フォントの大文字と小文字の比率に基づく 'font-size-adjust' も同時に指定できます）
////////////////////////////////////////////////////////////////////////
■font-size（フォントの大きさを指定します。フォントの大文字と小文字の比率に基づく 'font-size-adjust' も同時に指定できます）
□absolute-size（キーワード指定で、7 種類あります。CSS2 では各々 1.2 倍ずつ大きくなります）
□relative-size（指定無しの値よりも大きい「larger」、小さい「smaller」を指定します）
□length（いちばん使うサイズ指定ではないでしょうか※負の数字は存在しません）
「相対値指定の単位、em: フォントの大きさ 'font-size' を 1 、ex: 小文字の高さ 'x-height' を 1、px: ピクセル。解像度に依存してサイズが決定」
「絶対値指定の単位 、in: インチ=2.54 cm、cm: センチメートル、mm: ミリメートル、pt: ポイント=1/72 インチ、pc: パイカ=12 ポイント」
□percentage（継承したフォントのサイズを 100% として計算します。120%=1.2emとなります。※負の数字は存在しません）
□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）
■font-size-adjust（そこで使われているフォントのアスペクト値を指定します。アスペクト値とは、大文字と小文字の高さの比率です。Mozilla でのみ有効のようです）
▲直接指定の記述方法
□absolute-size
<p style="font-size: xx-small;" >xx-smallを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
xx-smallを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789
<p style="font-size: x-small;" >x-smallを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
x-smallを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789
<p style="font-size: small;" >smallを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
smallを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789
<p style="font-size: medium;" >mediumを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
mediumを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789
<p style="font-size: large;" >largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789
<p style="font-size: x-large;" >x-largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
x-largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789
<p style="font-size: xx-large;" >xx-largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
xx-largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789
□relative-size
<p style="font-size: larger;" >largerを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
largerを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789
<p style="font-size: smaller;" >smallerを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
smallerを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789
□length
<p style="font-size: .5em;" >.5emを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
.5em;を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789
<p style="font-size: 1.5em;" >1.5emを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
1.5emを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789
□percentage
<p style="font-size: 80%;" >80%を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
80%を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789
<p style="font-size: 130%;" >130%を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
130%を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789
▲CSS本来の記述方法
<style type="text/css">
<!--
P {
font-family: 'Times New Roman';
font-style: normal;
font-variant: small-caps;
font-weight: 900;
font-size: 80%;
}
-->
</style>
フォントサイズの考え方
絶対値指定をホームページで使うことは全くお勧めいたしません。ユーザーの環境に全く関係なく大きさが決定しているわけですのでメリットが何らありません（＞＜）
px指定は非常に多く使われているのですが、そのメリットとしてはブラウザの指定やユーザーの設定に関係なくウェッブサイトのデザインが崩れないのでサイト全体の構成がしやすいことがあげられます。
これと逆なのがabsolute-size、em、percentageなどですが、ブラウザで指定することで大きな文字で見たい、小さい字でみたいなど簡単に変更できるメリットがあります。当然デメリットとしてウエッブデザインに注意しなければ大小でたちまちデザインが崩壊してしまいます（＞＜）
したがって、
px指定で指定したい場合は、なるべく大勢のユーザーに読みづらくないサイズを設定しデザインを固定して良いようにしたい
absolute-size、em、percentageなどで指定したい場合は、ブラウザの指定やユーザーの設定で壊れてしまわないデザインに気をつける。
ことなのではないかと思います。
*****************************************************
【庶事所感】
本日は楽天さんのメンテナンスとのことでしばらく日記がかけないとのことでちょいとお出かけいたしましたので日記もこんな時間になってしまいました（＠＠）
天気は良かったですが、風が強く、たくさんくしゃみをさせていただきました（＞＜）海の近くになるとやっぱり風は強いのだとあらためて納得しました。
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
-
fontバリエーション(2) 2005.08.26 コメント(11)
-
スタイル一覧（後編） 2005.06.19 コメント(165)
PR
Keyword Search
Category
カテゴリ未分類
(96)【blog基本とマナー】
(8)【サイト作りの基礎】
(87)【テンプレート】
(49)【検索エンジンの理解】
(18)【検索エンジンに登録】
(5)【楽天広場のサイト】
(11)【アフィリエイト】
(12)【便利ツール】
(10)【実験中】
(76)Comments
