2005.05.04
テーマ： アクセス向上(301)
カテゴリ： 【実験中】
次はfont-size（フォントの大きさを指定します。フォントの大文字と小文字の比率に基づく 'font-size-adjust' も同時に指定できます）です
（font-stretchは対応ブラウザを使っていらっしゃるかたはほとんどないと思いますので）
スタイルシート>>フォント>>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>
↓こんな感じですね（＾＾）
<p style="font-size: x-small;" >x-smallを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
<p style="font-size: small;" >smallを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
<p style="font-size: medium;" >mediumを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
<p style="font-size: large;" >largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
<p style="font-size: x-large;" >x-largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
<p style="font-size: xx-large;" >xx-largeを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
□relative-size
<p style="font-size: larger;" >largerを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
<p style="font-size: smaller;" >smallerを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
□length
<p style="font-size: .5em;" >.5emを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
<p style="font-size: 1.5em;" >1.5emを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
□percentage
<p style="font-size: 80%;" >80%を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
<p style="font-size: 130%;" >130%を指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz、0123456789</p>
↓こんな感じですね（＾＾）
▲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-stretchは対応ブラウザを使っていらっしゃるかたはほとんどないと思いますので）
スタイルシート>>フォント>>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)
とても分かりやすいです
TAXI-DRIVER
さん
Re:とても分かりやすいです(05/04)
でめらら58
さん
TAXI-DRIVERさん
＞今回は視覚的にも比較しやすいですね。
＞これからも楽しみにしていますよ。
＞
＞ところで、僕も、ここ２・３日鼻水が止まりません。
＞もう少し長引きそうですね。
-----
こんばんは（＾＾）コメントありがとうございます♪
そうですね昨日の「font-weight」は文字自体の太さなので文字が大きくないとわかりにくいですよね（＾＾）
その点大きさの表示「font-size」は違いが明確ですよね。
わたくしも本日はホントくしゃみがでました（＞＜）クシュン！
(2005.05.04 22:08:04)
＞今回は視覚的にも比較しやすいですね。
＞これからも楽しみにしていますよ。
＞
＞ところで、僕も、ここ２・３日鼻水が止まりません。
＞もう少し長引きそうですね。
-----
こんばんは（＾＾）コメントありがとうございます♪
そうですね昨日の「font-weight」は文字自体の太さなので文字が大きくないとわかりにくいですよね（＾＾）
その点大きさの表示「font-size」は違いが明確ですよね。
わたくしも本日はホントくしゃみがでました（＞＜）クシュン！
(2005.05.04 22:08:04)
Re:スタイルシート（７）(05/04)
カモミール9828
さん
Re[1]:スタイルシート（７）(05/04)
でめらら58
さん
カモミール9828さん
-----
こんばんは（＾＾）コメントありがとうございます♪
仰るとおり、外部CSSは無理としても「まとめ記述」くらいさせて欲しいですよね（＞＜）
(2005.05.04 22:53:48)
-----
こんばんは（＾＾）コメントありがとうございます♪
仰るとおり、外部CSSは無理としても「まとめ記述」くらいさせて欲しいですよね（＞＜）
(2005.05.04 22:53:48)
Re:スタイルシート（７）(05/04)
jasmintea7
さん
こんばんは！
花粉症ですか？大丈夫でしょうか？
楽天のページは不親切ですよね。
他blogではリンク貼るのも、フォントの指定もクリックひとつでできますから。
わざわざタグを書くのは面倒→でも上達しないか‥。
と、先程書いてた日記をアップしたら「タグの記述が間違っています」って。確認で戻ろうとしたら日記を消してしまいました(T_T)(T_T)(T_T)
もう少しタグに慣れないといけませんね。 (2005.05.05 00:07:36)
花粉症ですか？大丈夫でしょうか？
楽天のページは不親切ですよね。
他blogではリンク貼るのも、フォントの指定もクリックひとつでできますから。
わざわざタグを書くのは面倒→でも上達しないか‥。
と、先程書いてた日記をアップしたら「タグの記述が間違っています」って。確認で戻ろうとしたら日記を消してしまいました(T_T)(T_T)(T_T)
もう少しタグに慣れないといけませんね。 (2005.05.05 00:07:36)
Re[1]:スタイルシート（７）(05/04)
でめらら58
さん
jasmintea7さん
-----
おはようございます（＾＾）コメントありがとうございます♪
本来の「ブログ」という目的から考えますと
■日記が主体、■タグ知識は不要、であって然るべきでしょうから「楽天広場」は純粋な「ブログ」とは違うかもしれませんね（＞＜）
フリーページの使い方によってはコレが280ページも作れますので、いわゆるホームページの側面も大きいと思うのです。（自由度がおおきいので）
この「楽天広場」だけの特徴は使い方によっては他社のサービスには無いオリジナリティのあるサイトつくりに生かせるように思うんですよ（^^）
（＞＜0）わたくしも日記を書いていてよく消去してしまい、何度泣いた事でしょう･･･
しかぁし「メモ帳」で下書きしましてそれをコピー＆ペーストするようになってからはそれはなくなりました（＾＾）ｖ
(2005.05.05 08:45:58)
-----
おはようございます（＾＾）コメントありがとうございます♪
本来の「ブログ」という目的から考えますと
■日記が主体、■タグ知識は不要、であって然るべきでしょうから「楽天広場」は純粋な「ブログ」とは違うかもしれませんね（＞＜）
フリーページの使い方によってはコレが280ページも作れますので、いわゆるホームページの側面も大きいと思うのです。（自由度がおおきいので）
この「楽天広場」だけの特徴は使い方によっては他社のサービスには無いオリジナリティのあるサイトつくりに生かせるように思うんですよ（^^）
（＞＜0）わたくしも日記を書いていてよく消去してしまい、何度泣いた事でしょう･･･
しかぁし「メモ帳」で下書きしましてそれをコピー＆ペーストするようになってからはそれはなくなりました（＾＾）ｖ
(2005.05.05 08:45:58)
【毎日開催】
15記事にいいね！で1ポイント
PR
Keyword Search
▼キーワード検索
Category
カテゴリ未分類
(96)【blog基本とマナー】
(8)【サイト作りの基礎】
(87)【テンプレート】
(49)【検索エンジンの理解】
(18)【検索エンジンに登録】
(5)【楽天広場のサイト】
(11)【アフィリエイト】
(12)【便利ツール】
(10)【実験中】
(76)Comments
© Rakuten Group, Inc.
