HTML + 小さな魔法で、読みやすいウェブを。

html.cafe はシンプルな HTML スニペット、UI コンポーネント、アクセシビリティのヒントをコーヒー片手に提供する場所です。初心者〜中級者向けに分かりやすく整理しています。

120+snippets

300Kmonthly visits

10contributors

即使えるスニペット

コピーしてすぐ使える HTML + CSS の小さな例。

<button class="btn btn-primary">Try</button>

アクセシビリティ

色コントラスト、キーボード操作、ARIAラベルの例。

<nav aria-label="Main">…</nav>

パフォーマンス重視

軽量で依存を減らす設計。

<script defer>…</script>

☕

今日のスニペット

モーダルのシンプルなアクセシブル実装

<dialog id="modal">
  <form method="dialog">
    <p>Hello from modal</p>
    <button>Close</button>
  </form>
</dialog>
<button onclick="document.getElementById('modal').showModal()">Open

スニペットギャラリー

小さなコンポーネントを集めました — ボタン、カード、フォーム、ナビゲーションなど。

レスポンシブカード

画像と説明が入るカード。

<article class="card">…</article>

フォームバリデーション

HTML5 の検証を活かした実装。

<input required pattern="\d+">