font-styleとは？初心者のための基本と使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

font-styleとは？初心者にもわかる基本の解説

font-style は CSS のプロパティの一つで、文字の見た目を「斜体にするかどうか」を決めます。ウェブページを作るときに文字を強調したいときや、デザインの雰囲気を変えたいときに使います。font-style を正しく使うと、読みやすさとデザインの統一感を両立しやすくなります。

このプロパティには主に三つの値があります。最も基本的な値は normal、文字を通常の状態にします。次に italic、文字を斜体にします。最後に oblique、文字を斜体風に傾けますが italic とは異なる場合があります。これらの違いを知ることで、場面に応じた表現がしやすくなります。

本記事では、初心者の方が混同しやすい点を中心に、実際の使い方と注意点を丁寧に解説します。まずは値の意味をしっかり理解し、次に実際のコード例を見て、どう適用するかを覚えましょう。

基本の値と意味

<th>値

意味
normal	文字を通常の状態にします。斜体にはなりません。
italic	文字を正式に斜体にします。フォントによって見た目が異なることがあります。
oblique	文字を斜体風に傾けます。italic とは形が違う場合があり、必ずしもフォントのデザインに含まれているわけではありません。

三つの値の中で、最もよく使われるのは normal と italic です。デザインの意図に合わせて選ぶと、ページの読みやすさと雰囲気が整います。特定の語句を強調したいときには italic を使うのが一般的ですが、過剰に使うと読みにくくなる可能性があります。読み手の読みやすさを第一に考えましょう。

使い方のコツと実践例

実際の使い方はとてもシンプルです。font-style を CSS に追加し、値を設定します。例えば、段落全体を斜体にしたい場合は次のようにします。p { font-style: italic; } もちろん、特定の要素だけ斜体にしたい場合は、その要素を選んで font-style を設定します。

注意点として、font-family が斜体のデザインに影響します。同じ italic の値でも、フォントファミリによっては細部の線の角度や幅が変わり、見た目が微妙に異なることがあります。このため、デザイン上の統一感を保つには、フォントファミリと一緒に考えることが大切です。

また、アクセシビリティの観点から、斜体だけで重要な情報を伝えないようにしましょう。スクリーンリーダーを使う読者には斜体だけでは意味が伝わりにくい場合があります。重要な情報は font-weight や色など、別の視覚的手がかりと組み合わせて伝えるのが安全です。

実務でのポイント

・意味のある場面でのみ斜体を使う・同じ文書内で font-style の使い方を統一する・フォントファミリの違いに気をつける・アクセシビリティを意識して補足情報を用意する

最後に、font-style は「文字の見た目を変える最も基本的なCSSプロパティの一つ」です。使い方をマスターすれば、文章の読みやすさとデザインの印象を両立させることができます。慣れるまでは、まずは normal と italic の組み合わせから試してみましょう。

font-styleの同意語

イタリック: font-style が italic のときの状態。文字が右へ斜めに傾き、強調・装飾として使われるスタイル。
斜体: イタリックの日本語表現。文字が斜めに傾くフォントスタイル。
傾斜体: font-style: oblique の意味。字形は変えずに文字が傾くスタイル。
通常: font-style: normal の状態。文字が通常の直立表示になるスタイル。
ノーマル: 通常と同じ意味。特別な傾斜を付けない状態。
通常体: 通常の体裁。斜体や傾斜がかからない状態。
標準: 標準のフォントスタイル。特別な効果を付けず通常に表示される状態。
デフォルト: 初期値として設定されている font-style。特に指定がなければこの状態が適用されることが多い。
継承: font-style の値を親要素から受け継ぐ状態。子要素で font-style を明示的に指定していない場合に適用される。

font-styleの対義語・反対語

通常体: font-styleの値の一つで、文字の傾斜（斜体）なしの標準的な体。CSS では font-style: normal に対応します。
ノーマル: 英語の normal に近い日本語表現。傾斜なしの普通の字体を指す対義語として使われます。
標準体: デフォルトの字体。イタリックや斜体ではなく、読みやすさ重視の通常の体裁。
直立体: イタリック体の反対概念として使われる語。厳密には CSS の公式値ではないが、対義語として理解されることが多いです（通常は normal と同義と解釈されます）。

font-styleの共起語

font-family: フォントの種類を指定するプロパティ。複数の候補をカンマ区切りで列挙し、最後にフォールバックを設定するのが基本です。
font-size: 文字の大きさを指定するプロパティ。px・em・rem・%などの単位を使って調整します。
font-weight: 文字の太さを指定するプロパティ。normal、bold、または100–900の数値を使います。
font-variant: 小文字の大文字化など、フォントのバリエーションを指定します。例: small-caps。
font-stretch: 文字幅の伸縮を指定するプロパティ。CondensedやExpandedなどの値を使います。
font-size-adjust: フォントのサイズ補正。異なる言語環境での視認性を安定させる用途で使います。
font-variation-settings: 可変フォントの軸を設定します。例: 'wght'軸の値を指定。
font-feature-settings: OpenTypeフォント機能の有効化・無効化を設定します。例: 'smcp'（小文字化）など。
font-kerning: 字と字の間の詰めを調整します。オン/オフでkerningの適用を制御します。
font-synthesis: フォントの合成挙動を指定します。不足しているスタイルや太さを自動的に補う挙動に影響します。
font-display: フォントの読み込み時の表示挙動を指定します。主に @font-face で使われ、swapやfallbackなどの値があります。
line-height: 行の高さを指定します。フォントサイズと組み合わせて読みやすさを調整します。
color: 文字の色を指定します。デザインとアクセシビリティの両方に影響します。
text-decoration: 下線・取り消し線・線なしなど、文字の装飾を設定します。
text-transform: 文字列の大文字・小文字への変換を指定します。例: uppercase、lowercase。
letter-spacing: 文字間隔を調整します。読みやすさやデザインの印象を左右します。
word-spacing: 単語間隔を調整します。テキスト密度を変えるのに有効です。
text-shadow: 文字に影をつけて視認性やデザイン性を高めます。
font: Fontショートハンド。1つのプロパティで font-family・font-size・font-style などをまとめて指定できます。

font-styleの関連用語

font-style: 文字の傾きのスタイルを指定します。値には normal（直立）、italic（イタリック体）、oblique（オブリック体）が使われます。
normal: font-style のデフォルト値。文字を傾けず、直立して表示されます。
italic: 斜体。文字自体がデザインされたイタリック体で表示されます。
oblique: オブリック体。文字を単純に傾けるスタイルで、フォントデザインは変更されません。
font-family: 表示に使うフォント名を指定します。複数のフォントをカンマ区切りで並べ、前のフォントが利用不能な場合は後ろのフォントにフォールバックします。
font-size: 文字の大きさを指定します。px、em、rem、% などの単位を用います。
font-weight: 文字の太さを指定します。normal、bold のほか、100〜900の数値でも細さを調整できます。
font-variant: 文字の装飾的なバリエーションを指定します。小文字を大文字風にする small-caps などが代表的です。
font-stretch: 横幅の伸縮を指定します。取れる値は ultra-condensed から ultra-expanded までの様々な範囲です。
font: font の短縮プロパティ。font-style、font-variant、font-weight、font-stretch、font-size/line-height、font-family を一括で設定します。例: font: italic small-caps bold 16px/1.5 Arial, sans-serif;
serif: セリフ体。装飾的な小さな線が文字の端にある伝統的なフォントファミリー群で、読みやすさと雰囲気を決めます。
sans-serif: セリフのないモダンなフォントファミリー。読みやすく、ウェブではよく使われます。
monospace: 等幅フォント。文字幅が全て同じで、コードやコンソール表示に向いています。
cursive: 手書き風フォントのファミリー。装飾的で個性的な雰囲気を作る時に用います。
fantasy: 装飾性の強いフォントファミリー。実用性よりデザイン性を重視する場面で使われます。
system-ui: OS のデフォルトの UI フォントを用いるジェネリックファミリー。ウェブ上でシステムと同じ雰囲気を出したい時に使います。