Softonic

CSSアコーディオン生成ツール

ステップ 1 / 4 内容

アコーディオンの内容

見出しとパネル本文をプレーンテキストで入力します。HTMLのような文字列は、生成コード内でエスケープされます。

アコーディオンの文章と設定は、このブラウザータブ内だけに保持されます。Livewireで送信したり、URLに含めたり、アップロードしたりしません。タブを閉じると保存した手順の状態は消去されます。

意味に沿った<details>と<summary>を使い、3項目のアコーディオンを作成できます。プレーンテキストの見出しと本文、色、余白、開閉方法を設定し、プレビュー後にコードをコピーするか単体HTMLファイルを保存します。編集はすべてこのブラウザータブ内で行われます。

CSSアコーディオンの作り方

  1. 1

    3項目を書く

    各項目に短い見出しと本文を入力します。HTMLのような入力は実行されず、エスケープされます。

  2. 2

    デザインを決める

    4つの6桁カラー、0～24 pxの角丸、8～32 pxの内側余白を指定します。

  3. 3

    開閉方法を選ぶ

    複数を同時に開くか、標準のname属性で1つだけ開くかを選び、山形またはプラス・マイナスのアイコンを指定します。

  4. 4

    確認して書き出す

    ポインターとキーボードでプレビューを試し、コードをコピーするかUTF-8のHTMLファイルを保存します。

生成されるコード

各項目にはブラウザー標準の開閉要素を使用します。

<details class="generated-accordion" open>
  <summary>何が含まれていますか？</summary>
  <div class="generated-accordion__panel">詳細をここに入力します。</div>
</details>

生成CSSは、枠線、見出し背景、文字、フォーカス、余白、角、アイコンを設定します。margin-inline-startなどの論理プロパティと右から左の表示規則を含みます。動きを減らす設定を利用する閲覧者には、prefers-reduced-motionでアイコンの切り替え効果を外します。

複数を開く場合と1つだけ開く場合

設定 生成マークアップ 動作
複数 共通のnameなし 各項目を個別に開閉
1つ すべてにname="generated-accordion" 対応ブラウザーでは1つを開くと別の項目が閉じる

排他的なdetailsグループに未対応の古いブラウザーでも操作できますが、複数の項目が同時に開く場合があります。

安全なプレーンテキスト

見出しと本文は文字列として扱われます。<、>、&、引用符、アポストロフィは書き出し時にエスケープされるため、貼り付けたタグは実行されず文字として表示されます。リンクやリストが必要な場合は、書き出し後に確認済みのマークアップを追加してください。

公開前のアクセシビリティ確認

  • Tabで各summaryに移動し、EnterとSpaceで開閉する。
  • フォーカス色と見出し背景・ページ背景のコントラストを確認する。
  • 拡大表示、狭い画面、右から左のページで試す。
  • ページの主な説明を閉じたパネルだけに入れない。

よくある質問

いいえ。開閉には標準の<details>と<summary>を使います。保存される部品はHTMLとCSSだけです。

はい。1項目モードを選ぶと、3つの<details>に同じname属性が付きます。未対応ブラウザーでは個別開閉に戻ります。

入力は意図的にプレーンテキストとして扱い、HTML文字をエスケープします。必要であれば、書き出し後に確認済みのマークアップを追加してください。

いいえ。文章、設定、プレビュー、コピー、保存はブラウザー内で完結します。複数ページでは現在のタブのsessionStorageに一時保存し、URLには含めません。

関連ツール

バイナリからASCIIへの変換ツール

バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを取得できます。7ビットと8ビットのエンコードに対応。

Base64 → Hex 変換ツール

Base64文字列を、その背後にあるバイトの16進表現へ変換します。トークン、鍵、証明書、JWTの確認に便利です。

BinaryからHexへのコンバーター

バイナリ入力を大文字の16進数値に変換します。0と1以外は無視され、先頭の0は保持されません。

BBCodeからHTMLへのコンバーター

BBCode（掲示板マークアップ）をきれいなHTMLへ変換します。装飾タグ、リスト、引用、コード、画像、リンク、表に対応。

2進数から10進数へ変換

2進数を瞬時に10進数へ変換します。各ビットがどのように寄与するかが分かる位取り展開を表示します。

2進数から8進数への変換ツール

2進数を3ビットずつまとめて8進数に変換します。Unixのパーミッション、レガシーシステム、コンパクトな数値表示に便利です。