2.1 プロパティ font-family
フォントはウェブデザインで重要な役割を果たしていて、読みやすさやテキストの視覚的な魅力に影響を与えるよ。
フォントファミリーはウェブページで使えるフォントのスタイルと特性を決めるんだ。
CSSではフォントは通常、serif、sans-serif、monospaceといった3つの主要なファミリーに分かれるよ。それぞれをもっと詳しく見てみよう。
プロパティ font-family
font-familyプロパティはフォントファミリーを指定するために使われるよ。いくつかのフォントをカンマで区切って指定できて、ブラウザが最初のフォントが利用できない場合次のフォントを使えるようにするんだ。
複数のフォントを使う例
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
使用例:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
<body>
<p>これはHelvetica Neue、HelveticaまたはArialフォントを使用して表示されるテキストです。</p>
</body>
2.2 serifフォントファミリー
セリフフォント(serif)は、文字や記号の末端に追加された小さな線やストロークが特徴だよ。
これらのフォントはテキストにより伝統的でフォーマルな印象を与えるんだ。
serifフォントの例:
- Times New Roman
- Georgia
- Garamond
- Baskerville
使用例:
body {
font-family: 'Times New Roman', serif;
}
<body>
<h1>これは見出しです</h1>
<p>これはserifフォントを使用した段落です。</p>
</body>
2.3 sans-serifフォントファミリー
サンセリフフォント(sans-serif)は、文字や記号の末端に小さな線がないのが特徴だよ。これらのフォントはより
現代的でミニマリストな印象があり、スクリーンでの良好な読みやすさからウェブデザインでよく使われるんだ。
sans-serifフォントの例:
- Arial
- Helvetica
- Verdana
- Open Sans
body {
font-family: 'Arial', sans-serif;
}
<body>
<h1>これは見出しです</h1>
<p>これはsans-serifフォントを使用した段落です。</p>
</body>
2.4 monospaceフォントファミリー
モノスペースフォント(monospace)は、すべての文字が同じ幅を持っているよ。こういったフォントは、コード、技術文書、表など、文字が縦に揃うことが重要な場面でよく使われるんだ。
monospaceフォントの例:
- Courier New
- Consolas
- Monaco
- Lucida Console
使用例:
body {
font-family: 'Courier New', monospace;
}
<body>
<h1>これは見出しです</h1>
<p>これはmonospaceフォントを使用した段落です。</p>
<pre>
function helloWorld() {
console.log("Hello, world!");
}
</pre>
</body>
ウェブページでの視覚的な印象とスタイルの多様性を改善するために、さまざまなフォントファミリーの組み合わせがよく使われるよ。例えば、見出しはserifフォントで装飾して、メインテキストはsans-serifフォントで書くことができるんだ。コードについてはいつもmonospaceね。
GO TO FULL VERSION