HTML - フォント：ウェブ上のテキストスタイルの初級者向けガイド

こんにちは、ウェブ開発者の卵のみなさん！今日は、HTMLフォントの楽しい世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、ウェブのテキストを素晴らしく見えるようにする方法を指南します。それでは、始めましょう！

HTML - Fonts

HTMLフォントとは？

本題に入る前に、「HTMLでのフォント」とは何かを理解しましょう。簡単に言えば、フォントはウェブページ上で見られるテキストのスタイルです。大きなや小さな、太字やイタリック、乃至は洒落た書体などがあります。HTMLは、テキストの見た目をコントロールする方法を提供してくれ、ページを視覚的に魅力的で読みやすいものにします。

ウェブセーフフォント

では、「ウェブセーフフォント」について話しましょう。友達に手紙を書くとします。読めるようにしたいですよね？ウェブセーフフォントは、みんなが理解できる共通の書字スタイルのようなものです。

ウェブセーフフォントは、ほとんどのコンピュータやデバイスに搭載されているフォントです。これを使用することで、異なるシステム間でもページが似たように表示されることを確保できます。

以下は一般的なウェブセーフフォントの一覧です：

フォント名	例
Arial	これはArialフォント
Verdana	これはVerdanaフォント
Helvetica	これはHelveticaフォント
Times New Roman	これはTimes New Romanフォント
Courier	これはCourierフォント

HTMLフォントの例

では、コードを実際に使ってみましょう！以下はHTMLでフォントを使用する方法のいくつかの例です：

例1: 基本的なフォント設定

<p style="font-family: Arial, sans-serif;">このテキストはArialフォントです。</p>

この例では、ブラウザにテキストをArialフォントで表示するように指示しています。「sans-serif」はArialが利用できない場合の代替フォントです。

例2: 複数のフォントを使用する

<p style="font-family: 'Times New Roman', Times, serif;">このテキストはTimes New Roman、Times、またはセリフフォントのいずれかで表示されるかもしれません。</p>

ここでは、複数のフォントオプションを提供しています。ブラウザはまずTimes New Romanを試し、それが利用できない場合はTimesを使用し、最後にどちらも利用できない場合は任意のセリフフォントを使用します。

例3: フォントスタイルを組み合わせる

<p style="font-family: Arial, sans-serif; font-size: 18px; font-weight: bold;">このテキストはArialフォントで、大きく、太字です。</p>

この例では、フォントファミリーだけでなく、サイズと太さも設定しています。これにより、テキストの表示方法をさらに細かくコントロールできます。

フォントの色を設定する

さて、テキストに少し色を加えましょう…いや、テキストにです！

例4: テキストの色を変更する

<p style="color: blue;">このテキストは青色です！</p>

シンプルですね？colorプロパティを使ってテキストの色を設定します。

例5: 16進数の色を使用する

<p style="color: #FF5733;">このテキストはカスタム色です。</p>

16進数の色は、色の細かい調整を可能にします。この例では、特定のオレンジ色を使用しています。

HTML `<basefont>`要素（非推奨）

さて、ちょっとした話をします。かつて、HTMLには<basefont>という要素がありました。これは、HTMLドキュメント全体のデフォルトフォントを設定するために使われていました。しかし、技術の進化とともに、これは時代遅れとなり、HTML5ではサポートされなくなりました。

<basefont>の代わりに、CSSを使って全文書のデフォルトフォントを設定します。以下のようにします：

<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333333;
}
</style>

このCSSコードをHTMLドキュメントの<head>セクションに配置することで、デフォルトのフォント（Arial）、サイズ（16ピクセル）、色（暗灰色）を<body>内のすべてのテキストに適用します。

結論

そして、みなさん！HTMLフォントの世界を旅しました。ウェブセーフフォントから色の設定、スタイルまでです。フォントをマスターする鍵は練習です。さまざまな組み合わせを試し、サイズや色を遊びながら、自分のページに最も合ったものを見つけてください。

最後に、私の教師としての経験から少しだけアドバイスします：実験を恐れずに！ウェブ開発の素晴らしいところは、いつでも元に戻して再試できることです。それでは、大胆にフォントを使い、编程を楽しんでください！

Credits: Image by storyset