CSSでfont-styleを使って文字のスタイルを指定する方法【初心者向け】

CSS初心者向けに、【font-styleプロパティ】を使って文字のスタイルを指定する方法を解説する記事。文字列を斜体の形式にしたり通常体に戻すことが可能。イタリック体や親要素の値を継承する方法も紹介。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSS初心者向けに、font-styleを使って文字のスタイルを指定する方法を解説する記事です。

CSSの基礎がわからない場合は、CSSの書き方の記事を先にお読みください。

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのCSSのカリキュラムをもとに執筆しています。

 

font-styleとは

CSSのfont-styleプロパティを使用することで、文字列を斜体の形式にしたり通常体に戻したりすることができます。文字の表示を変えて目立たせたい場合などにご利用ください。

 

事前準備

事前準備として、HTMLファイルとCSSファイルをそれぞれ用意しました。なお、CSSのファイルは「sample.css」にすることにします。

ぜひ自分のPCでもやってみましょう。

HTMLファイル:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”sample.css” type=”text/css”>
</head>
<body>
<p class=”sample1″>あいうABCabc123</p>
</body>
</html>

 

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

font-styleを使ってみる

では具体的に使ってみましょう。

 

通常体(normal)で表示する

まずは基本となる通常体です。normalを使ってこのように記述します。

p.sample1 {font-style:normal; }

font-styleの値をnormalにすると通常体で表示されます。デフォルトではこの値に設定されていますので、指定しなくても表示は同じです。

150606_fs_1r

 

イタリック体(italic)で表示する

テキストを斜体で表示するには、italicあるいはobliqueを使用します。先ほどのnormalの部分を書き変えてみましょう。

p.sample1 {font-style:italic; }

p.sample1 {font-style:oblique; }

 

ブラウザで表示すると、文字列が斜体になって表示されます。(italicobliqueはほとんどの日本語フォントで同一になっており、ブラウザでの表示も同じになります)

150606_fs_2r

 

親要素の値を継承する

最後に、応用として親要素の値を継承する方法を紹介します。

事前準備として、HTMLファイルを編集して文字列を2つにしてください
<p class=”sample1″>あいうABCabc123</p>
<p class=”sample2″>あいうABCabc123</p>

 

CSSは、<body>要素でitalicに設定しています。ここで1行目にあたるp.sample1にはinherit、そして2行目の文字列p.sample2にはnormalの値を入力しましょう。

body {font-style:italic; }
p.sample1 {font-style:inherit; }
p.sample2 {font-style:normal; }

 

ブラウザで表示させると、画面親要素のitalicinheritで継承した1行目はイタリック体、normal値を入力した2行目は通常体で表示されました。

150606_fs_3r

 

今度は、先ほどと同様にに<body>要素にitalicを指定し、さっきと反対に1行目をnormal、2行目をinheritにしてみます。

body {font-style:italic; }
p.sample1 {font-style:normal; }
p.sample2 {font-style:inherit; }

 

再度ブラウザで確認してみましょう。1行目の文字列は通常体、2行目の文字列は親要素のイタリック体を継承しました。この時、normalはデフォルトで設定されている値なので通常使用しませんが、このように親要素に設定した値と違う形式にしたい時などに利用することがあります。

150606_fs_4r

 

今回の記事は以上です。

CSSをさらに学びたい場合は、CSSでfont-weightを使って文字の太さを指定する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。CSSを基礎から学ぶことができます。