HTML ウェブページにおけるさまざまなフォント形式の詳細

このセクションでは、テキストの変更の詳細から始めます。これにより、読者はさまざまな HTML フォント形式の変更を把握し、よりプロフェッショナルな Web ページを作成できます。
4.2 テキストのさまざまな装飾 前のセクションでは、大きな段落のさまざまな設定を学びました。テキスト自体の装飾は、より魅力的に見えます。このセクションでは、テキストの変更の詳細から始めます。これにより、読者はさまざまな HTML フォント形式の変更を把握し、よりプロフェッショナルな Web ページを作成できます。
4.2.1 テキストスタイル設定の基本タグ—
フォントスタイルを設定するための基本タグは であり、そこに含まれるテキストがスタイルスコープです。初心者が HTML コードを書く場合、 は text のように簡単に複数回ネストされます。もう 1 つの状況は、text のように、タグが誤ってネストされている場合です。コードの記述を標準化し、不必要なエラーを回避するために、読者は最初に学習するときに注意する必要があります。
4.2.2 テキストの色の設定
色は タグの属性の 1 つであり、テキストの色を設定するために使用されます。 D:\web\ ディレクトリに Web ページファイルを作成し、font_color.htm という名前を付けて、コード 4.7 に示すようにコードを記述します。
コード 4.7 フォント色の設定: font_color.htm
<html>
<ヘッド>
<title>フォント色の設定</title>
</head>
<本文>
明るい赤色のテキスト: HTML 学習の本質は、必要なものを使用することです 
濃い赤のテキスト: HTML 学習の本質は必要なものを使うことです 
薄緑色のテキスト: HTML 学習の本質は必要なものを使うことです 
濃い緑のテキスト: HTML 学習の本質は必要なものを使うことです 
水色のテキスト: HTML 学習の本質は必要なものを使うことです 
濃い青色のテキスト: HTML 学習の本質は必要なものを使うことです 
明るい黄色のテキスト: HTML 学習の本質は、必要なものを使用することです 
濃い黄色のテキスト: HTML 学習の本質は必要なものを使うことです 
ライトシアンのテキスト: HTML 学習の本質は、必要なものを使用することです 
濃い青緑色のテキスト: HTML 学習の本質は必要なものを使うことです 
薄紫色のテキスト: HTML 学習の本質は、必要なものを使用することです 
濃い紫色のテキスト: HTML 学習の本質は必要なものを使うことです 
</本文>
</html>
ブラウザのアドレスバーに http://localhost/font_color.htm と入力すると、図 4.7 のようなブラウジング効果が表示されます。

図 4.7 フォント色の設定読者は、コード 4.7 からフォントタグの color 属性の使用方法を学習できるだけでなく、さまざまな色の表現にも慣れることができます。
4.2.3 テキストサイズの設定
サイズは、テキストサイズを設定するために使用される タグの属性でもあります。サイズの値は 1 ～ 7 で、デフォルトは 3 です。サイズ属性値の前に「+」または「-」文字を追加して、フォントサイズの初期値に対する増分または減分を指定できます。 D:\web\ ディレクトリに Web ページファイルを作成し、font_size.htm という名前を付けて、コード 4.8 に示すようにコードを記述します。
コード 4.8 フォントサイズ設定: font_size.htm
<html>
<ヘッド>
<title>フォントサイズの設定</title>
</head>
<本文>
サイズは 1: HTML 学習 
サイズは 2: HTML 学習 
サイズは 3: HTML 学習 
サイズは 4: HTML 学習 
サイズは 5: HTML 学習 
サイズは6です: HTML学習 
サイズは7です: HTML学習 
</本文>
</html>
ブラウザのアドレスバーに http://localhost/font_size.htm と入力すると、図 4.8 のようなブラウジング効果が表示されます。

図 4.8 フォントサイズの設定読者は、サイズ値の前に「+」または「-」の文字を追加して、テキストサイズをより柔軟に設定することができます。
4.2.4 テキストのフォントを設定する
face は タグの属性でもあり、テキストのフォント (書体) を設定するために使用されます。 HTML ウェブページに表示されるフォントはブラウザシステムから呼び出されるため、フォントの一貫性を保つために Songti を使用することをお勧めします。HTML ページでもデフォルトで Songti が使用されます。 D:\web\ ディレクトリに Web ページファイルを作成し、font_face.htm という名前を付けて、コード 4.9 に示すようにコードを記述します。
コード 4.9 フォント設定: font_face.htm
<html>
<ヘッド>
<title>フォント設定</title>
</head>
<本文>
フォントは宋字です: 秦元春·長沙-毛沢東 
フォントはKaitiです: 秦源春·長沙-毛沢東 
フォントは太字です: 秦源春·長沙-毛沢東 
フォントは公式の文字です: 秦元春·長沙-毛沢東
</本文>
</html>
ブラウザのアドレスバーに http://localhost/font_face.htm と入力すると、図 4.9 のようなブラウジング効果が表示されます。

図 4.9 フォント設定著者は、読者の見やすさを考慮して、変更したフォントのテキストサイズを 5 に設定しています。
4.2.5 テキストを斜体にする 記事の日付などの特殊効果を実現するためにテキストを斜体にするには、二重タグ を使用します。 は強調タグとも呼ばれ、斜体で表記されます。現在は タグよりも多く使用されています。書き方は次の通りです。
これは斜体テキストです
これも斜体テキストです
4.2.6 テキストを太字にする 記事のタイトルなどのテキストを太字にして目を引くようにするには、二重タグ を使用します。 は特殊強調タグと呼ばれ、これもテキストを太字にします。現在は タグよりも頻繁に使用されます。書き方は次のとおりです。
これは太字のテキストです
これも太字です
4.2.7 テキストに下線を付ける テキストに下線を付けるには、二重タグ を使用します。以下は、斜体、太字、下線付きのテキストの組み合わせの例です。 D:\web\ ディレクトリに Web ページファイルを作成し、font_style.htm という名前を付けて、コード 4.10 に示すようにコードを記述します。
コード 4.10 テキスト装飾設定: font_style.htm
<html>
<ヘッド>
<title>フォント装飾設定</title>
</head>
<本文>
イタリック体: 秦源春·長沙-毛沢東 
太字: 秦源春・長沙 - 毛沢東 
下線：秦源春長沙 - 毛沢東 
斜体、太字、下線付き: 沁园春·长沙-毛信毛
</本文>
</html>
ブラウザのアドレスバーに http://localhost/font_style.htm と入力すると、図 4.10 のようなブラウジング効果が表示されます。

図 4.10 フォント変更設定作成者は、読者が読みやすくなるように、<body></body> 内のすべてのテキストのサイズを 5 に設定しています。
— 注意: 複数のタグに同じテキストブロックが含まれている場合、その順序を間違えることはできません。
4.2.8 複数のタイトルスタイルの使用 Web ページの記事では、タイトルの重要性を強調するために、タイトルスタイルが比較的特殊になっています。 HTML テクノロジは、タイトルのスタイルタグのセット (<h1> から <h6> までの二重タグ) を保護します。大きいテキストサイズから小さいテキストサイズまで、タイトルのさまざまなレベルを表します。タイトルタグは、1 行を占め、太字で、中央揃えになるという特徴があります。このようにタイトルの設定が簡単にでき、複数レベルのタイトルを設定することができます。 D:\web\ ディレクトリに Web ページファイルを作成し、font_h.htm という名前を付けて、コード 4.11 に示すようにコードを記述します。
コード 4.11 タイトル設定: font_h.htm
<html>
<ヘッド>
<title>タイトル設定</title>
</head>
<本文>
<h1>タイトル 1</h1>
<h2>タイトル 2</h2>
<h3>タイトル3</h3>
<h4>タイトル4</h4>
<h5>タイトル5</h5>
<h6>タイトルNo.6</h6>
<h1>フォーチュン誌: Google が失敗しない理由</h1>
<h3>潜在的な問題に遭遇する</h3>
    業界関係者の中には、長らくインターネット検索と広告市場を独占してきたグーグルが、最終的には衰退する可能性があると考える者もいる。 ...同時に、オープン・ハンドセット・アライアンス、ユニバーサル・ソーシャル・ネットワーキング・プラットフォームのOpenSocial、無線周波数帯の入札への数十億ドルの投資の可能性など、Googleが最近立ち上げた多くの新しい計画も広く疑問視されている。
<h3>検索を独占し続ける</h3>
    最近、より優れた検索エンジンが登場すれば、人々はすぐに Google を放棄するだろうと述べる記事がいくつかありました。しかし、より優れた検索エンジンが登場したとしても、Google はしばらくの間、依然として目立つ存在であり続けるだろう。 ...このような状況では、サイトの速度が勝敗を分ける場合がよくあります。 
</本文>
</html>
ブラウザのアドレスバーに http://localhost/font_h.htm と入力すると、図 4.11 のようなブラウジング効果が表示されます。

図4.11 タイトル設定
4.2.9 Web ページで特殊文字を処理する方法を学ぶ HTML では、一部の文字に特別な意味があります。たとえば、「<」と「>」は、タグの左括弧と右括弧です。タグは HTML の表示を制御します。タグ自体はブラウザーでのみ解析でき、ページには表示できません。では、HTML で「<」と「>」をどのように表示するのでしょうか? HTML では、表 4.1 に示すように、いくつかの特殊文字を Web ページに表示できるように、それらの書き方を指定します。
表4.1 HTMLの特殊文字

特殊記号
HTMLコードの特殊記号
HTMLコード
<
<
™（商標記号）
＆貿易;
>
>
® (登録シンボル)
®
「」（半角英語）
「
×
×
§
＆宗派;
© (著作権記号)
＆コピー;
D:\web\ ディレクトリに Web ページファイルを作成し、string.htm という名前を付けて、コード 4.12 に示すように string.htm コードを記述します。
コード 4.12 特殊文字設定: string.htm
<html>
<ヘッド>
<title>特殊文字の設定</title>
</head>
<本文>

タグの表示方法: <HTML> 
引用符の表示方法: 「英語の半角二重引用符」 
商標の表示方法: ™ 
登録記号の表示方法: ® 
著作権記号の表示方法: © 
表示 § 
表示×

</本文>
</html>
ブラウザのアドレスバーに http://localhost/string.htm と入力すると、図 4.12 のようなブラウジング効果が表示されます。

図4.12 特殊文字の設定
— 注意: 記号 & だけを表示するには、コード & を使用する必要があります。
4.2.10 ブラウザによる HTML の一部解析をより便利に無視する方法 この本のような HTML コード例を Web ページで作成する場合、すべての < と > を < と > に変換する必要がある可能性があり、これはかなり面倒です。 HTML コード内の <plaintext> と <xmp></xmp> を使用すると、この問題は簡単に解決できます。
<plaintext> は単一のタグです。これを HTML コードに挿入すると、それに続くすべての HTML タグが無効になります。つまり、ブラウザは <plaintext> に続くすべての HTML タグを解析せず、ページに直接表示します。
<xmp></xmp> は二重タグであり、含まれるコンテンツ内のタグのみを無効にします。<xmp></xmp> の方が一般的に使用されます。 D:\web\ ディレクトリに Web ページファイルを作成し、html.htm という名前を付けて、コード 4.13 に示すようにコードを記述します。
リスト 4.13 タグ設定を無視する: html.htm
<html>
<ヘッド>
<title>タグ設定を無視する</title>
</head>
<本文>
<h2>秦源春·長沙</h2>
<xmp>寒い秋にぽつんと佇む湘江は、オレンジ島の先端を北へ流れています。 山々が赤く染まり、森も赤く染まっています。 川は澄んで青く、何百もの船が流れを競っています。 </xmp>
鷲は空を舞い、魚は浅瀬を泳ぎ、凍てつく空に生きるすべての生き物は自由を求めて競い合います。 憂鬱で荒涼とした、果てしない大地に私は問いかける、その興亡を誰が支配するのか？ 
<プレーンテキスト>
私は何百人もの友人を連れて一緒に旅をし、輝かしい過去の日々を思い出しました。 私たちは青春の真っ盛りの若い学生です。 私たちは若さの活力と野心に満ち、野心と決意に満ちています。 山河を指し示し、感動的な言葉を書き記し、 過去の侯爵は汚物とみなされました。 波のせいでボートが進まない中、川の真ん中で漕いでいたことを覚えていますか?
</本文>
</html>
ブラウザのアドレスバーに http://localhost/string.htm と入力すると、図 4.13 のようなブラウジング効果が表示されます。

図4.13 タグ設定を無視
4.2.11 その他のテキスト変更方法 さまざまな分野のニーズを満たすために、HTML にはテキストを変更するための他のタグもあります。最もよく使用されるのは、上付き文字の形式タグと下付き文字の形式タグです。場合によっては、削除効果を使用する必要がある場合もあります。つまり、HTML 取り消し線タグを使用できます。
— 上付き文字の書式タグは二重タグ で、主に数値の平方や立方などの数学的指数を表すために使用されます。
— 下付き文字形式タグは二重タグ であり、主に注釈や数学的な基数表現に使用されます。
— 取り消し線タグは二重タグ <strike></strike> であり、主に削除効果のために使用されます。
D:\web\ ディレクトリに Web ページファイルを作成し、other.htm という名前を付けて、コード 4.14 に示すようにコードを記述します。
コード 4.14 その他の修飾タグの設定: other.htm
<html>
<ヘッド>
<title>その他の変更タグ設定</title>
</head>
<本文>

秦源春長沙！ 
数学指数: 23=8、1002=10000 <hr />
秦源春長沙！ 
数学的な基数の表現: log381=4、log5125=3 <hr />
削除効果: <strike>私は削除されました</strike>

</本文>
</html>
ブラウザのアドレスバーに http://localhost/other.htm と入力すると、図 4.14 のようなブラウジング効果が表示されます。