123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックしてください。 前:第1章 リスト<br />原典 標準化されたデザインソリューション - マークアップ言語とスタイルマニュアル Web 標準ソリューション マークアップとスタイル ハンドブック パート 1: マークアップを習得する 第2章タイトル 概要: すべての Web ページにタイトルが必要なだけでなく、正しくマークアップされていれば、Web ページのデザインと使いやすさが大幅に向上します。 見た目の点では、Web ページのタイトルは通常、本文よりも大きなフォント サイズで表示され、色やフォントが異なる場合があります。タイトルの目的は、W3C で説明されているように、「次のセクションで説明するトピックを簡単に説明する」こと、つまり Web ページ内のさまざまな段落の概要を示すことです。 提示したい情報を最も効果的に活用するページ タイトルを作成するにはどうすればよいでしょうか。このセクションでは、タイトル作成の一般的なアプローチをいくつか紹介し、最も役立つアプローチを見つけてから、CSS のヒントとコツを使用して最適なアプローチを改善します。 ドキュメントのタイトルを作成する最適な方法は何ですか? この質問に答える前に、タイトルをドキュメントの上部に配置すると仮定しましょう。同様の効果を実現する 3 つの方法を見てみましょう。 方法 A: それは意味がありますか? <span class="heading">とてもクールなページタイトル</span> <span> タグは状況によっては便利なタグですが、ページ タイトルにはあまり意味がありません。この方法を使用する唯一の利点は、見出しクラスに CSS スタイルを指定して、テキストをタイトルのように見せることができることです。 .見出し{ フォントサイズ: 24px; フォントの太さ: 太字; 色: 青; } これで、heading クラスでマークされたすべての見出しが大きくなり、太字になり、青くなります。すばらしいですね。しかし、CSS をサポートしていないブラウザーを使用してこのページにアクセスするとどうなるでしょうか。 たとえば、古いブラウザではサポートされていない外部スタイルシート ファイルに CSS スタイルを配置するとどうなるでしょうか。また、スクリーン リーダーが障害を持つユーザー向けにページを読み上げるとどうなるでしょうか。これらの手段でページにアクセスするユーザーは、見出しと本文の違いを見ることも聞くこともできません。 注釈メソッド class="heading" はタグ コンテンツの意味を少し説明しますが、<span> はほとんどのブラウザーのデフォルトの表示スタイルを変更するだけの汎用コンテナーです。 検索エンジンがこのページをクロールする際、<span> タグは存在しないかのようにスキップされ、そこに含まれるキーワードの重み付けは増加されません。検索エンジンとページ タイトルの関係の詳細については、このセクションの後半で説明します。 最後に、<span> タグはインライン要素であるため、通常はメソッド A のコンテンツを <p> や <div> などの別のブロック レベル コンテナーに配置して、1 行だけを占めるようにする必要があります。これにより、不要なコードが大量に生成されます。必要なコンテナーを追加しても、CSS をサポートしていないブラウザーではテキストが元の形式で表示されるため、ユーザーはタイトルと本文の違いを確認できません。 前のページ1 2 3 4 5 次のページ 続きを読む |
>>: CentOS 起動時にカーネルモジュール overlayfs 操作を自動的にロードする
Mysql の追加、削除、変更、クエリステートメントのシンプルな実装追加されたレコード: テーブル名...
1. 背景最近、独立した開発者がUIデザインを行うのを支援するために、uideaというWebサイト...
Elasticsearchは現在非常に人気があり、多くの企業が利用しているため、esを知らないと軽蔑...
目次テーブルの目的例えばテーブル分割戦略すでにオンラインになっている実行中のテーブルはどうすればよい...
Tomcatをインストールする前に、まずJDK環境をインストールしてくださいLinux サーバー上で...
目次質問: 1. リモートログイン権限を有効にする: 2. MySQLの権限を更新します。 3. テ...
この記事の例では、スターフラッシュ効果を実現するためのjsの具体的なコードを参考までに共有しています...
目次作成機能配列プロトタイプの削減Array.prototype.reduceRightパイプ関数作...
vue-element-admin インポートコンポーネントのカプセル化テンプレートとスタイルまず、...
目次導入ダウンロードしてインストールする設定docker-composeをインストールする導入Doc...
この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します...
wangEditor は、JavaScript と CSS に基づいて開発された Web リッチ テ...
私はかつて、ウェブサイトを一度も構築したことのない人々が、初心者向けのウェブサイト構築方法に関する私...
この記事では、Jingdong製品詳細ページの虫眼鏡効果コンポーネントに似たvue3カプセル化の具体...
Gtid + Mha + Binlog サーバー構成: 1: テスト環境OS: CentOS 6.5...