コンポーネント

Translation note (2026-04-30). v2.0.0 adds RTL support and a refreshed 2026 framework comparison. The English source is the canonical reference while these translations catch up. See https://skeletonic.io/about/ · https://skeletonic.io/components/ · https://skeletonic.io/benchmarks/.

以下のすべてのサンプルは、デモ対象のスタイルシートそのもの でレンダリングされています。プリプロセッサ不要。JavaScript 不要。追加の依存関係不要。どのスニペットも新しい HTML ファイルにコピーするだけで動作します。

入力

訪問者がクリック、タップ、またはフォーカスしてページを操作するインタラクティブ要素です。

ボタン

セマンティックでテーマ設定可能なアクショントリガーです。ソリッドとアウトラインのバリアントがそれぞれ6つのブランドカラーで提供されます。

<a href="#" class="button primary">Primary</a>
<a href="#" class="button secondary">Secondary</a>
<a href="#" class="button tertiary">Tertiary</a>

Primary Secondary Tertiary

アウトラインバリアント：

<a href="#" class="button primary-outline">Outline</a>
<a href="#" class="button secondary-outline">Outline</a>

Outline Outline

アクセシビリティに関する注記。 すべての .button バリアントには :focus-visible リングと 24×24 px の最小ヒットエリア (WCAG 2.2 SC 2.5.8) が備わっています。ページ内のアクションには <button type="button"> を、ナビゲーションには <a href> のみを使用してください。

バッジ

ステータス、カウント、カテゴリ用のコンパクトなラベルです。テキストサイズは固定されているため、バッジは周囲のテキストと揃います。

<span class="badge">Default</span>
<span class="badge primary">Primary</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge danger">Danger</span>

Default Primary Success Warning Danger

アクセシビリティに関する注記。 バッジはデフォルトで装飾的です。バッジが唯一のシグナル（例：未読数）を伝える場合は、視覚的に隠されたヘルパーでラップしてください：<span class="visually-hidden">未読メッセージ3件</span>。

フィードバック

訪問者に何かが起こった、または起こりそうであることを伝えるサーフェスです。

アラート

セマンティックな意図を持つステータスメッセージです。v2.0.0 ではすべてのバリアントが .alert-{primary,secondary,info,success,warning,error} の下に明示的に名前空間化されている ため、バリアントクラスがページ上の他のステートクラスと衝突することはありません。

<div class="alert alert-primary" role="alert">
  <strong>お知らせ。</strong> これはプライマリアラートです。
</div>
<div class="alert alert-success" role="status">
  <strong>保存完了。</strong> 変更が保存されました。
</div>
<div class="alert alert-warning" role="alert">
  <strong>注意。</strong> この操作は共有状態に影響します。
</div>
<div class="alert alert-error" role="alert">
  <strong>エラー。</strong> フォームを保存できませんでした。
</div>

お知らせ。 これはプライマリアラートです。

保存完了。 変更が保存されました。

注意。 この操作は共有状態に影響します。

エラー。 フォームを保存できませんでした。

アクセシビリティに関する注記。 即時の注意が必要なメッセージ（エラー、警告）には role="alert" を、緊急でない確認には role="status" を使用してください。どちらもメッセージが表示された瞬間に支援技術に公開されます。

サーフェス

関連するコンテンツをフレーム化し、グループ化するコンテナです。

カード

単一のまとまったユニット用のボーダー付きパディングコンテナです。flex-N グリッドと組み合わせてレスポンシブなカードウォールを作成できます。

<section class="row">
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">軽量</h3>
      <p>ミニファイ済み 38.8 KB、gzip圧縮 7.7 KB。</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">アクセシブル</h3>
      <p>WCAG 2.2 準拠。そのまま使えます。</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">モジュール式</h3>
      <p>カスケードレイヤーで簡単にオーバーライド。</p>
    </div>
  </article>
</section>

軽量

ミニファイ済み 38.8 KB、gzip圧縮 7.7 KB。

アクセシブル

WCAG 2.2 準拠。そのまま使えます。

モジュール式

カスケードレイヤーで簡単にオーバーライド。

アクセシビリティに関する注記。 各カードをセマンティックなランドマーク（<article>、<section>）でラップし、コンテンツを見出し（<h3>）で始めてください。スクリーンリーダーのユーザーは、カードリストをファーストクラスのナビゲーション可能な領域として移動できます。

フォーム

ユーザーデータを収集するための入力、ラベル、グループ化です。

フォームフィールド

ラベル、テキスト入力、テキストエリア、フィールドセット、レジェンド — すべてデザインシステムの他の部分と一貫したサイズで提供されます。

<form>
  <label for="name">お名前</label>
  <input id="name" type="text" required>

  <label for="email">メールアドレス</label>
  <input id="email" type="email" required class="input-primary">

  <label for="msg">メッセージ</label>
  <textarea id="msg" rows="4"></textarea>

  <button type="submit" class="button primary">送信</button>
</form>

お名前

メールアドレス

メッセージ

アクセシビリティに関する注記。 すべての入力にはプログラム的に関連付けられた <label for="…"> が必要です。関連するコントロールは <fieldset> と <legend> でグループ化してください。必須フィールドは required 属性（およびラベルテキスト内の目に見えるアスタリスク）で示してください。

レイアウト

グリッド、コンテナ、ヘッダーなど、ページ全体の構造を形成する構造プリミティブです。

グリッド

flexbox ベースのレスポンシブ flex-N グリッド（1 → 12カラム）。.row 親要素がギャップとラップを自動的に処理します。

<div class="row">
  <div class="flex-6">半分</div>
  <div class="flex-6">半分</div>
</div>
<div class="row">
  <div class="flex-4">3分の1</div>
  <div class="flex-4">3分の1</div>
  <div class="flex-4">3分の1</div>
</div>

半分

3分の1

アクセシビリティに関する注記。 視覚的な順序は DOM の順序と一致させてください。flex-direction: row-reverse や order: で行を並び替えるのは避けてください — スクリーンリーダーとキーボードユーザーは描画ではなくソースに従います。

レスポンシブなハンバーガートグル付きの完全な CSS のみのヘッダーです。JavaScript ゼロ。 以下のスニペットを、既に skeletonic.min.css を読み込んでいる新しい HTML ページにコピーするだけで、メニューが正しく折りたたみ、展開、フォーカストラップを行います。

<style>
  .sk-header{position:relative;display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border:1px solid #e4e4e7;border-radius:.5rem;background:#fff;}
  .sk-header .sk-brand{font-weight:600;color:#0a0a0a;text-decoration:none;}
  .sk-header .sk-toggle{position:absolute;left:-9999px;}
  .sk-header .sk-burger{display:none;margin-left:auto;cursor:pointer;padding:.625rem .75rem;border:1px solid #e4e4e7;border-radius:.375rem;font-size:1.125rem;line-height:1;min-width:2.75rem;min-height:2.75rem;}
  .sk-header .sk-burger:focus-within,.sk-header .sk-toggle:focus-visible+.sk-burger{outline:2px solid hsl(210,100%,42%);outline-offset:2px;}
  .sk-header .sk-menu{list-style:none;display:flex;gap:.25rem;margin:0 0 0 auto;padding:0;}
  .sk-header .sk-menu a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem .875rem;border-radius:.375rem;color:#1a1a1a;text-decoration:none;}
  .sk-header .sk-menu a:hover{background:#f4f4f5;}
  @media (max-width:640px){
    .sk-header .sk-burger{display:inline-flex;align-items:center;justify-content:center;}
    .sk-header .sk-menu{display:none;flex-direction:column;gap:0;position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid #e4e4e7;border-radius:.5rem;padding:.375rem;box-shadow:0 4px 24px rgba(0,0,0,.08);z-index:10;}
    .sk-header .sk-menu a{padding:.75rem 1rem;border-bottom:1px solid #f4f4f5;}
    .sk-header .sk-menu li:last-child a{border-bottom:0;}
    .sk-header .sk-toggle:checked ~ .sk-menu{display:flex;}
  }
</style>
<header class="sk-header">
  <a class="sk-brand" href="#">ブランド</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="ナビゲーション切替">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">ホーム</a></li>
    <li><a href="#">ドキュメント</a></li>
    <li><a href="#">コンポーネント</a></li>
    <li><a href="#">概要</a></li>
  </ul>
</header>

ブランド

アクセシビリティに関する注記。 非表示のチェックボックスはタブ順序に残るため、キーボードユーザーは Space または Enter でメニューを開けます。<label> はチェックボックス自体がアクセシブルな名前のソースであるため aria-hidden を持ちます。ウィンドウを640 px以下に縮小すると、ハンバーガートグルが表示されます。

a11y の詳細を見る → · パレットを見る →

Skeletonic Stylus

入力

ボタン

バッジ