2005.04.30
テーマ： アクセス向上(301)
カテゴリ： 【実験中】
スタイルシート（３）
ちょっとややこしくなってきますので、「パンくず」表示させていただきますね（＾＾）
スタイルシート>>フォント>>font-family
////////////////////////////////////////////////////////////////////////
【まずは･･･】
スタイルシートの最大の魅力はcssファイルを使用することで、htmlソースを簡素化させることでの更新時の利便性を図ることと検索エンジンへの対応の期待ですが、段階的に理解するため
1.)スタイルの直接指定での使用方法とそれぞれの機能
2.)クラス使用のhead内の記述
3.)cssファイルの作成
【直接指定の記述方法】
ほとんどのタグの中でstyleは指定できます。（これは楽天広場でも使えます！）
<h1 style="宣言(指定内容を宣言と呼びます)" >アクセスアップのでめらら</h1>
<div style="color: red;" >アクセスアップのでめらら</div>
<span style="color: red;" >アクセスアップのでめらら</span>
<p style="color: red;" >アクセスアップのでめらら</p>
<th style="color: red;"
<td style="color: red;" >アクセスアップのでめらら</td>
･･･etc
【CSS本来の記述方法】
ソースのheadタグの中や外部ファイルを作って記述する場合（楽天ではできません;＞＜）
p {color: red;}
td {color: red;}
･･･etc
////////////////////////////////////////////////////////////////////////
■フォント
フォントの指定には以下のような種類があります。
□font-family（フォントのデザインの種類を指定します）
□font-style（通常体、イタリック体、斜体を区別して指定します）
□font-variant（英数文字の場合に、小文字／Small Caps を区別して指定します）
□font-weight（フォントの太さを指定します）
□font-stretch（レンダリングするフォントの形の幅を指定します）
□font-size（フォントの大きさを指定します。フォントの大文字と小文字の比率に基づく 'font-size-adjust' も同時に指定できます）
////////////////////////////////////////////////////////////////////////
■font-family（フォントのデザインの種類を指定します）
□具体的フォント名で指定（対象の字体フォントがインストールされていませんと表示されません）
※フォント名にスペースが含まれる場合は、ダブルクォーテーション（ " ）かシングルクォーテーション（ ' ）で囲みます
【例】'ＭＳ Ｐゴシック'や"ＭＳ Ｐゴシック"
▲直接指定の記述方法
<p style="font-family:江戸勘亭流" >江戸勘亭流体のフォント</p>
↓こんな感じですね（＾＾）
▲CSS本来の記述方法
<style type="text/css">
<!--
P {
font-family: "ＭＳ Ｐ明朝";
}
-->
</style>
□体系フォントの種類で指定（汎用性を考えたものでgeneric-familyといいます）
sans-serif … ゴシック体系
serif … 明朝体系
cursive … 筆記体系
fantasy … 装飾系
monospace … 等幅系
▲直接指定の記述方法
<p style="font-family:sans-serif" >sans-serifのフォント</p>
↓こんな感じですね（＾＾）
<p style="font-family:serif" >serifのフォント</p>
↓こんな感じですね（＾＾）
<p style="font-family:cursive" >cursiveのフォント</p>
↓こんな感じですね（＾＾）
<p style="font-family:fantasy" >fantasyのフォント</p>
↓こんな感じですね（＾＾）
<p style="font-family:monospace" >monospaceフォント</p>
↓こんな感じですね（＾＾）
▲CSS本来の記述方法
<style type="text/css">
<!--
P {
font-family:serif;
}
-->
</style>
□いくつか候補を用意する
▲直接指定の記述方法
<p style="font-family: "候補 1","候補 2","候補 3"; " >インストールされているフォント</p>
【例】
<p style="font-family:Gergia, "ＭＳ 明朝", serif" >インストールされているフォント</p>
▲CSS本来の記述方法
<style type="text/css">
<!--
P {
font-family:"候補 1","候補 2","候補 3";
}
-->
</style>
*****************************************************
【庶事所感】
『タレント・萩本欽一（６３）が監督を務める野球クラブチーム「茨城ゴールデンゴールズ」の公式応援歌「筑波山麓Ｇｏ★Ｇｏ伝説」の公開レコーディングが２８日、都内で行われた。
作詞、作曲を担当したメーンボーカルのトータス松本に加え、バックコーラスに欽ちゃんと、女性投手の片岡安祐美選手（１８）、さらに藤本博史（２８）、仁平翔（１８）、雀ケ野賢太（２１）、鹿取真央（１９）のイケメン４選手が参加。ノリノリで見事にそろった歌声を披露した。』
なんだか毎日、ニュース番組コンテンツが悲しく辛い情報が多くて、本当に心の痛む記事ばかりなのですが、そんな中で今日目に入ったのがこの記事。
トータス松本さん、その場で『欽ちゃん球団』に入団ですって（＾＾）
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
ちょっとややこしくなってきますので、「パンくず」表示させていただきますね（＾＾）
スタイルシート>>フォント>>font-family
////////////////////////////////////////////////////////////////////////
【まずは･･･】
スタイルシートの最大の魅力はcssファイルを使用することで、htmlソースを簡素化させることでの更新時の利便性を図ることと検索エンジンへの対応の期待ですが、段階的に理解するため
1.)スタイルの直接指定での使用方法とそれぞれの機能
2.)クラス使用のhead内の記述
3.)cssファイルの作成
【直接指定の記述方法】
ほとんどのタグの中でstyleは指定できます。（これは楽天広場でも使えます！）
<h1 style="宣言(指定内容を宣言と呼びます)" >アクセスアップのでめらら</h1>
<div style="color: red;" >アクセスアップのでめらら</div>
<span style="color: red;" >アクセスアップのでめらら</span>
<p style="color: red;" >アクセスアップのでめらら</p>
<th style="color: red;"
<td style="color: red;" >アクセスアップのでめらら</td>
･･･etc
【CSS本来の記述方法】
ソースのheadタグの中や外部ファイルを作って記述する場合（楽天ではできません;＞＜）
p {color: red;}
td {color: red;}
･･･etc
////////////////////////////////////////////////////////////////////////
■フォント
フォントの指定には以下のような種類があります。
□font-family（フォントのデザインの種類を指定します）
□font-style（通常体、イタリック体、斜体を区別して指定します）
□font-variant（英数文字の場合に、小文字／Small Caps を区別して指定します）
□font-weight（フォントの太さを指定します）
□font-stretch（レンダリングするフォントの形の幅を指定します）
□font-size（フォントの大きさを指定します。フォントの大文字と小文字の比率に基づく 'font-size-adjust' も同時に指定できます）
////////////////////////////////////////////////////////////////////////
■font-family（フォントのデザインの種類を指定します）
□具体的フォント名で指定（対象の字体フォントがインストールされていませんと表示されません）
※フォント名にスペースが含まれる場合は、ダブルクォーテーション（ " ）かシングルクォーテーション（ ' ）で囲みます
【例】'ＭＳ Ｐゴシック'や"ＭＳ Ｐゴシック"
▲直接指定の記述方法
<p style="font-family:江戸勘亭流" >江戸勘亭流体のフォント</p>
↓こんな感じですね（＾＾）
江戸勘亭流体のフォント
▲CSS本来の記述方法
<style type="text/css">
<!--
P {
font-family: "ＭＳ Ｐ明朝";
}
-->
</style>
□体系フォントの種類で指定（汎用性を考えたものでgeneric-familyといいます）
sans-serif … ゴシック体系
serif … 明朝体系
cursive … 筆記体系
fantasy … 装飾系
monospace … 等幅系
▲直接指定の記述方法
<p style="font-family:sans-serif" >sans-serifのフォント</p>
↓こんな感じですね（＾＾）
sans-serifのフォント
<p style="font-family:serif" >serifのフォント</p>
↓こんな感じですね（＾＾）
serifのフォント
<p style="font-family:cursive" >cursiveのフォント</p>
↓こんな感じですね（＾＾）
cursiveのフォント
<p style="font-family:fantasy" >fantasyのフォント</p>
↓こんな感じですね（＾＾）
fantasyのフォント
<p style="font-family:monospace" >monospaceフォント</p>
↓こんな感じですね（＾＾）
monospaceフォント
▲CSS本来の記述方法
<style type="text/css">
<!--
P {
font-family:serif;
}
-->
</style>
□いくつか候補を用意する
▲直接指定の記述方法
<p style="font-family: "候補 1","候補 2","候補 3"; " >インストールされているフォント</p>
【例】
<p style="font-family:Gergia, "ＭＳ 明朝", serif" >インストールされているフォント</p>
▲CSS本来の記述方法
<style type="text/css">
<!--
P {
font-family:"候補 1","候補 2","候補 3";
}
-->
</style>
*****************************************************
【庶事所感】
『タレント・萩本欽一（６３）が監督を務める野球クラブチーム「茨城ゴールデンゴールズ」の公式応援歌「筑波山麓Ｇｏ★Ｇｏ伝説」の公開レコーディングが２８日、都内で行われた。
作詞、作曲を担当したメーンボーカルのトータス松本に加え、バックコーラスに欽ちゃんと、女性投手の片岡安祐美選手（１８）、さらに藤本博史（２８）、仁平翔（１８）、雀ケ野賢太（２１）、鹿取真央（１９）のイケメン４選手が参加。ノリノリで見事にそろった歌声を披露した。』
なんだか毎日、ニュース番組コンテンツが悲しく辛い情報が多くて、本当に心の痛む記事ばかりなのですが、そんな中で今日目に入ったのがこの記事。
トータス松本さん、その場で『欽ちゃん球団』に入団ですって（＾＾）
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ
リンクはフリーですご自由にどうぞ(バナーリンクタグはprofileのページ年表欄にあります）
お気に入りの記事を「いいね！」で応援しよう
[【実験中】] カテゴリの最新記事
-
fontバリエーション(2) 2005.08.26 コメント(11)
-
スタイル一覧（後編） 2005.06.19 コメント(165)
【毎日開催】
15記事にいいね！で1ポイント
PR
Keyword Search
▼キーワード検索
Category
カテゴリ未分類
(96)【blog基本とマナー】
(8)【サイト作りの基礎】
(87)【テンプレート】
(49)【検索エンジンの理解】
(18)【検索エンジンに登録】
(5)【楽天広場のサイト】
(11)【アフィリエイト】
(12)【便利ツール】
(10)【実験中】
(76)Comments
© Rakuten Group, Inc.
