XHTML/CSS・トップ | CSSプロパティ・目次

●フォントを斜体にする(応用編)

 font-style はフォントを斜体に指定するときに使われるプロパティです。斜体にする値としては italic(=イタリック体、斜体)と oblique(=斜めの)があります。一般的な文字には oblique を指定し、 italic は欧文フォント向きと言われていますが、実際の表示には差がありません。


Merry Christmas(メリー・クリスマス)

Happy New Year(ハピー・ニュー・イヤー)


 上の"Merry Christmas( )"は italic、下の"Happy New Year( )"は oblique を font-style プロパティの値として指定しています。そのほかの指定できるキーワードとして、斜体ではない normal(=普通の、標準の)があります。


【CSS】

h2 {
  font-family: "Times New Roman";
  font-style: italic;
  text-align: center
}

【HTML】

<h2>Merry Christmas(メリー・クリスマス)</h2>


【CSS】

h2 {
  font-family: "Times New Roman";
  font-style: oblique;
  text-align: center
}

【HTML】

<h2>Happy New Year(ハピー・ニュー・イヤー)</h2>


 この記述でも間違いではないのですが、特定のブラウザによっては、欧文フォントとして表示されないケースがあります。(英字としては表示されます。)解決策として、以下のようにします。(class属性、およびクラス名を使って、解説します。)


【CSS】

h2.sample {
 font-family: "Times New Roman";
 font-style: italic;
 text-align: center
}
h2.mihon {
 font-family: "Times New Roman";
 font-style: oblique;
 text-align: center
}

【HTML】

<h2 lang="en" class="sample">Merry Christmas(メリー・クリスマス)</h2>
<h2 lang="en" class="mihon">Happy New Year(ハピー・ニュー・イヤー)</h2>


 HTMLのほうで、lang="en"を付けただけですが、この意味は lang属性によって、en(英語)の言語指定をしています。これで特定のブラウザにも指定した欧文フォントとして表示されます。ところで、英字と日本語が混合していますが、日本語のフォント表示はどうなるのでしょうか?ちなみに、筆者の環境では Win IE(Ver.6.0)、Nスケープ(Ver.7.1)の両方とも(ほかの指定からの影響を受けない)ゴシック系のフォント表示でした。当サイトのように"MS Pゴシック"を Webページ全体の font-family プロパティ(※注)の1番目のフォント名に指定している場合はこのままでも良いと思いますが、明朝系やそのほかのフォント名を優先的に指定している場合はどのようにすれば良いのでしょうか?その場合は以下のようにします。(サンプルフォントは以下の記載方法で表示されています。)

※注: “Webページ全体の font-family プロパティ”とは具体的に、* { font-family: " " } の形として指定している場合のことです。詳しくは 「スタイルをすべての要素に指定する」を参照にしてください。


【CSS】

h2.sample {
 font-family: "Times New Roman";
 font-style: italic;
 text-align: center
}
h2.mihon {
 font-family: "Times New Roman";
 font-style: oblique;
 text-align: center
}

【HTML】

<h2 lang="en" class="sample">Merry Christmas<span lang="ja">(メリー・クリスマス)</span></h2>
<h2 lang="en" class="mihon">Happy New Year<span lang="ja">(ハピー・ニュー・イヤー)</span></h2>

 英語を意図した欧文フォントで表示し、かつ、混合した日本語も指定したフォント名で表示させるには span のインライン要素を使います。この span はインライン要素であり、それ以外の意味を特に持っていません。しかし、HTMLにおいて、特定の範囲に適用することにより、 style(スタイルシート)や lang(言語)の種類を指定することができます。上記の場合では英語と日本語が混合していますので、<span lang="ja">~</span>を付加してみました。日本語(文章)に lang 属性として、ja(日本語)の言語指定することにより、Webページ全体の font-family プロパティで指定したフォント名が表示されるようになります。特定のフォント名を指定したい場合は class属性も指定できることを利用し、<span class=" ">~</span>と、あらためて class属性を使って指定します。(CSSのほうはクラス名を使います。)以下の英字は Times New Roman の欧文フォントで表示し、日本語は MS P明朝 のフォントで表示させています。


【HTML】

<h2 lang="en" class="sample">Merry Christmas<span class="otehon">(メリー・クリスマス)</span></h2>
<h2 lang="en" class="mihon">Happy New Year<span class="otehon">(ハピー・ニュー・イヤー)</span></h2>

【CSS】

h2.sample {
 font-family: "Times New Roman";
 font-style: italic;
 text-align: center
}
h2.mihon {
 font-family: "Times New Roman";
 font-style: oblique;
 text-align: center
}
.otehon {
 font-family: "MS P明朝"
}


※ italic と oblique の両方を使って解説していますので難しくなってしまいましたが、どちらか一方に定めればわかりやすくなると思います。

※ sample、mihon、otehon はクラス名(CSS側)、および class 属性の属性値としての名前(HTML側)です。作者が任意の名前を付けます。そのほかの使い方もありますので、詳しくは以下のページをご参照ください。

XHTML/CSS・目次 | フォント・目次

Copyright (C) 2004-2007 http://www.xml.vc/