ホームページ > ウェブフロントエンド > htmlチュートリアル > マークアップ言語 - title_HTML/Xhtml_web ページの作成

マークアップ言語 - title_HTML/Xhtml_web ページの作成

PHP中文网
リリース: 2016-05-16 16:45:43
オリジナル
1371 人が閲覧しました

標準化されたデザイン ソリューション - マークアップ言語とスタイル ハンドブック
Web 標準ソリューション マークアップとスタイル ハンドブック

パート 1: マークアップ構文から始めるマークアップの概要
第 2 章のタイトル
概要:
すべての Web ページにタイトルが必要なだけでなく、正しくマークアップされていれば、Web デザインと使いやすさを向上させることができます。
見た目の点では、Web ページのタイトルには通常、大きなフォント サイズが使用され、本文とは異なる色やフォントが使用される場合があります。タイトルの機能は「説明されているトピックを簡潔に説明する」ことです。 「次の章」では、W3C ではこのように説明しています - Web ページの各段落の概要を表示します。
表示したい情報を最も効果的に使用するページ タイトルを作成するにはどうすればよいですか? この章では、タイトルの処理に一般的に使用されるいくつかの方法を検討し、その中で最も役立つものを 1 つ見つけてから、CSS のヒントとコツを使用して最適な方法を装飾します。文書のタイトルを作成するにはどのような方法がよいでしょうか?
この質問に答える前に、文書の先頭にタイトルを配置していると仮定して、同様の効果を達成する 3 つの方法を見てみましょう。
方法 A: 意味はありますか?
超クールなページ タイトル
< ;span> タグは一部で使用されますが、ページ タイトルの場合はあまり意味がありません。このメソッドを使用する唯一の利点は、見出しクラスに CSS スタイルを指定できることです。
.Heading {
font-size: 24px; font-weight: 太字;
color: blue;
}

これで、見出しクラスでマークされたすべてのタイトルが大きくなり、太くなり、青色になります。これは素晴らしいことですよね。しかし、CSS をサポートしていないブラウザを使用してこのページにアクセスした場合はどうなるでしょうか?
たとえば、ブラウザがサポートしていない外部スタイル シート ファイルに古い CSS スタイルを挿入すると、障害のあるユーザー向けにスクリーン リーダーがページを読み取ったときに何が起こりますか。これらの手段でページにアクセスするユーザーは表示できなくなります。 ) タイトルと本文テキストの違いです。
class="Heading" などの注釈メソッドはタグの内容をわずかに説明しますが、 は単なる汎用コンテナです。デフォルトの表示スタイルを変更します。
検索エンジンはこのページをクロールするときに、 タグが存在しないかのようにスキップし、そこに含まれる可能性のあるキーワードの重みを増やしません。これについては、この章で後ほど説明します。
最後に、 タグは、メソッド A のコンテンツを別の要素に配置する必要があります。

などのブロックレベルのコンテナーを使用すると、必要なコンテナーを追加した場合でも、CSS をサポートしていない場合に大量の不要なコードが生成されます。タイトルとテキストに違いはありません。
                                                                        #p#

方法 B: P と B の組み合わせ

超クールなページ タイトル
方法 B では、段落タグを使用します。これにより、必要なブロックレベルの要素が表示され、 タグによってテキストが太字になります (ほとんどのブラウザーで)。ただし、この方法で重要なタイトルをマークすると、 方法 A とは異なり、CSS スタイルの定義がない場合でも、テキストは太字で表示されます。ただし、 タグと同様、検索エンジンは段落内の太字テキストのキーワードの重みを増やしません。

の単純な組み合わせを使用します。 p タグと b タグを使用すると、このタイトルに他の段落とは異なるスタイルを追加できなくなります。おそらく、独自の方法でタイトルを強調し、ページのコンテンツに定義と構造を追加したいと考えますが、このメソッドを使用した後に太字で表示する必要があります。
方法 C: スタイルと内容

超クールなページタイトル笑ここで、私たちの良き友人である title タグが登場します。title タグは最初から存在していますが、多くの Web デザイナーは依然としてそれらを一貫した方法で使用できていません。適切に使用すると、title タグはページ コンテンツにアンカー ポイントを提供し、
タグ自体の観点から見ると、追加のコンテナ タグが必要ないため、この方法はバイト数を節約できるとさえ言えます。最初の 2 つのメソッドは無視できますが、バイトが小さくなるごとに変更されます。

から

は、最も重要な

から最も重要でない

まで、それぞれ 6 つの見出しを表します。これらは、追加のコンテナーを必要とせずに自己完結型です。 1 行でシンプルで効率的 - この仕事に最適なツールです。
スタイルの定義が簡単です

タグは、 とは異なり、独自の意味を持っています。

タグはテキスト内で複数回使用されるため、CSS を使用してさまざまなスタイルを追加できます (この章の「その他のテクニック」で詳しく説明します)。
さらに重要なのは、タグを使用しなくてもです。スタイル定義を追加すると、タイトル タグは明らかにタイトルのように見えます。すべてのスタイル定義がページから削除された場合でも、ブラウザは大きなフォントと太字のフォントを使用して

のコンテンツを表示します。正しいタイトル タグはプレゼンテーションではなくコンテンツの意味を説明するためです (図 2-1)

図 2-1: スタイルから離脱した後のタイトル タグの使用 ページ コンテンツ。
スクリーン リーダー、PDA、携帯電話、その他のビジュアル ブラウザや非ビジュアル ブラウザも、タイトル タグのコンテンツを認識して正しく処理し、ページ上の他のコンテンツよりもその重要性を強調できます。 CSS がサポートされていない (またはサポートできない) と、CSS はそれが特別なものだとは考えません。
迷惑なデフォルト スタイル
Web デザインの歴史において、デザイナーはタイトル タグの使用を避けるのは単に次の理由からです。スタイルを設定しないと、タイトル タグはモンスターのように見えます。デフォルトのフォント サイズが大きすぎるため、タイトル タグの一部は使用を避けます。または、代わりに小さいフォント サイズと大きなラベル タイトルを使用します。
ただし、強調しておきたい重要な点があります。たとえば、CSS を定義することで、これらのタイトル タグのスタイルを簡単に変更できます。これは画面の半分を占めます。後で、

に対する恐怖心を克服するために CSS スタイルを使用してタイトル タグを定義する方法を説明します。
検索エンジンに優しい
これが最大の利点です。 タグや段落内の太字フォントは、検索エンジンにとってあまり意味がありません。時間はかかりますが、検索エンジンがページのインデックスを作成し、ユーザーがページを見つけやすくするのに役立ちます。
検索エンジンのロボットは、タイトル タグのコンテンツを非常に重視します。おそらく、いくつかのキーワードを組み込むとよいでしょう。 タグと <meta> タグを処理した後、ページ コンテンツ内の title タグを処理します。タイトル内のこれらのキーワードは魅力的ではありません。 <br>だから、他の人が簡単にページを見つけられるようにするには、少し時間がかかるだけです。<br><strong>タグの順序に関する補足</strong> ><br>上記の例では、ページ上で最も重要なのはタイトルです。これはドキュメント全体のタイトルであるため、W3C によると、最も重要なタイトル タグ <h1> を使用します。タイトル レイヤーをスキップするのは良い習慣ではないと考えられているとします。たとえば、次の Web ページがあるとします。<br><span class="code"><h1>超クールなページ タイトル</h1></span><br>次のタイトル (別の <h1> でない場合) は <h2> にする必要があり、その後は <h3> を使用します。たとえば、<h3> を直接使用するなど、特定のレベルの見出しをスキップすることはできません。 <h1> 以降は同意します。構造とアウトラインは同じであり、各レベルを順番に使用する必要があると思います。これにより、同時に既存のページにタイトルとスタイルを追加できます。 <br> 前述したように、デフォルトのフォント サイズが <h1> ほど怖くないという理由だけで、デザイナーはページ上で最も重要なタイトルを表す を使用する可能性があります。ただし、最初に構造を記述してから、スタイルを調整することを忘れないでください。CSS を使用してタイトル タグのフォント サイズを変更することをお勧めします。<br>                                                                         #p#<br><strong>概要</strong><br>ページ内のタイトルをマークするのにタイトル タグ (<h1> ~ <h6>) を使用する方が良い理由を簡単に確認してみましょう。<br><strong>方法 A:</strong><br>CSS 機能が無効になっている場合、または非ビジュアル ブラウザがタイトルとタイトルの関係を認識していない場合、ビジュアル ブラウザは通常のテキストと同じスタイルでタイトルを表示します。 <br>検索エンジンは <span> でマークされたタイトルに特別な注意を払いません。<br>独自のスタイルを開発できますが、タイトルを追加すると見出しクラスに囚われます。 <br><strong>方法 B:</strong><br>ビジュアル ブラウザではコンテンツのみが太字で表示され、デフォルトのフォント サイズが引き続き使用されます。<br>本文とは異なる独自のスタイルをタイトルに追加することはできません。<br>検索エンジンも < に特別な注意を払いません。 ;p><b>作成したタイトルの内容。 <br><strong>メソッド C: </strong><br> は、タイトル タグ内のテキストの正確な意味を伝えます。<br>ビジュアル ブラウザーか非ビジュアル ブラウザーかに関係なく、タイトル コンテンツを正しく処理します。どのような形式で読み取られるか<br>検索エンジンはタイトルタグ内のキーワードに注意を払います。<br><strong>テクニックの拡張</strong><br>ここではメソッド C を採用し、それを使用して簡単な CSS を実験します。スタイル title タグの独自性を最大限に活用します。 セックスの利点 title タグは、どのブラウザやデバイスでも正しく処理できるため、非常に安心して使用できます。上げて街に出してみる(持っていけたらhtmlタグをつけて街に出たら…)<br><strong>シンプルスタイル</strong><br>一番簡単で簡単なcssを使うその結果、タイトルに異なるフォントを設定し、それをページ内のすべての <h1> タグに適用できます (外部スタイル シートを使用する場合は、そのスタイルを Web サイト全体に適用できます)。後で Web サイト全体を変更したい場合は、各 <h1> の CSS ルールを変更するだけで、変更の効果がすぐに確認できます。 <br> 自分自身に言いたい超クールなタイトルを付けましょう:<br><span class="code"><h1>超クールなページタイトル</h1></span><br>CSS を使って色、フォント、サイズを変更しましょう:<br> <span class="code">h1 {<br> font-family: Arial、sans-serif;<br> font-size: 24px;<br> color: #369;<br> }</span><br>先ほどと同じように私が言ったことは非常に単純です。図 2-2 に示すように、ページ全体のすべての <h1> はサイズが 24 ピクセルで、青色の Arial (またはデフォルトのサンセリフ) フォントに設定されます。 <br>図 2-2: タイトル スタイルの例<img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/d403782309c7ce2ffc51499ef1aa3159-1.gif">次に、タイトル テキストの下に幅 1 ピクセルの灰色の境界線を追加します (図 2-3):<br><br>h1 {<br> font- family : Arial、サンセリフ;<span class="code"> font-size: 24px;<br> color: #369;<br> padding-bottom: 4px;<br> border-bottom: 1px ソリッド #999;<br> } <br><br></span><br>図 2-3: 灰色の下枠があるタイトル スタイルの例 <img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-2.gif"> 下の枠が呼吸困難にならないように、テキストの下部にさらに内側のパッチをいくつか残しました。タイトルのため、ラベルはブロックレベルの要素であるため、境界線はテキストの下部を埋めるだけでなく、ページ幅全体を埋めるまで右に広がり続けます。<br> また、言及する価値があります。 border の略語を使用します。つまり、行内で宣言します。この宣言では、幅、スタイル、色も定義します。他の設定を試して、他の効果を確認することもできます。<br>                                                                         #p#<br><br>背景の追加<br><strong>背景は、背景色と空白を追加するだけで、タイトルに微妙な効果を加えることができます。例: </strong><br>h1 {<br> font-family: Arial, sans-serif;<span class="code"> font-size: 24px;<br> color: #fff;<br>padding:4px;<br>background-color:#696;<br> }<br><br>タイトルのテキストを白に変更し、周囲に 4 ピクセルの内部パッチ スペースを残し、背景を変更しますたとえば、図 2-4 に示すように、ページ全体にビリヤード台の色の広い緑色の帯があり、2 つの段落が分割されます。 4:インナーパッチと背景色の設定 タイトル例 </span><br>背景とボーダー<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-3.gif"> タイトルの下に細いボーダーと明るい背景を追加するだけで、何も使わずに立体感を出すことができます。画像。<br>この CSS は上記のものとよく似ていますが、いくつかの色を変更し、下部に 2 ピクセルの境界線を追加するだけです<br><strong>h1 {</strong> font-family: Arial, sans -セリフ; <br> フォントサイズ: 24px;<br> カラー: #666;<br> パディング: 4px;<span class="code"> 背景色: #ddd;<br> ボーダーボトム: 2px ソリッド #ccc;<br> } <br><br>同じ色を異なる明るさで使用すると、図 2-5 に示すようにリアルな 3 次元効果を作成できます。 <br><br><br>図 2-5: 設定背景と下端 タイトル </span><br>タイル背景<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/abb61a1e8f6ba9fd01fda63afb390085-4.gif"> 写真を使用すると、よりクリエイティブになります。Photoshop を使用して、上部に黒い枠が付いた 10×10 の小さな画像を作成してみましょう。次に、上から下への灰色のグラデーションを示します (図 2-6 を参照): <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-5.jpg"><br>図 2-6 Photoshop で作成した小さな画像<br>CSS を使用して、この小さな画像を <h1> の下部に配置できます:<br><span class="code">h1 {<br> フォント -ファミリー: Arial、サンセリフ;<br> フォントサイズ: 24px;<br> カラー: #369;<br> パディングボトム: 14 ピクセル;<br> 背景: url(10x10.gif) 繰り返し x ボトム ; <br> }</span><br>ブラウザが背景画像を横方向にのみ配置するようにrepeat-xを設定し(反対のrepeat-yは縦方向に配置する)、配置するために設定します。タイトルの下部に画像を追加し、画像とテキストの間の距離を調整するために内側の下のパッチをいくつか追加します (図 2-7) <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-6.jpg"><br>図 2-7: タイトルの設定例タイル状の背景<br><strong>簡単に置換できるアイコン</strong><br>また、cssdebackground 属性を使用して、テキストの左側に小さなアイコンを設定し、ハードコードされた画像タグを置き換えることもできます。この方法を使用すると、将来 Web サイトの表示効果を簡単に変更できます。CSS ルールを 1 つ置き換えるだけで、Web サイト全体の表示効果を同時に変更できます。<br>コードは、上記のタイル状の背景とほぼ同じです: <br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font-size: 24px;<br> color: #369; <br>padding-left: 30px;<br> background: url(icon.gif) no-repeat 0 50%;<br> }</span><br>テキストの左側に余分なスペースを残します。目的のアイコンを考える必要がないようにし、no-repeat を設定して背景画像がタイル表示されないように指定します (図 2-8 を参照)。同時に、アイコンが 0 ピクセルに配置されるようにします。 <br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/fa27560271db57237aa907152e753926-7.jpg"><br>図 2-8: アイコンが設定されたタイトルの例<br>                                                                         #p#<br><strong>更新が簡単</strong><br>シナリオを想像してみましょう。100 ページある Web サイトでは、上記の方法を使用せず、<img alt="マークアップ言語 - title_HTML/Xhtml_web ページの作成" > を使用します。各タイトルの横にあるアイコンが Web サイトのスタイルに統合されます。数週間後、Web サイトの所有者が Web サイトのスタイルを変更する予定ですが、新しいアイコンのサイズが古いものとは異なります。新しいアイコンのパスを更新するには、100 ページに戻って <img alt="マークアップ言語 - title_HTML/Xhtml_web ページの作成" > タグを変更する必要があります。これらのイベントがプロジェクトの予算に与える影響や、完了期限へのプレッシャーについて考えてみましょう。 <br>これらのあまり重要ではない装飾的なアイコンを CSS ファイルに統合すると、サイト全体のすべてのアイコンを一度に置き換えるのに数分しかかからず、まったく新しい外観が得られるはずです。 <br><strong>カメレオン効果</strong><br> 構造マークアップと表示効果を分離する利点を徐々に理解できるようになりました。以下のテクニックは、先ほど述べたことと多少矛盾しますが、このテクニックは特定の用途に役立つと思います。これは、2003 年 4 月に Fast Company 誌の Web サイト (www.fastcompany.com) で標準的なリファクタリングを行ったときに、私が広範囲に使用したテクニックです。<br> 当時、Web サイトには < がありました。 <br><span class="code"><h3> <img src="http://images.fastcompany.com/icon/first_imp.gif" width alt="マークアップ言語 - title_HTML/Xhtml_web ページの作成" > タグの隣で使用されます。 ="13" style="max-width:90%" alt="マークアップ言語 - title_HTML/Xhtml_web ページの作成" /> FIRST IMPRESSION</h3></span><br>このようにアイコンを Web ページに書き込むことにした理由は 2 つあります。 2 番目の理由は、現在の雑誌の表紙のテーマに合わせて、Web サイト全体の色を毎月変更するためです。もちろん、CSS を使用しているため、この置換作業は非常に簡単です。 <br> アイコンの色を他のページ要素とともに変更するため (そのため、すべての新しい色のアイコンを再作成する必要はありません)。アイコンのセットは白と透明の 2 色で作成されます (各変更を除いて背景色が表示されます)。図 2-9 は、ホームページでの導入前に配置されたアイコンです。<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-8.jpg"><br>図 2-9: 13X13 の透明アイコン (拡大) <br> 透明部分を色で埋めるために、単純な CSS の背景属性を使用して色を設定します。タイトル テキストの後ろではなく、グラフの後ろにのみ表示されるため、 <br><span class="code">h3 img という効果を実現するために、CSS セレクターを使用して <h3> タグ内の画像にのみこのルールを使用しました。 {<br> 背景: #696;<br> }</h3></span><br>この CSS コードは、<h3> タグ内のすべての <img alt="マークアップ言語 - title_HTML/Xhtml_web ページの作成" > タグが背景色を緑色に設定することを意味しますが、この方法では、白い部分だけが白のままになります。この CSS ルールを変更して別の色に変更する必要があります。<br><strong></strong><br> タグを揃えて、ウェブサイト上のすべてのアイコンの色を即座に変更できます。アイコンとテキストを正しく配置するために (垂直方向の中央に配置したい)、次の CSS ルールを追加します: <br><span class="code">h3 img {<br> background: #696;<br>vertical-align: middle ;<br> }</span><br>このルールは、アイコンと <h3> テキスト コンテンツを垂直方向に中央に配置します。図 2-20 は、ゲームのタイトルです。<br><img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-9.gif"><br>図 2-10。 : CSS をアイコンとして使用し、背景色を追加する例 <br> この例では、別の重要な概念を説明することもできます。CSS で指定された背景色は、任意のページ上の指定されたアイコンまたは CSS アイコンの背後に表示されます。<br> の例。たとえば、「便利に更新されたアイコン」の例を振り返って、それに背景色を追加してみましょう: <br><span class="code">h1 {<br> font-family: Arial, sans-serif;<br> font -size: 24px ;<br> カラー: #fff;<br> パディング左: 30px;<br> 背景: #696 url(transparent_icon.gif) no-repeat 0 50%;<br> }</span><br>現在、transparent_icon .gif は、同じルールで前に定義した背景色の上に表示されます (図 2-11)。この例では、背景色は #696 で、ビリヤード テーブルの緑です。<br> <img style="max-width:90%" alt="" style="max-width:90%" src="https://img.php.cn/upload/article/000/000/009/cc8f41f111a40b045665e6a7f3838712-10.jpg"> <br>図 2-11 背景画像と背景色が設定されたタイトルの例<br>この小さなトリックは、色を重視したページに小さな丸い角を追加したり、アイコンを装飾したりする場合に非常に役立ちます。を CSS ファイルに追加しておけば、将来更新する予定があるときに簡単に置き換えることができ、将来的には多くの作業を節約できます。 <br>一般的に使用されている方法を比較することで、ビジュアルブラウザー、非ビジュアルブラウザー、またはその他のデバイスのいずれであっても、タイトルタグを正しく使用することで、以前のタイトルの意味を正しく理解して表示できる利点を発見できることを願っています。適切な方法を使用すると、検索エンジンもインデックスを作成し、CSS を使用して表示する必要がある効果を簡単に適用および変更できます。                                                                                                                                          </h3> </h3> </h1> </h1> </h1> </h1></b></span> </h6> </h1> </h1> </h1> </h3> </h3> </h2> </h1> </h1>

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート