HTMLクイックリファレンス


トップページへ
HTMLタグ(目的別) CSSプロパティ(目的別) WEBカラー WEB画像
HTMLタグ(ABC順) CSSプロパティ(ABC順) 優良デザイン 特殊文字
HTML5 CSS3 JavaScript HTML5 API
HTMLの基本 CSSの基本 Canvas サイトマップ

トップページ > スタイルシートリファレンス > font-style

★スタイルシートリファレンス

font-style・・・・・フォントをイタリック体・斜体にする
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Netscape4Netscape6Netscape7Netscape8 Opera6Opera7Opera8Opera9Opera10 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6

font-styleプロパティは、フォントのスタイルを指定する際に使用します。 指定できる値は、標準(normal)、イタリック体(italic)、斜体(oblique)です。

イタリック体(italic)と斜体(oblique)の違いについてですが、 イタリック体(italic)は斜めに傾けて筆記体調などにデザインされたものが多く、 斜体(oblique)はシンプルに斜めに傾けてデザインされたものが多いようです。 指定したフォントにイタリック体(italic)や斜体(oblique)がない場合には、 ブラウザが判断して、そのフォントの標準のものを斜めに傾けて表示します。

日本語フォントの場合、イタリック体(italic)や斜体(oblique)が用意されていることはほとんどなく、 標準のものを斜めに傾けて表示しているため、多くの場合イタリック体(italic)と斜体(oblique)のブラウザ上の表示は同じになります。

■値

normal
標準フォントで表示します。これが初期値です。
italic
イタリック体フォントで表示します。
oblique
斜体フォントで表示します。

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

p.sample1 {font-style: italic; }
p.sample2 {font-style: oblique; }

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">イタリック体を指定。</p>
<p class="sample2">斜体を指定。</p>
</body>
</html>
↓↓↓

ブラウザ上の表示

イタリック体を指定。

斜体を指定。


■関連項目

font・・・・・・・・・・・・・・・・・・・・・・・・・フォントに関する指定をまとめて行う
font-style・・・・・・・・・・・・・・・・・・・フォントをイタリック体・斜体にする
font-variant・・・・・・・・・・・・・・・・・フォントをスモールキャップにする
font-weight・・・・・・・・・・・・・・・・・・フォントの太さを指定する
font-size・・・・・・・・・・・・・・・・・・・・フォントのサイズを指定する
font-family・・・・・・・・・・・・・・・・・・フォントの種類を指定する
font-size-adjust・・・・・・・・・・・・・フォントのサイズを調整する
font-stretch・・・・・・・・・・・・・・・・・フォントを縦長・横長にする

▲ページ先頭へ
トップページ > スタイルシートリファレンス > font-style

HTMLクイックリファレンス


トップページへ
HTMLタグ(目的別) CSSプロパティ(目的別) WEBカラー WEB画像
HTMLタグ(ABC順) CSSプロパティ(ABC順) 優良デザイン 特殊文字
HTML5 CSS3 JavaScript HTML5 API
HTMLの基本 CSSの基本 Canvas サイトマップ
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
[PR] 大手・有名企業、首都圏のIT・営業職求人が豊富≪マイナビエージェント≫
[PR] 【リクナビ派遣】スキルをつける、スキルを磨く、派遣なら両方できる!
[PR] えっ、バイトが決まってお金がもらえるの?!
[PR] 派遣の求人ならジョブセンス派遣
[PR] 「オフィスワーク」のアルバイトはこちら
[PR] 無料で本格的な適職診断『とらばーゆ』
HTMLクイックリファレンスについて
このウェブサイトが本になりました
©2014 HTMQ