HTML Webページの各種フォント形式の詳細変更_HTML/Xhtml_Webページ制作

このセクションでは、読者が 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 は繁栄せず、その後衰退するのか

潜在的な問題に遭遇しました

業界関係者の中には、インターネット検索と広告市場を長年独占してきたグーグルが繁栄し、その後衰退する可能性があると考えている人もいる。 ...同時に、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






タグの表示方法:

引用符の表示方法：「英語の半角ダブルクォーテーション」

商標の表示方法:™

登録記号の表示方法：®

著作権マークの表示方法: ©

表示§

表示×



ブラウザのアドレス バーに http://localhost/string.htm と入力すると、ブラウジング効果は図 4.12 のようになります。

図 4.12 特殊文字の設定
— 注: 記号 & を個別に表示するには、コード & を使用する必要があります。
4.2.10 ブラウザによる HTML の一部の解析をより簡単に無視する方法
この本にあるような HTML コード例を Web ページ上で作成する場合、<和> をすべて < と > に変換する必要があると思いますが、面倒だと思います。 HTML コードの と <xmp></xmp> を使用すると、この問題を簡単に解決できます。 <br><plaintext> が HTML コードに挿入されると、それに続くすべての HTML タグは無効になります。つまり、ブラウザーは <plaintext> に続くすべての HTML タグを解析してページに直接表示しません。 。 <br><xmp></xmp> は二重タグであり、含まれるコンテンツ内のタグのみを無効にします。<xmp></xmp> がより一般的に使用されます。 D:web ディレクトリに Web ページ ファイルを作成し、html.htm という名前を付け、コード 4.13 に示すようにコードを記述します。 <br>コード 4.13 タグの設定を無視します: html.htm <br> <br> <br> <title>タグ設定を無視します</title> <br> <br> <br><h2>秦源春・長沙</h2> <br><xmp>独立の寒い秋、<strong>オレンジ島の源頭、翔江の北に進みます</strong>。 <br>山々が赤く染まり、森がすべて染まっていくのを見てください。<br>川は緑に満ち、<u>何百もの船が流れを求めて競い合っています。 </u> <br></xmp> <br>鷲は空を襲い、 <strong>魚は浅い底に飛び、 </strong> <br>あらゆる種類の冷ややかな空が自由を求めて競い合います。 <br>概要が小さいのは悲しいですが、<u>無限の地球に尋ねてください</u>、浮き沈みの責任は誰にありますか? <br> <br><plaintext> <br>何百ものカップルを旅行に連れて行き、<br>輝かしい過去を思い出してください。 <br> ちょうど私のクラスメートの若い男の子が壮年期です。<br> 学者は怒って方秋を叱ります。 <br> 国を指摘し、言葉を鼓舞します。 <br> 糞土は一万世帯に相当しました。 <br> <strong> が流れ </strong> の真ん中で水にぶつかり、波がボートを止めたことを覚えていますか? <br> <br> <br>ブラウザのアドレス バーに http://localhost/string.htm と入力すると、ブラウジング効果は図 4.13 のようになります。 <br><img style="max-width:90%" alt="" style="max-width:90%" src="http://files.jb51.net/file_images/web/2009422058213177807.jpg"> <br>図 4.13 ラベル設定を無視する <br><strong>4.2.11 その他のテキスト変更方法</strong> <br>さまざまな分野のニーズを満たすために、HTML にはテキストを変更する他のタグもあります。より一般的に使用されるのは、上付き文字形式のタグと下付き文字形式のタグです。場合によっては、削除効果が必要になることもあります。つまり、HTML の下線タグが使用されることがあります。 <br> - 上付き書式ラベルは二重ラベル  で、主に特定の数値の 2 乗や 3 乗などの数学的指数を表すために使用されます。 <br> - 添え字形式タグは二重タグ  であり、主にコメントと数学的基底表現に使用されます。 <br> - 下線タグは二重タグ <strike></strike> であり、主に削除効果に使用されます。 <br>D:web ディレクトリに Web ページ ファイルを作成し、other.htm という名前を付け、コード 4.14 に示すようにコードを記述します。 <br>コード 4.14 その他の変更タグの設定: other.htm <br> <br> <br> <title>その他の変更タグの設定</title> <br> <br> <br><font size="5"> <br>秦源春^長沙! <br> <br>数学的指数の表現: 2³=8、100²=10000<br><hr> <br>秦源春_長沙！ <br> <br>数学的基底の表現: log₃81=4、log₅125=3<br><hr> <br>削除効果: <strike>削除されました</strike> <br></font> <br> <br> <br>ブラウザのアドレスバーに http://localhost/other.htm と入力すると、ブラウジング効果は図 4.14 のようになります。 <br><img style="max-width:90%" alt="" style="max-width:90%" src="http://files.jb51.net/file_images/web/2009422058217877808.jpg"> <br>図4.14 その他の変更タグの設定</plaintext></plaintext></plaintext></plaintext></font></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明：</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事：<a class="dBlack" title="Web ページ制作の初心者: HTML ハイパーリンク A タグ_HTML/Xhtml_Web ページ制作の使い方を学ぶ" href="http://m.php.cn/ja/faq/12298.html">Web ページ制作の初心者: HTML ハイパーリンク A タグ_HTML/Xhtml_Web ページ制作の使い方を学ぶ</a></span><span>次の記事：<a class="dBlack" title="Web ページ制作の初心者: HTML ハイパーリンク A タグ_HTML/Xhtml_Web ページ制作の使い方を学ぶ" href="http://m.php.cn/ja/faq/12302.html">Web ページ制作の初心者: HTML ハイパーリンク A タグ_HTML/Xhtml_Web ページ制作の使い方を学ぶ</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/348757.html" title="HTMLの知識のまとめ" class="aBlack">HTMLの知識のまとめ</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348804.html" title="HTMLを早く学ぶ方法" class="aBlack">HTMLを早く学ぶ方法</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348873.html" title="html xhtml xml の違い" class="aBlack">html xhtml xml の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348884.html" title="src 属性と href 属性の違い" class="aBlack">src 属性と href 属性の違い</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/348902.html" title="HTML5とCSSの置き換え利用について" class="aBlack">HTML5とCSSの置き換え利用について</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><p>ホームページ</p></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><p>コース</p></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><p>に質問</p></a></li><li><a href="http://m.php.cn/ja/login"><b class="icon5"></b><p>私の</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ja/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ja/"><b class="icon1"></b><span>ホームページ</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course.html"><b class="icon2"></b><span>コース</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/article.html"><b class="icon3"></b><span>記事</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/wenda.html"><b class="icon4"></b><span>に質問</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/dic.html"><b class="icon6"></b><span>辞書</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/course/type/99.html"><b class="icon7"></b><span>マニュアル</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/xiazai/"><b class="icon8"></b><span>ダウンロード</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ja/faq/zt" title="特集"><b class="icon12"></b><span>特集</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ja/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ja/" >ホームページ</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/article.html" class="hover">記事</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/wenda.html" >に質問</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/course.html" >コース</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/faq/zt" >特集</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/xiazai" >ダウンロード</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/game" >ゲーム</a></div><div class="swiper-slide"><a href="http://m.php.cn/ja/dic.html" >辞書</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>