Softonic

CSSモーダルジェネレーター

ステップ 1 / 2
結果

モーダルダイアログは、全画面のオーバーレイにパネルを重ねた構造です。背景がページを暗くして操作をブロックし、パネルがタイトル、本文、アクションボタンを載せます。このジェネレーターは、.modal-backdrop、.modal-panel、.modal-header、.modal-body、.modal-actions の5つのクラスで、この構造のCSSを書き出します。パネルの幅、角丸、アクセントカラーを選んで、結果をプロジェクトにコピーしてください。

モーダルのスタイルを生成する手順

  1. 1

    パネルの幅を設定する

    希望する幅をピクセル単位で入力します。パネルは `min(100%, Npx)` を使うので、小さな画面に合わせて縮みます。

  2. 2

    角丸を選ぶ

    パネルの角の丸みを選びます。角の鋭い四角から、完全に丸いカードまで選べます。

  3. 3

    アクセントカラーを選ぶ

    ヘッダー上部の4 pxのアクセントバーの色を選びます。

  4. 4

    CSSをコピーする

    コードをコピーし、自分のマークアップで同じクラス名（backdrop、panel、header、body、actions）を使います。

生成されるCSSの内容

コードは5つのクラスをスタイリングします：

  • .modal-backdrop: 固定の全画面レイヤー。暗い半透明の背景（rgba(17, 24, 39, .62)）、中央寄せのグリッド、パネル周囲の24 pxの余白。
  • .modal-panel: 幅 min(100%, Npx) の白いカード。選んだ角丸、柔らかな影、角の切り落とし付き。
  • .modal-header: 選んだ色の4 pxのアクセントバー。その下に20 px 24 pxのパディングの見出しエリア。
  • .modal-body: 18 px 24 pxのパディングのコンテンツエリア。
  • .modal-actions: 10 px間隔で右寄せに並ぶボタン行。

対応するHTML構造

CSSは次のマークアップを想定しています：

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>確認</h2>
    </div>
    <div class="modal-body">
      <p>続行しますか？</p>
    </div>
    <div class="modal-actions">
      <button>キャンセル</button>
      <button>続行</button>
    </div>
  </div>
</div>

パネルは背景の内側に置きます。背景が固定レイヤーで、パネルはその中で中央に配置されます。モーダルを開閉するには、アプリケーションのコードから背景を追加・削除するか、表示を切り替えます。

小さな画面への対応

パネル幅は min(100%, Npx) で上限が設定されるため、520 pxの設定でも狭いスマートフォンでは背景の24 pxの余白を除いた全画面幅になります。アクション行は右寄せのままで、長いコンテンツはページと一緒にスクロールします。一般的なケースではメディアクエリは不要です。

注意点と制限

このジェネレーターはCSSのみを出力します。モーダルの開閉、キーボードフォーカスの制御、ESCキーの処理を行うJavaScriptは含まれていません。そのロジックはアプリケーション側で追加してください。

ヘッダーには常に4 pxのアクセントバーが付きます。不要な場合は、コピーしたコードの該当ルールを削除するか色を変更してください。

よくある質問

固定の暗い背景、選んだ幅と角丸の中央の白いパネル、アクセントバー付きのヘッダー、コンテンツエリア、右寄せのアクション行です。5つのクラスがスタイルシートに貼り付けられる状態で用意されます。

CSSのみです。コードは5つのクラスを定義するので、自分のマークアップでそれを使い、開閉は自分のスクリプトで処理します。

パネル幅は min(100%, Npx) で上限が設定されるため、狭いスマートフォンでは背景の24 pxの余白を除いた利用可能な幅をパネルが占めます。アクション行は右寄せのままです。

ジェネレーターはJavaScriptを提供しません。ボタンをクリックしたら表示し、その後再び隠す小さなスクリプトなどで、アプリケーション側から背景の表示・非表示を切り替えてください。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

HTML フォーマッター

ブラウザ内で HTML を 2 または 4 スペースで整形します。HTML はアップロードも検証もされません。

カラーパレットジェネレーター

基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。

変更ログジェネレーター

分類した項目から Keep a Changelog 形式の Markdown セクションを作成します。Added、Changed、Fixed、Removed の各カテゴリに項目を貼り付け、Markdown かプレーンテキストを選んで出力をコピーするだけです。

このツールは他の言語でも利用できます