テンプレートとアクセスアップのでめらら楽天日記

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.05.01

style04(font-style-通常体、イタリック体、斜体)

(6)

テーマ：アクセス向上(301)

カテゴリ：【実験中】

font-familyの次はfont-styleです！

スタイルシート>>フォント>>font-style
////////////////////////////////////////////////////////////////////////

【直接指定の記述方法】
ほとんどのタグの中でstyleは指定できます。（これは楽天広場でも使えます！）
<h1 style="宣言(指定内容を宣言と呼びます)" >アクセスアップのでめらら</h1>

【CSS本来の記述方法】
ソースのheadタグの中や外部ファイルを作って記述する場合（楽天ではできません;＞＜）

p {color: red;}
td {color: red;}
･･･etc

////////////////////////////////////////////////////////////////////////

■フォント
フォントの指定には以下のような種類があります。

□font-family（フォントのデザインの種類を指定します）
□font-style（通常体、イタリック体、斜体を区別して指定します）
□font-variant（英数文字の場合に、小文字／Small Caps を区別して指定します）
□font-weight（フォントの太さを指定します）
□font-stretch（レンダリングするフォントの形の幅を指定します）

////////////////////////////////////////////////////////////////////////

■font-style（通常体、イタリック体、斜体を区別して指定します）

□プロパティ 'font-style' は、セレクタにマッチした対象のインストール済みのフォント・ファミリーの、普通(normal)/イタリック(italic)/斜体(oblique)の区別を指定します。
※スタイルの指定内容を普通『プロパティ』といいます。そして'font-style'の部分は『プロパティ名』、普通(normal)/イタリック(italic)/斜体(oblique)の部分を『値』と言います。

□italic（イタリックの字体）
□oblique（オーブリック、斜体の字体）
□inherit（ほとんど使いませんが、一応(;笑)、親要素の値を明示的に継承する指定の値です）
※種類は４種類なのですが「表示される見た目」はイタリック(italic)と斜体(oblique)は同じですし、inheritは使わないので２種類、つまり標準と斜体になります。

▲直接指定の記述方法
<p style="font-style:normal" >normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>

↓こんな感じですね（＾＾）

normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz

<p style="font-style:italic" >italicを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>

↓こんな感じですね（＾＾）

italicを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz

<p style="font-style:oblique" >obliqueを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>

↓こんな感じですね（＾＾）

obliqueを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz

▲CSS本来の記述方法
<style type="text/css">

</style>

□font-family:との組み合わせで見てまいりますと字体が倍に増えますね（＾＾）

font-family:'Helvetica'の場合
<p style="font-family: 'Helvetica'; font-style: normal;" >normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>
↓こんな感じですね（＾＾）

normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz

<p style="font-family: 'Helvetica'; font-style: italic;" >italicを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>
↓こんな感じですね（＾＾）

italicを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz

<p style="font-family: 'Helvetica'; font-style: oblique;" >obliqueを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>
↓こんな感じですね（＾＾）

obliqueを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz

font-family: 'Times New Roman'の場合
<p style="font-family: 'Helvetica'; font-style: normal;" >normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>
↓こんな感じですね（＾＾）

normalを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz

<p style="font-family: 'Helvetica'; font-style: italic;" >italicを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>
↓こんな感じですね（＾＾）

italicを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz

<p style="font-family: 'Helvetica'; font-style: oblique;" >obliqueを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz</p>
↓こんな感じですね（＾＾）

obliqueを指定した文字、ABCDEFGHIJKLMNOPQRSTUVWXYZ、abcdefghijklmnopqrstuvwxyz

▲CSS本来の記述方法
<style type="text/css">

</style>

*****************************************************
【庶事所感】
http://plaza.rakuten.co.jp/demerara/7002
楽天広場で使えるタグの一覧も作り始めました。説明内容のページ作成とリンクさせていくつもりですのでご興味ありましたらご覧下さいませ。宜しくお願い致します
リンク切れが目立ち始めましたので（;汗）トップページをいじり始めました。少しずつリニューアルしていきたいと思います。（＾＾）

*****************************************************

なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ