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 操作を自動的にロードする
この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...
1. MySQL 独自のストレステストツール - Mysqlslap mysqlslap は、mys...
目次1. 要素オフセットシリーズ2. 要素表示領域クライアントシリーズ3. 要素スクロールシリーズ1...
目次概要コードの実装シングルトンパターンの簡易版改良版プロキシバージョンシングルトンモード遅延シング...
目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...
目次序文1. ssコマンド2. Zabbix監視マシンの全体的なソケットステータス2.1. スクリプ...
はい、CSS にも正規表現があります (アーメン) CSS で目立つための 2 つの強力なツール: ...
httpリターンコードリスト(以下は概要です)詳細な中国語の説明についてはここをクリックしてくださ...
目次1. インストール2.APi 3. react-beautiful-dnddemo 3.1dem...
この記事では、最も単純なビデオ連射機能をシミュレートするデモを作成します。アイデア:再生する動画と同...
Linuxでシェルスクリプトを共有して、MySQLのマスタースレーブ状態を監視し、エンタープライズW...
1. イベントが有効になっているかどうかを確認する'%sche%' のような変数を表...
CSS3 では画像の色を変更できます。これからは複数の絵をデザインする必要がなくなり、いつでも修正で...
文字列を置き換えるには、次の形式を使用する必要があります。 $ sed s/置換対象文字列/置換文字...
この記事は、VMware Workstation 12 ProのインストールLinuxチュートリアル...