[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

162users がブックマーク コメント 16

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

React で h1-h6 を正しく使い分ける

162 users zenn.dev/neet

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント16件

  • 注目コメント
  • 新着コメント
miki3k
ハイパーテキストをマークアップするために作られた仕様なので

その他
mayumayu_nimolove
webデザイナー経験者は無意識にやっちゃうけど webアプリケーションでは必要ないだろと思ったけどアクセシビリティで使うのか。

その他
otchy210
タイトル読んで「Context 使ってインクリメントかな?」と思ったので、答えが合っていて嬉しかった。

その他
mohritaroh
"MDNでは1つのウェブページ内ではh1要素を1つだけ使うことがベストプラクティスとして紹介されています。"

その他
chocodoughnut
見出しレベルを問わない見出しタグが欲しい

その他
otchy210
otchy210 タイトル読んで「Context 使ってインクリメントかな?」と思ったので、答えが合っていて嬉しかった。

2022年10月27日 リンク

その他
ejointjp
ウェブアプリはもうセマンティックHTMLとは別の概念で作れるようにすべきでは

その他
miki3k
miki3k ハイパーテキストをマークアップするために作られた仕様なので

2022年10月27日 リンク

その他
mayumayu_nimolove
mayumayu_nimolove webデザイナー経験者は無意識にやっちゃうけど webアプリケーションでは必要ないだろと思ったけどアクセシビリティで使うのか。

2022年10月27日 リンク

その他
programmablekinoko
亡霊のように蘇るマークアップ要素。そのうちセマンティックスは属性で指定する方が良いのでは感

その他
yasu-log
自動hタグに相当するDocument Outline Algorithmとしてほとんどブラウザや支援技術に実装されなかったから、自前で頑張るのが現在は望ましく、ReactのContext APIで工夫する手段が紹介されている。

その他
repon
lintでやるしか無いんじゃないかな

その他
ultimatebreak
h1何個でもオッケーだったの消されてたのか

その他
neco_modoki
ここまで徹底しないといけないほど大事な要素なのか...奥深いマークアップの世界

その他
shishikaba
このご時世hに数字はもう要らないよなぁってなる

その他
kvx
h1-6はhtml側でどうにかして欲しいなー。↓の-1,0,+1方式はいいな。

その他
hirata_yasuyuki
section で解決出来ないのか。厳しい...

その他
azukiazusa
見出しレベルを Context API で管理する、なるほど...

その他
mominis
直前の見出し要素のレベルを基準に-1, 0, +1したレベルの見出しとして扱われるような要素があれば解決できるのかなこれは

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「React で h1-h6 を...」が注目されています。

気持ちをシェアしよう

ツイートする

React で h1-h6 を正しく使い分ける

Web の基礎を支える HTML の最も重要な要素の一つである h1-h6 要素ですが、 React を始めとするコンポ... Web の基礎を支える HTML の最も重要な要素の一つである h1-h6 要素ですが、 React を始めとするコンポーネントベースのライブラリを特に意識せずに利用すると、SEOやアクセシビリティー上の意図せぬ問題を生むことがあります。 この記事では、 React を例に取り h1-h6 を使うことで生じる問題と、その解決策を3つずつご紹介します。 尚、この記事で紹介するコードスニペットは GitHub リポジトリに動作する状態で公開しておりますので、併せてご参照ください。 前提知識 読者のみなさまは、HTMLの要素 h1-h6 にどのような役割があるか説明できますか? 大きい文字を出したかったらh1を使って、それより少し小さい文字を出したかったらh2を使う...わけではありませんでした。h1-h6 は 「見出し要素」 と呼ばれ、文章の見出しとなるテキストをマークアップするのに用いられて

ブックマークしたユーザー

  • techtech05212024年05月25日 techtech0521
  • field_combat2024年05月23日 field_combat
  • KasuyaMofu2023年09月01日 KasuyaMofu
  • ryu19j2023年01月09日 ryu19j
  • buzztaiki2022年12月21日 buzztaiki
  • okyawa2022年11月02日 okyawa
  • nowrika2022年10月31日 nowrika
  • toshi-toma2022年10月29日 toshi-toma
  • hush_in2022年10月28日 hush_in
  • sssddr2022年10月27日 sssddr
  • wonder-wall2022年10月27日 wonder-wall
  • dhrname2022年10月27日 dhrname
  • locke-0092022年10月27日 locke-009
  • rskull2022年10月27日 rskull
  • s-0samu2022年10月27日 s-0samu
  • mohritaroh2022年10月27日 mohritaroh
  • Fleiheit2022年10月27日 Fleiheit
  • mas-higa2022年10月27日 mas-higa
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /