HTML - フォントリファレンス

こんにちは、ウェブ開発志望者诸位！今日は、HTMLの素晴らしいフォントの世界に飛び込みます。あなたの近所の親切なコンピュータ教師として、この旅を案内するのを楽しみにしています。特別な機会に適切な服装を選ぶのと同じように、完璧なフォントを選ぶことで、あなたのウェブページを素晴らしく見せることができます！

HTML - Fonts Reference

文法

まず基本から始めましょう。HTMLでは、タグを使ってテキストのフォントフェイス、サイズ、色を指定します。しかし、重要なのは、このタグはHTML5では非推奨となっていることです。それでも、歴史的な文脈として学び、その後現代的な代替手段を探ってみましょう。

基本的な文法は以下の通りです：

<font face="font_family" size="size" color="color">テキストをここに</font>

HTML フォントタグ

では、タグの属性を分解してみましょう：

face：フォントファミリーを指定します。
size：フォントのサイズを設定します。1（最小）から7（最大）の範囲です。
color：テキストの色を決定します。

以下に例を示します：

<font face="Arial" size="5" color="blue">私のウェブサイトにようこそ！</font>

これにより、「私のウェブサイトにようこそ！」がArialフォント、サイズ5、青色で表示されます。

ウェブセーフフォント

ウェブセーフフォントは、異なるオペレーティングシステム間で一般的に利用できるフォントです。これらを使用することで、多くのユーザーに対して意図したようにテキストが表示されます。以下は、いくつかの一般的なウェブセーフフォントの表です：

フォント名	例
Arial	The quick brown fox jumps over the lazy dog
Verdana	The quick brown fox jumps over the lazy dog
Helvetica	The quick brown fox jumps over the lazy dog
Times New Roman	The quick brown fox jumps over the lazy dog
Courier	The quick brown fox jumps over the lazy dog

HTML フォントの例

知識を実際に使って、楽しい例を見てみましょう：

<html>
<head>
<title>私のお気に入りの果物</title>
</head>
<body>
<h1><font face="Arial" color="red">私のお気に入りの果物</font></h1>
<p><font face="Verdana" size="4" color="green">りんごは美味しい！</font></p>
<p><font face="Courier" size="3" color="orange">みかんは果汁が豊富だ！</font></p>
<p><font face="Times New Roman" size="5" color="purple">ぶどうは甘い！</font></p>
</body>
</html>

この例では、私たちがお気に入りの果物についてのページを作成しています。それぞれの果物は異なるフォント、サイズ、色で説明されています。これにより、フォントを使って視覚的な階層や強調をウェブページに加える方法を示しています。

Microsoftシステムのフォント

Microsoftシステムには、多くのインストール済みフォントがあります。以下はその中でも一般的なもの：

Arial
Calibri
Cambria
Georgia
Tahoma
Times New Roman

Macintoshシステムのフォント

Macintoshシステムにもデフォルトでインストールされているフォントがあります：

Helvetica
Arial
Times New Roman
Courier
Verdana
Georgia

Unixシステムのフォント

Unixシステム（Linuxディストリビューションを含む）には以下のフォントが含まれていることが多いです：

DejaVu Sans
Liberation Sans
FreeSans
Nimbus Sans L

さて、あなたはこう思っているでしょう、「でも先生、タグは非推奨だと言ったじゃない。代わりに何を使えばいいの？」素晴らしい質問です！現代のウェブ開発では、CSS（カスカディングスタイルシート）を使ってテキストをスタイル化します。以下に簡単な例を示します：

<html>
<head>
<title>現代のフォントスタイル</title>
<style>
h1 {
font-family: Arial, sans-serif;
color: red;
}
.green-text {
font-family: Verdana, sans-serif;
font-size: 18px;
color: green;
}
.orange-text {
font-family: 'Courier New', monospace;
font-size: 16px;
color: orange;
}
.purple-text {
font-family: 'Times New Roman', serif;
font-size: 20px;
color: purple;
}
</style>
</head>
<body>
<h1>私のお気に入りの果物</h1>
<p class="green-text">りんごは美味しい！</p>
<p class="orange-text">みかんは果汁が豊富だ！</p>
<p class="purple-text">ぶどうは甘い！</p>
</body>
</html>

これにより、前の例と同じ結果を得ることができますが、非推奨のタグではなく、現代的なCSS技術を使用しています。

覚えておいてください、適切なフォントを選ぶことは、料理に完璧なスパイスを選ぶのと同じです - ウェブページを魅力的に見せることができます！しかし、まずは読みやすさを考えます。派手なフォントは見栄えがしますが、ユーザーが読めなければ、役割を果たしていません。

最後に、私の失敗談を共有したいと思います。ウェブ開発を始めた当初、私はページの各パラグラフに異なるフォントを使って、まるで身代金のメモのようになっていました。私の間違いを学んでください - 一貫性が鍵です。

続けて練習し、好奇心を持ち続け、ハッピーコーディングを！

Credits: Image by storyset