ハクソク

世界を動かす技術を、日本語で。

覚えておく価値のある小さなネイティブウェブのテクニック

2026年8月21日原文(htmlcat.net)

概要

HTMLcat は、ウェブ開発で役立つ 小さなネイティブテクニック を紹介するリソース。 各メモは 便利な機能 と 短い例、さらに注意点をセットで解説。 一部機能は限定的または実験的 なので、サポート状況に注意。 フォールバック の用意と 実ブラウザ・支援技術でのテスト が推奨事項。 HTML、CSS、JSの 覚えておきたいテクニック集。

HTMLcat: 覚えておきたい小さなウェブテクニック集

  • HTMLcat は、ちょっとした ウェブ開発の小技 をまとめたリファレンス

  • 各メモは、 機能の概要、 簡単なコード例、 注意点 をセットで掲載

  • 実験的・限定的な機能 も含まれているため、 サポート状況の確認 が必要

  • フォールバック の実装や、 実際のブラウザ・支援技術での動作確認 が重要

  • HTML、CSS、JavaScript を中心に、 42個以上のテクニック を紹介

    • 例: JSでデバイス種別判定
    • 例: CSSでスクロールバー非表示
    • 例: 空タグのCSSハンドリング
    • 例: CSSのclamp()利用
    • 例: classList.toggle()による動的クラス切り替え
    • 例: 電話・メールリンクのHTML記述
    • 例: テキスト選択時のハイライト色カスタマイズ
    • 例: :has() 関係セレクタの活用
    • 例: ::markerでリストマーカーのスタイリング
    • 例: Intl.NumberFormatでローカライズ価格表示
    • 例: inert属性でサブツリー非活性化
    • 例: :target疑似クラスの利用
    • 例: translateグローバル属性
    • 例: prefers-color-schemeでダーク/ライトモード対応
    • 例: Container Queriesや@scopeによるスコープ付きCSS
    • 例: dialog要素の活用とコントロール
    • 例: text-wrapでより良い折り返し
    • 例: accent-colorでフォームのネイティブ色変更
    • 例: Custom Highlight APIによるハイライト制御
    • 例: color-mix()による透明色表現
    • 例: Scroll-driven animationsの導入
    • 例: Popover APIやView Transitions APIの使い方
    • 例: details要素とname属性で排他的アコーディオン
    • 例: hidden=until-foundで検索可能な非表示コンテンツ

  • 各テクニック は 短く実用的な例 つきで、 即実践可能

  • サポート状況ラベル で、どのブラウザで使えるか一目で分かる設計

  • 検索機能 や カテゴリ別整理 で、目的のテクニックを素早く発見可能

  • 新しいCSSやHTML API の動向もキャッチアップ可能な情報源

  • No post-its found. は、該当するメモが見つからない場合のメッセージ

Hackerたちの意見

それは「トリック」っていうより、HTMLやCSSのいろんな機能についての紹介って感じだね。MDNをクリックしていれば、似たようなことがもっと詳しく、たくさんの例と一緒に見つけられるよ。

└

確かに、「トリック」って言うのはちょっと大げさかも。あのウェブサイトは、私が覚えておきたい機能をまとめた小さな意見集みたいなもので、MDNみたいな権威あるリファレンスの代わりにはならないんだ。もっとその位置付けを明確にした方がいいかもね。

└

確かに「トリック」ってわけじゃないけど、公式ドキュメントをランダムにブラウジングするのとは全然違うよね。

└

何が違うの？

良い説明やヒントはあるけど、サイトに本当に必要なのは例だと思う。コードを見るだけじゃあんまり役に立たないし。説明も短すぎて、ホームページのツールチップでもいいくらいだよ。このページのコンセプトは「覚えておくべきウェブトリックのコレクション」なのに、bash（例えば du -hd 1 . | sort -hr）が何でここにあるのか全然理解できない。

└

その通りだね、フィードバックありがとう。最初はライブ例（主にCodePenを使って）を入れてたんだけど、メンテナンスに時間がかかりすぎてやめちゃった。Bashのエントリーは、ちゃんと編集してない半端な個人的メモみたいなもので、たぶん範囲外でもあるね。

└

まぁ、個人的には * の方が -d 1 . よりも普段使いにはずっと楽だと思う。ドットファイルには自動的に展開されないけど、普通にタイピングするには、これってロボットかエイリアス作る人のアドバイスみたいに見えるね。

各ポストイットは、役に立つプラットフォーム機能と、見つけられない小さな例をペアにしている。各ポストイットはコードだけを示していて、その結果は見せていない。

└

コードが例だね。「デモ」って言った方が、君が考えてることに合ってるかも。

スクロールバーを隠さないでね :)

└

「スクロールバーを隠す」っていうメモのことなら、100%同意だよ(: 特定の状況では役立つこともあるけど、一般的には良いプラクティスじゃないから、その注意書きを入れたんだ。

└

うん、それが最初に目が行ったやつだね。スクロールバーを隠すのが許されるシナリオって、無限キャンバスで自分の非線形のものを描くときくらいしか思いつかない（それでも、見た目や動作がネイティブにはならないからがっかりすることもあるし）。あとは、地図みたいなもので、スクロールをズームにリマップして、スクロールイベントを消費するよりも、バックグラウンドの見えないスクロールエリアを使いたい場合とかね。要するに、ネイティブのスクロールバーが間違っている場合を除いて、どんな状況でも隠しちゃダメだよ。

Hacker Newsで議論の続きを見る