スタイルシート講座〜フォント編

戻るＴＯＰ 次へ 


それではフォント編行ってみましょう。
まずはフォントの指定です。font-familyで指定します。
本講座では私が知っている、HG丸ｺﾞｼｯｸM-PRO、serif、Impactで試してみます。
他にもたくさんあるので色々試してみてください。
ＨＥＡＤ宣言：
<style type="text/css">
.class1 {font-family:HG丸ｺﾞｼｯｸM-PRO;}
.class2 {font-family:serif;}
.class3 {font-family:Impact;}
<style>
ＢＯＤＹ宣言：
<p class="class1">フォントを変えてみました。</p>
<p class="class2">フォントを変えてみました。</p>
<p class="class3">フォントを変えてみました。</p>
実行結果：

フォントを変えてみました。

フォントを変えてみました。

フォントを変えてみました。



では次に文字の大きさを変えてみましょう。
HTMLでもありましたね。ここではfont-sizeで指定します。
数字ptで指定もできますが、キーワードを使って変えてみましょう。
xx-small		非常に小さい
x-small		小さい
small		やや小さい
medium		普通のサイズ
large		やや大きい
x-large		大きい
xx-large		大きい
ＨＥＡＤ宣言：
<style type="text/css">
.class4 {font-size:xx-small;}
.class5 {font-size:x-small;}
.class6 {font-size:small;}
.class7 {font-size:medium;}
.class8 {font-size:large;}
.class9 {font-size:x-large;}
.class10 {font-size:xx-large;}
<style>
ＢＯＤＹ宣言：
<p class="class4">フォントサイズを変えてみました。</p>
<p class="class5">フォントサイズを変えてみました。</p>
<p class="class6">フォントサイズを変えてみました。</p>
<p class="class7">フォントサイズを変えてみました。</p>
<p class="class8">フォントサイズを変えてみました。</p>
<p class="class9">フォントサイズを変えてみました。</p>
<p class="class10">フォントサイズを変えてみました。</p>
実行結果：

フォントサイズを変えてみました。

フォントサイズを変えてみました。

フォントサイズを変えてみました。

フォントサイズを変えてみました。

フォントサイズを変えてみました。

フォントサイズを変えてみました。

フォントサイズを変えてみました。



次は文字を斜体にして見ましょう。
font-styleのitalicで指定します。
ＨＥＡＤ宣言：
<style type="text/css">
.class11 {font-style:italic;}
<style>
ＢＯＤＹ宣言：
<p class="class11">フォントスタイルを変えてみました。</p>
実行結果：

フォントスタイルを変えてみました。



となります。以上でフォント編おしまいです。
戻るＴＯＰ 次へ