<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>CSSフォント設定</title>
<style>
.red{
}
.blue{
}
.size{
}
.italic{
font-style:italic;
}
.bold{
font-weight:bold;
}
.familyGothic{
font-family:"ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}
.familyMincho{
font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.decoration{
text-decoration:overline line-through;
}
.letter-spacing{
letter-spacing:1em;
}
</style>
</head>
<body>
<h1>CSSフォント設定</h1>
<article>
<h2>基本問題</h2>
<figure>
<dl>
<dt>フォントの種類と大きさ・色</dt>
<dd>
<p class="familyGothic">あAa<span class="size red">あAa<span class="size blue">あAa</span></span></p>
<p class="familyMincho">あAa<span class="size red">あAa<span class="size blue">あAa</span></span></p>
</dd>
<dt>イタリック</dt>
<dd>
<p class="familyGothic italic">あAa<span class="size">あAa<span class="size">あAa</span></span></p>
<p class="familyMincho italic">あAa<span class="size">あAa<span class="size">あAa</span></span></p>
</dd>
<dt>太字</dt>
<dd>
<p class="familyGothic bold">あAa<span class="size">あAa<span class="size">あAa</span></span></p>
<p class="familyMincho bold">あAa<span class="size">あAa<span class="size">あAa</span></span></p>
</dd>
<dt>装飾</dt>
<dd>
<p class="familyGothic bold"><span class="decoration">あAa</span></p>
</dd>
<dt>文字間隔</dt>
<dd>
<p class="familyGothic bold"><span class="letter-spacing">あAa</span></p>
</dd>
</dl>
</figure>
</article>
</body>
</html>