Web

Webページの見出しレベルが分かりづらいときないですか?

投稿日:

以下のスクリーンショットは、とある Webページです。

見出しのレベルが分かりづらいです

どの行がどのレベルの見出しか分かるでしょうか?

※ Webページの見出しには、h1, h2, h3, h4, h5 などといった階層レベルがあります。

この例の場合、少し大きさの違う見出しが並んでおり、行頭に「#」もあるので、まだ分かりやすい方ではあります。しかし、このどちらかの1つの見出しだけが途中で現れたとしたら、その見出しがどのレベルなのか分かるでしょうか?結構難しいのではないでしょうか。

普段インターネットの記事やマニュアルを読んでいると、ときどきこのような「見出しのレベルが把握できず、文章の構成、つながりが分かりづらい」問題に出会います。これが意外と困るのです。

そこで紹介したいのが、Chromeブラウザの「H-tag」という拡張機能です。

この拡張機能を導入して、ツールバーに現れたアイコンをクリック → [Show tag] を選択することによって、今表示されているページの見出しが強調表示されます。

H-tag を使う

こんな感じで表示されます。

見出しが強調表示されます

強調し過ぎな気がしないでもないですが、Webサイト上の文章をスムーズに読み進めるためには必須と言っていい機能だと思っています。

同じような不満を抱えている方がいましたら、 H-tag の利用をお勧めします。

📂-Web

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Firefox

Firefox のコンテンツブロッキング (Enhanced Tracking Protection)

Firefox の コンテンツブロッキング 機能について説明します。

no image

ドメインに関して気を付けること

目次TLS証明書ドメインの乗っ取り1. TLS証明書が発行されてしまうとまずい2. メールアドレスが利用されてしまう TLS証明書 証明書の期限を短くする。 ドメインの乗っ取り 1. TLS証明書が発 …

Web Vitals

<script>タグのdefer/async属性について(その2:実例)

script タグの属性によって、JavaScript ファイルがどのように読み込まれるのか、3パターンを実際のWebページを使って比べます。

Web

.htaccess ファイルにはWebアクセスできないようになっている

.htaccess ファイルにはWebアクセスできないようになっているという話です。

Web

【HTML】picture 要素について

目次1. <picture> 要素とは?2. 仕様3. <source> 要素4. 利用例5. 実際に使用された画像がどれかを JavaScript で取得する6. 注意点7. …