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数値文字参照を表示します。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

HTML 圧縮ツール

通常のコメントを削除し、空白を整理して、ブラウザ内で HTML をコンパクトにします。使用前に結果を確認してください。

HTML文字参照

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

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