【26-5】font-styleプロパティでフォントを斜体に指定しよう

最終更新日:2018年03月31日  (初回投稿日:2018年03月24日)

フォントのスタイルを指定するには font-styleプロパティを使います。

ここでのフォントのスタイルとは、文字を斜体にするかどうかだけ。
font-style: normal は、通常の正体のフォントフェイス。
font-style: italicfont-style: oblique は、斜体のフォントフェイスを選択できます。

本日のINDEX
  1. font-styleプロパティの値
    1. italic と oblique
  2. font-styleプロパティの使いどころ

フォント関連のプロパティは、fontショートハンドプロパティで まとめて指定することができます。今回も含めて数回フォント関連のプロパティの記事が続き、最後にショートハンドでの書き方をまとめます。

【26-1】font-familyプロパティでフォント(書体)を指定しよう
【26-2】font-sizeプロパティでフォントのサイズを指定しよう
【26-3】font-weightでフォントのウェイト(太さ)を指定しよう
【26-4】font-stretch で condensed などの文字幅を選択しよう
【26-5】font-styleプロパティでフォントを斜体に指定しよう ←今日はココ
【26-6】line-heightプロパティで 行間(行の高さ)を指定しよう
【26-7】フォントをまとめて指定する fontショートハンドプロパティ

参考:
CSS Fonts Module Level 3 | W3C Candidate Recommendation
font - CSS | MDN

font-styleプロパティの値

font-styleプロパティの値には、キーワードが3つあるだけです。

font-styleプロパティの値
キーワード normal, italic, oblique
normalがデフォルト値。フォントファミリー内の normal に分類されるフォントフェイスを選択。
italic は フォントファミリー内の italic に分類されるフォントフェイスを選択。
oblique は フォントファミリー内の oblique に分類されるフォントフェイスを選択。
italic, oblique が無くても、ブラウザは「斜体」で表示する。
グローバル値 font-style: inherit; 親のfont-styleの値を継承(コレ書かなくても継承するけど)
font-style: initial; 継承した親の font-styleの値を解消しデフォルト値に戻す
font-style: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 全部

italic と oblique

font-style: italic で、使っているフォントファミリーに「italic」で分類されているフォントフェイスがあれば、それを使用します。
もし「italic」が無くて「oblique」があれば「oblique」の方を使います。

font-style: oblique も同じく、「oblique」があればそれを使用し、「oblique」が無くて「italic」があれば「italic」を使います。

最初からどっちもない場合(日本語や中国語のフォントとか)は、ブラウザは斜体のスタイルで(=斜めに傾けて)表示します。

ちなみに、Italicは元はベネツィアで聖書のために考案された手書き書体。なので小文字が手書きっぽいものが多い。Obliqueは斜体という言葉そのまま、傾いたデザインのもの。
と言っても実際には Italic と言っても斜体なだけのフォントもあるようです。

下のサンプルは、上のカラムは font-style:italic, 下のカラムは font-style:oblique を指定しています。ぜんぶ斜体になってますね。

"Times New Roman"
Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Trebuchet MS"
Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Avenir"
Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Times New Roman"
Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Trebuchet MS"
Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語
"Avenir"
Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語

「Times New Roman」「Trebuchet MS」は「italic」を持ち、「Avenir」は「oblique」のフォントを持っています。
font-style: italic、oblique のどちらで指定しても、同じように表示されますね。
指定したフォントが無い環境なら、ブラウザのデフォルトフォントで表示されますが、それでも斜体のスタイルで表示されます。

日本語テキストの部分は、当然ブラウザのデフォルトフォントで表示されますが、これも斜体になって表示されています。

上の見本のソースコードはこんなかんじで作っています。

<div class="mihon">
  <span style="font-family:'Times New Roman',Times,serif; font-style:italic">"Times New Roman"<br>
  Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:Trebuchet MS,sans-serif; font-style:italic">"Trebuchet MS"<br>
  Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:'Avenir',sans-serif; font-style:italic">"Avenir"<br>
  Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
</div>

<div class="mihon">
  <span style="font-family:'Times New Roman',Times,serif; font-style:oblique">"Times New Roman"<br>
  Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:Trebuchet MS,sans-serif; font-style:oblique">"Trebuchet MS"<br>
  Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
  <span style="font-family:'Avenir',sans-serif; font-style:oblique">"Avenir"<br>
  Sample - abcdefqmnwABCDEFQMNW 1234567890 美しい日本語</span>
</div>

<style>
div.mihon {
    font-size:16px;
    line-height:1.2;
    color:black;
    margin:1em 0;
    border:solid 1px #ccc;
    padding:0 .7em
    }
div.mihon span {
    display:block;
    margin:1em 0
    }
</style>

font-styleプロパティの使いどころ

HTMLの要素で、テキストのブラウザデフォルトスタイルが「斜体」になるのは以下のものです。(それぞれクリックすると、該当の記事が別ウィンドウで開きます)
em
i 
address
cite
dfn
var

これらは、ブラウザのデフォルトスタイルが font-style: italic になっています。

ですので「斜体で表現したい」時は、その役割を担う要素があるならそれを使うべき。
強調したいなら <em>要素、連絡先なら <address>要素といった具合です。
文法的に正しく が HTML5 のモットーなので。

で、例えばフッター部分で <address>要素を使ったけど、デザイン的に特に斜体にしたく無くて、他のテキストと同じ正体にしたい時がありますよね。
そんな時には、

address {
    font-style: normal;
    }

などと指定して、正体に戻します。

たぶん、font-styleプロパティを使うシーンって、このくらいじゃないかなあ。

次回予告

次回は、line-heightプロパティを使います。
これは、テキストの「行間(行の高さ)」を指定するプロパティ。フォントサイズとともに、とても良く使うプロパティです。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.