HTML Webページの各種フォント形式の詳細変更_HTML/Xhtml_Webページ制作
br
html
フォント
文字
ラベル
フォーマット
詳細
ウェブページ
このセクションでは、読者が HTML のさまざまなフォント形式の変化を把握し、より本格的な Web ページを作成できるように、テキストの詳細な変更から始めます。
4.2 テキストの多様な変更
前のセクションでは、大きな段落のさまざまな設定を学習しましたが、テキスト自体を変更する方が魅力的だと思われます。このセクションでは、読者が HTML のさまざまなフォント形式の変化を把握し、より本格的な Web ページを作成できるように、テキストの詳細な変更から始めます。
4.2.1 テキストスタイル設定の基本タグ—
フォントスタイルを設定する基本タグはで、それに含まれるテキストがスタイルスコープとなります。初心者の HTML コード記述では、 テキスト のように、 が複数回ネストされやすくなります。もう 1 つの状況は、
テキスト
など、ラベルの入れ子の位置がずれていることです。。コードの記述を標準化し、不要なエラーを避けるために、読者は学習時に注意する必要があります。4.2.2 文字色の設定
color は タグの属性の 1 つで、テキストの色を設定するために使用されます。 D:web ディレクトリに Web ページ ファイルを作成し、font_color.htm という名前を付け、コード 4.7 に示すようにコードを記述します。
コード 4.7 フォントの色の設定: font_color.htm
薄赤色のテキスト: 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 文字サイズの設定
size は タグの属性でもあり、テキスト サイズの設定に使用されます。サイズの値は 1 ～ 7 で、デフォルトは 3 です。サイズ属性値の前に「+」または「-」文字を追加して、フォント サイズの初期値に対する相対的な増分または減分を指定できます。 D:web ディレクトリに Web ページ ファイルを作成し、font_size.htm という名前を付け、コード 4.8 に示すようにコードを記述します。
コード 4.8 フォント サイズの設定: font_size.htm
サイズは 1: HTML 学習
サイズは 2: HTML 学習
サイズは 3: HTML 学習
サイズは 4: HTML 学習
サイズは 5: HTML 学習
サイズは 6: HTML 学習
サイズは 7: HTML 学習
ブラウザのアドレス バーに http://localhost/font_size.htm と入力すると、ブラウジング効果は図 4.8 のようになります。
図4.8 フォントサイズの設定
読者は、サイズ値の前に「+」または「-」文字を追加して、テキスト サイズをより柔軟に設定してみることができます。
4.2.4 テキストのフォントを設定する
face は タグの属性でもあり、テキストのフォント (フォント スタイル) を設定するために使用されます。 HTML Web ページに表示されるフォントはブラウザ システムから呼び出されるため、フォントの一貫性を保つために Song フォントを使用することをお勧めします。HTML ページもデフォルトで Song フォントを使用します。 D:web ディレクトリに Web ページ ファイルを作成し、font_face.htm という名前を付け、コード 4.9 に示すようにコードを記述します。
コード 4.9 フォント設定: font_face.htm
フォントは宋体です: Qinyuanchun・Changsha-Mao Zedong
フォントは楷書です: Qinyuanchun・Changsha-Mao Zedong
フォントは太字です: 秦源春・長沙・毛沢東
フォントは公式スクリプトです: Qinyuanchun・Changsha-Mao Zedong
ブラウザのアドレス バーに 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
斜体: 秦源春・長沙・毛沢東
太字: 秦源春・長沙・毛沢東
下線: 秦源春・長沙・毛沢東
斜体太字下線: 秦源春・長沙・毛沢東
ブラウザのアドレス バーに http://localhost/font_style.htm と入力すると、ブラウジング効果は図 4.10 のようになります。
図4.10 フォント変更設定
作成者は、読者の利便性を考慮して、 内のすべてのテキストのサイズをサイズ 5 に設定します。
— 注: 複数のタグに同じテキストが含まれる場合、その含める順序を間違えることはできません。
4.2.8 複数のタイトルスタイルの使用
ウェブ記事では、タイトルの重要性を強調するために、タイトルのスタイルが比較的特殊です。 HTML テクノロジーは、タイトルの一連のスタイル タグを保護します。これらのタグは、
から までの二重タグであり、大から小までのテキスト サイズがさまざまなレベルのタイトルを表します。タイトルタグには、専用行を占有し、文字が太字で、文字が中央揃えになるという特徴があります。このように、タイトルの設定は非常に簡単で、多段階のタイトルを設定することができます。 D:web ディレクトリに Web ページ ファイルを作成し、font_h.htm という名前を付け、コード 4.11 に示すようにコードを記述します。
コード 4.11 タイトル設定: font_h.htm
タイトル設定
タイトルNo.1
タイトルNo.2
タイトルNo.3
タイトルNo.4
タイトルNo.5
タイトルNo.6
フォーチュン マガジン: なぜ Google は繁栄せず、その後衰退するのか
潜在的な問題に遭遇しました
コード 4.11 タイトル設定: font_h.htm
タイトルNo.1
タイトルNo.2
タイトルNo.3
タイトルNo.4
タイトルNo.5
タイトルNo.6
フォーチュン マガジン: なぜ Google は繁栄せず、その後衰退するのか
潜在的な問題に遭遇しました
業界関係者の中には、インターネット検索と広告市場を長年独占してきたグーグルが繁栄し、その後衰退する可能性があると考えている人もいる。 ...同時に、Google が最近立ち上げた多くの新しい計画、たとえば Open Mobile Alliance、ソーシャル ネットワーキング サイト OpenSocial の総合プラットフォーム、無線スペクトル帯域の入札への数十億ドルの投資の可能性なども計画されています。広く疑問視されている。
は検索を独占し続けます
最近、より優れた検索エンジンが登場すれば人々はためらうことなくGoogleを捨てるだろうという記事もある。しかし、たとえより優れた検索エンジンが登場したとしても、Google はまだしばらくは存在するでしょう。 ...この場合、サイトのスピードが勝敗を分けることが多いです。
ブラウザのアドレス バーに http://localhost/font_h.htm と入力すると、ブラウジング効果は図 4.11 のようになります。
図 4.11 タイトルの設定
4.2.9 Web ページでの特殊文字の処理を学習します
HTML では、一部の文字が特別な意味を持ちます。たとえば、「」はタグの左括弧と右括弧であり、タグ自体はブラウザーによってのみ解析されます。で表示されているページではご利用いただけません。では、HTML で「」を表示するにはどうすればよいでしょうか? HTML では、表 4.1 に示すように、Web ページに表示できるようにいくつかの特殊文字を記述する方法を指定します。
表 4.1 HTML の特殊文字
特殊記号
HTML コード
特殊記号
HTML コード
™（商標記号）
™
>
>
®（登録記号）
®
「」（英語半角）
」
×
×
§
§
© (著作権記号)
©
D:web ディレクトリに Web ページ ファイルを作成し、string.htm という名前を付け、コード 4.12 に示すように string.htm コードを記述します。
コード 4.12 特殊文字の設定: string.htm
タグの表示方法:
引用符の表示方法：「英語の半角ダブルクォーテーション」
商標の表示方法:™
登録記号の表示方法：®
著作権マークの表示方法: ©
表示§
表示×