SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

CSSのfont-styleの使い方：指定値・実例・効かない原因とブラウザー互換性の解説動画

再生時間 7:11動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:00シーエスエス、リファレンス解説です。
  3. 0:03今回のテーマは、フォントスタイルです。
  4. 0:05これは、文字を斜体にするかどうかを決めるプロパティです。
  5. 0:09イタリックと指定すると文字が傾いて表示され、ノーマルと指定すると通常のまっすぐな表示に戻ります。
  6. 0:16今回は、この二つを比べながら、基本の書き方から、効かないときの注意点まで、
  7. 0:20初心者向けに分かりやすく解説します。
  8. 0:24特に英字の部分で違いがはっきり出るので、実例では英語と日本語が混ざった文章を使って確かめていきましょう。
  9. 0:31引用や補足を目立たせたい場面でよく使う、文字まわりの基本プロパティです。
  10. 0:36まず基本の書き方です。
  11. 0:37書き方はとてもシンプルで、フォントスタイルの後ろにコロンを書き、値としてイタリックをひとつだけ書いて、
  12. 0:42最後にセミコロンを付けます。
  13. 0:47スライドの例では、デモというクラスを持つ要素に対して、斜体を指定しています。
  14. 0:52クラス名の前のドットや、波かっこを書き忘れると効かなくなるので、まずはこの三行をそのまま書いてみましょう。
  15. 1:00そしてブラウザーで、ハローシーエスエスという英字の部分が傾いて見えるかどうかを確かめてください。
  16. 1:07日本語の部分よりも、英字の方が変化に気付きやすいはずです。
  17. 1:11指定できる値を読み解きましょう。
  18. 1:14主な値は三つあります。
  19. 1:15ノーマルは通常のまっすぐな表示です。
  20. 1:18イタリックは、フォントが用意している専用の斜体字形を使う指定です。
  21. 1:23オブリークは、通常の字形を傾けて表示する指定で、角度を付けて書ける書き方もありますが、
  22. 1:27その対応は別に確認が必要です。
  23. 1:32ふだんの制作では、斜体にしたいときはイタリック、戻したいときはノーマル、
  24. 1:36という二つの使い分けを覚えれば十分です。
  25. 1:40オブリークは、違いを知るための知識として押さえておきましょう。
  26. 1:45迷ったときは、まずイタリックとノーマルを切り替えて比べるのがおすすめです。
  27. 1:50イタリックとオブリークの違いを、もう少し詳しく見ます。
  28. 1:55イタリックは、フォントに専用の斜体字形が用意されていれば、それを使って表示します。
  29. 2:02英字のフォントでは、形そのものが少し変わることもあります。
  30. 2:07一方オブリークは、今の字形をそのまま斜めに傾けて表示する考え方です。
  31. 2:13ただし、使っているフォントに専用の斜体がない場合、イタリックを指定しても、
  32. 2:18ブラウザーが機械的に傾けて代用することがあります。
  33. 2:24そのため、環境によっては二つの結果がほとんど同じに見えることも珍しくありません。
  34. 2:30違いが出るかどうかは、フォント次第だと覚えておきましょう。
  35. 2:35初期値と継承を確認します。
  36. 2:37初期値はノーマルで、指定しなければ通常のまっすぐな文字で表示されます。
  37. 2:42そして、このプロパティは親から子へ継承します。
  38. 2:45親の要素にイタリックと書けば、その中にある見出しや文章も斜体で表示されるようになります。
  39. 2:52便利な反面、広い範囲に指定すると、意図しない場所まで傾いてしまうこともあります。
  40. 2:57一部分だけ戻したいときは、その要素に改めてノーマルを書き直してください。
  41. 3:02また、インヘリットやイニシャルといった共通のキーワードも使えますが、まずはノーマルとイタリックの基本をしっかり押さえましょう。
  42. 3:11ここからは記事の実例です。
  43. 3:13エイチティーエムエルでは、ステージというクラスを付けた外側の箱の中に、デモというクラスの箱を入れます。
  44. 3:21デモの中身は、ハローシーエスエスという英語から始まり、日本語の文章が続く内容です。
  45. 3:28英字と日本語が混ざっているので、傾き方が文字の種類によってどう違うかを、
  46. 3:31一つの画面で比べられます。
  47. 3:35頭の部分では、スタイルシートをリンクで読み込んでください。
  48. 3:40この土台は変えずに固定し、次で変える一行の効果だけを観察します。
  49. 3:45文章を長めにして折り返しも見えるようにしておくと、変化が分かりやすくなります。
  50. 3:51土台のシーエスエスです。
  51. 3:53ステージは最大幅を三十レムにし、デモには濃い緑の枠線と薄い緑の背景を付けます。
  52. 3:59最後の行でフォントスタイルにイタリックを指定すると、文字が斜体で表示されます。
  53. 4:05まずは英字のハローシーエスエスの部分に注目してください。
  54. 4:09傾きがはっきり分かるはずです。
  55. 4:12日本語の部分は、フォントによって傾き方が控えめだったり、機械的な傾斜になったりします。
  56. 4:18ファイルを保存してブラウザーを再読み込みし、英字と日本語で見え方がどう違うかを、
  57. 4:22よく観察してください。
  58. 4:26色や余白は変えていないので、違いはこの一行だけが生んだものです。
  59. 4:31次に最後の行だけを、ノーマルへ置き換えます。
  60. 4:35すると、傾いていた文字が通常のまっすぐな表示に戻ります。
  61. 4:39特に英字の部分で、傾いた表示と通常表示の違いが比べやすくなります。
  62. 4:45ここで大切なのは、色や太さや大きさは同じでも、傾きひとつで文章の印象が変わる、
  63. 4:48という実感です。
  64. 4:52引用文や作品名など、周りと少しだけ区別したい部分に斜体は向いています。
  65. 4:58逆に、長い本文全体を斜体にすると読みにくくなるので、使う範囲は絞りましょう。
  66. 5:04変更後は保存して再読み込みし、二つの見え方の違いを自分の言葉で説明してみてください。
  67. 5:11間違えやすい点を確認します。
  68. 5:13一つ目は、日本語フォントです。
  69. 5:15多くの日本語フォントには専用のイタリック体がないため、指定しても機械的な傾斜になったり、
  70. 5:19変化が小さく見えたりします。
  71. 5:23効いていないと思っても、英字で試すと判断しやすくなります。
  72. 5:27二つ目は、エムタグとの使い分けです。
  73. 5:30文章の意味として強調したいときはエイチティーエムエルのエムを使い、見た目だけを傾けたいときにこのプロパティを使います。
  74. 5:38そのほか、セレクターの不一致や別の宣言による上書きもよくある原因です。
  75. 5:43開発者ツールで、ネットワーク、エレメンツ、スタイルズ、コンピューテッドの順に確認しましょう。
  76. 5:50ブラウザー互換性を確認します。
  77. 5:52記事が参照するエムディーエヌの記録では、プロパティ本体はクロームが一以降、
  78. 5:58エッジが十二以降、ファイアフォックスが一以降で補足条件あり、サファリが一以降で対応しています。
  79. 6:04アンドロイド版クロームは十八以降、アイオーエス版サファリは一以降です。
  80. 6:09イタリックとノーマルも、同じく古いバージョンから広く対応しています。
  81. 6:14とても歴史の長いプロパティなので、今回使った基本の書き方は安心して使えるでしょう。
  82. 6:19ただし、オブリークに角度を付けるような新しい書き方は別です。
  83. 6:24使う場合は、その値の対応も個別に確認してください。
  84. 6:27最後に練習とまとめです。
  85. 6:29まとめます。
  86. 6:30フォントスタイルは、文字を斜体にするかどうかを決めるプロパティで、初期値はノーマル、
  87. 6:34親から子へ継承しました。
  88. 6:39イタリックは専用の斜体字形、オブリークは傾斜による表示でした。
  89. 6:44練習として、まずイタリックとノーマルの違いを言葉で説明し、次に文章量や親の幅だけを変えて、
  90. 6:49結果がどう変わるかを比べてみてください。
  91. 6:54お疲れさまでした。
  92. 6:56関連するフォントウェイトやフォントサイズも合わせて学ぶと、文字まわりの整え方がより確かなものになります。
  93. 7:04斜体を適切な場所で使えるようになると、引用や補足が伝わりやすいページを作れます。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

font-styleの役割と主な指定値を解説。特に英字部分で、傾いた表示と通常表示を比べられます。初期値・継承・ブラウザー互換性、効かないときの確認方法も整理します。

解説記事・サンプルコードを読む：CSSのfont-styleの使い方：指定値・実例・効かない原因とブラウザー互換性 →