• HOME > 
  • CSS > 
  • CSSのfont-style使い方【イタリックと通常体の文字...

CSSのfont-style使い方【イタリックと通常体の文字のスタイルの切り替え】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

font-styleプロパティとは?

CSSのfont-styleは、文字にイタリック(斜体)などのスタイルを適用させることができるプロパティです。

次のように、通常体(normal)と斜体(italic、oblique)を指定して、切り替えることが可能です。

font-styleの書き方 リンク先のサムネイル
CSSのfont-sizeの使い方【文字のサイズを変更する方法】

font-sizeは、その名の通り文字の表示サイズを指定するプロパティです。px、%、em(rem)、vw(vh)などの単位によって絶対・相対的な値を指定することができます...【もっと読む】

リンク先のサムネイル
CSSのfont-familyの使い方【文字のフォントを変更する方法】

CSSでは、font-family:「フォント名」という形で文字に適用させたいフォントを指定することで閲覧するデバイスに対して指定フォントを表示させるようにできます...【もっと読む】

太字など文字の太さを変更するには「font-weight」、文字に影をつけたいときは「text-shadow」を使用します。

リンク先のサムネイル
CSSのfont-weightの使い方【文字を太字にする方法】

font-weightは、文字の太さを変更するためのプロパティです。太さを指定したのに思い通りに反映されない場合は、元々フォントに太字が用意されていないという場合がほとんどです...【もっと読む】

リンク先のサムネイル
CSSのtext-shadowの使い方【文字に影を付ける方法】

ext-shadowは、文字に影をつけるためのプロパティです。文字の影はドロップシャドウとも呼ばれます。影の濃さや色、範囲・位置を自由に設定することが可能です...【もっと読む】

ここからはfont-styleで指定できる値とその表示について説明していきます。

normal

font-styleにnormalを指定すると、文字は通常体として表示されます。

デフォルトでは、font-styleはnormalになっているはずですので、font-styleに何も指定しない場合は通常体で表示されます。

HTML

<h5 class="sample">font-style</h5>

CSS

.sample{
    font-style:normal;/*通常体*/
}

プレビュー

font-style:normalの表示例

italicとobliqueの違い

font-styleにitalicかobliqueを指定すると、文字は斜め文字として表示されます。

両者の違いは、italicが筆記体風、obliqueは斜体(単に文字を斜めにしたもの)と定義されています。

しかしながら、日本語フォントにはそもそも筆記体が用意されていないですし、英語でもitalic用を用意しているフォントやブラウザが限定されているため、両者の使い分けは難しい状況です。

とりあえず文字を傾けたいのであればitalicにしておけば良いのではないでしょうか?

HTML

<h5 class="sample">font-style</h5>

CSS

.sample{
    font-style:italic;/*イタリック*/
}

プレビュー

font-style:italicの表示例

日本語は斜体にできない?

残念ながら日本語フォントの種類によっては、斜体が用意されていないことがあるので、そのようなフォントはfont-styleで斜め文字に変更することはできません。

前述の例で適用している「MS PGothic」は斜体にできますが、「メイリオ」は斜体にできないので注意が必要です。

まとめ

以上が、font-styleプロパティの使い方です。

日本語の場合は適用できるフォントが限定されているなど成約がありますので、font-styleを適用する場面としては英語が主になるのではないでしょうか?

広告
広告

関連する記事

サムネイル

CSSのみでスムーススクロールを実装する【scroll-be……

2024年08月01日
スムーススクロールはCSSだけで実装できる? これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、C […]
サムネイル

CSSのinline-flexの使いどころ【flexによる横……

2024年05月29日
inline-flexはCSSのdisplayプロパティの値の一つで、横並びレイアウトを作ることができる「flex」にインライン効果を持たせた性質があります。
サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。