マークアップ言語 - タイトル

123WORDPRESS.COM HTML チュートリアルセクションに戻るには、ここをクリックしてください。
前:第1章リスト 原典
標準化されたデザインソリューション - マークアップ言語とスタイルマニュアル
Web 標準ソリューションマークアップとスタイルハンドブック
パート 1: マークアップを習得する
第2章タイトル
概要：
すべての Web ページにタイトルが必要なだけでなく、正しくマークアップされていれば、Web ページのデザインと使いやすさが大幅に向上します。
見た目の点では、Web ページのタイトルは通常、本文よりも大きなフォントサイズで表示され、色やフォントが異なる場合があります。タイトルの目的は、W3C で説明されているように、「次のセクションで説明するトピックを簡単に説明する」こと、つまり Web ページ内のさまざまな段落の概要を示すことです。
提示したい情報を最も効果的に活用するページタイトルを作成するにはどうすればよいでしょうか。このセクションでは、タイトル作成の一般的なアプローチをいくつか紹介し、最も役立つアプローチを見つけてから、CSS のヒントとコツを使用して最適なアプローチを改善します。
ドキュメントのタイトルを作成する最適な方法は何ですか?
この質問に答える前に、タイトルをドキュメントの上部に配置すると仮定しましょう。同様の効果を実現する 3 つの方法を見てみましょう。
方法 A: それは意味がありますか?
とてもクールなページタイトル
 タグは状況によっては便利なタグですが、ページタイトルにはあまり意味がありません。この方法を使用する唯一の利点は、見出しクラスに CSS スタイルを指定して、テキストをタイトルのように見せることができることです。
.見出し{
フォントサイズ: 24px;
フォントの太さ: 太字;
色: 青;
}
これで、heading クラスでマークされたすべての見出しが大きくなり、太字になり、青くなります。すばらしいですね。しかし、CSS をサポートしていないブラウザーを使用してこのページにアクセスするとどうなるでしょうか。
たとえば、古いブラウザではサポートされていない外部スタイルシートファイルに CSS スタイルを配置するとどうなるでしょうか。また、スクリーンリーダーが障害を持つユーザー向けにページを読み上げるとどうなるでしょうか。これらの手段でページにアクセスするユーザーは、見出しと本文の違いを見ることも聞くこともできません。
注釈メソッド class="heading" はタグコンテンツの意味を少し説明しますが、 はほとんどのブラウザーのデフォルトの表示スタイルを変更するだけの汎用コンテナーです。
検索エンジンがこのページをクロールする際、 タグは存在しないかのようにスキップされ、そこに含まれるキーワードの重み付けは増加されません。検索エンジンとページタイトルの関係の詳細については、このセクションの後半で説明します。
最後に、 タグはインライン要素であるため、通常はメソッド A のコンテンツを や <div> などの別のブロックレベルコンテナーに配置して、1 行だけを占めるようにする必要があります。これにより、不要なコードが大量に生成されます。必要なコンテナーを追加しても、CSS をサポートしていないブラウザーではテキストが元の形式で表示されるため、ユーザーはタイトルと本文の違いを確認できません。

前のページ1 2 3 4 5 次のページ続きを読む

<<: TypeScript 列挙の基本と例

>>: CentOS 起動時にカーネルモジュール overlayfs 操作を自動的にロードする