デザインを変更する

用途別フォーム10種類は初期CSSを使います。デザイン見本は index-design-01.php ～ index-design-10.php の10パターンです。通常のCSSで編集でき、Sassのビルドは不要です。

デザイン一覧から選べます。01の基本デザインを軸に、02〜05は汎用性、06〜10は大きな文字組み・構図・導入の個性を重視しています。大きなPCレイアウトも、スマートフォンでは縦の構成へ切り替わります。

全10パターンでメインカラーの青、青のごく薄い色、白・薄グレーを使います。日本語は Noto Sans JP、英字・数字の見出しは Manrope です。04は青いラッパーと白いフォーム、05は白抜き英字、06はアウトライン見出しと青地・白文字の表、07は透かし見出しとグレーの表、09はずらした青い色面、10は項目ごとの白いカードが特徴です。

CSSの構成

設定の分担から理解したい方は、コード解説のCSS変数とデザインの設定場所へ。初期CSSとデザインCSSの違い、変数の編集先、変更がほかの画面へ影響する範囲をまとめています。クラス名の意味はクラス名と命名ルールで確認できます。

form/css/
├─ reset.css
├─ style.css                 初期CSS
├─ gallery.css               デザイン一覧ページ専用
├─ parts/                    初期の共通パーツ
│  ├─ variables.css
│  ├─ form.css
│  ├─ confirm.css
│  └─ result.css
├─ addon/progress.css
├─ addon/brand.css            10デザイン共通の色・フォント
├─ addon/design-foundation.css 04・05・06・07・09・10の共通操作部品
├─ addon/input-ux.css         入力操作・エラー案内の共通スタイル
├─ addon/order-cart.css       商品カード（注文用途のみ）
└─ design-01/ ～ design-10/
   ├─ style.css
   └─ parts/
      ├─ variables.css
      ├─ form.css
      ├─ confirm.css
      └─ result.css

用途ページは入力項目の見本、デザインページは見た目の見本として使います。デザインごとに予約や採用のPHPを複製する必要はありません。

用途ページにデザインを適用する

たとえば index-reservation.php で、2つ目のCSSだけを変更します。

<link rel="stylesheet" href="./form/css/reset.css">
<link rel="stylesheet" href="./form/css/design-06/style.css">
<link rel="stylesheet" href="./form/css/addon/input-ux.css">

初期の見た目へ戻すときは、2つ目を ./form/css/style.css に戻します。初期CSSとデザインCSSを同時に読み込まず、どちらか1つを選びます。

form_id、入力欄の name、フォームの送信先は変更しません。CSSを切り替えても用途はそのままです。

フォームは <div class="mf-form-shell"> で囲みます。背景と外側の余白はこのラッパーに設定します。body のclassは不要で、フォームCSSは埋め込み先の body、見出し、リスト、別のフォームを変更しません。内部の配置は画面幅に応じたメディアクエリで切り替えます。PCの狭いサイドバーなどに埋め込む場合は、自動でスマートフォン配置に切り替わらないため、設置先に合わせて余白や項目の並びを調整してください。

addon/input-ux.css と form/js/main.js の読み込みも残します。注文用途はさらに addon/order-cart.css を最後に読み込みます。商品カードは1281px以上では2列、1280px以下では1列になります。スマートフォンでは写真と商品説明も縦に並びます。

タイトル・導入部分を変える

02〜10は見出しのHTMLも個別です。CSSの差し替えだけで色・入力欄・標準見出しを変更できます。見本と同じ導入を使う場合は、対応する index-design-XX.php の <header class="form-heading ..."> から </header> までを、用途ページの .form-heading と入れ替えます。

• id="form-title" はページ内に1つ残します。フォームの aria-labelledby="form-title" と対応しています。
• 日本語の用途・案内文は設置先に合わせます。装飾だけの英字・図形には見本の aria-hidden="true" を残します。
• 06の hero-outline、07の hero-layered など、見出しの追加classもまとめてコピーします。
• 07は <header class="mf-design-heading hero-layered"> を .mf-form-shell の直前に配置します。タイトルは幅100%、フォーム用ラッパーは薄グレー、フォーム本体は白です。aria-labelledby="form-title" の対応を保ってください。
• mfInputState()、form_id、フォームの送信先、入力欄の name は導入の変更で移動・削除しません。
• 08はPCで導入と入力欄が左右に並びます。商品選択のある注文用途では縦構成になり、商品一覧の幅を確保します。

デザイン見本で確認へ進むボタンは「入力内容を確認する」です。注文用途は「注文内容を確認する」と案内します。実際の送信は共通の確認画面で行います。

編集する場所

各デザインのパーツは、初期パーツを @import してから差分を書いています。読み込み済みの @import を重複して追加せず、その下を編集してください。

文字サイズ・余白・レスポンシブの読み方

文字サイズと余白は、基本的に px の数値を編集します。たとえば font-size: 32px; は文字サイズ、padding: 40px 24px; は上下40px・左右24pxの内側の余白です。横幅の 100%、段組みの fr、文字間隔の em などは、それぞれの用途に合わせて残しています。

各CSSの BASIC が基本設定です。画面サイズごとの変更はファイル末尾の該当区分を編集します。同じ指定を何度も追記せず、既存の数値を書き換えてください。変更が不要な区分は省略しています。

/* -----------------------------------
Responsive: 1024–1280 (Small PC)
----------------------------------- */
@media (min-width: 1024px) and (max-width: 1280px) {
    #mf-mail-form #form-title {
        font-size: 36px;
    }
}

/* -----------------------------------
Responsive: 768–1023 (Tablet)
----------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
    #mf-mail-form #form-title {
        font-size: 32px;
    }
}

/* -----------------------------------
Responsive: ～767 (Mobile)
----------------------------------- */
@media (max-width: 767px) {
    #mf-mail-form #form-title {
        font-size: 24px;
    }
}

1281px以上は BASIC の設定です。幅の区分は重ならないため、タブレットの設定を変えてもスマートフォンには引き継がれません。各区分は基本設定に対する変更を書きます。08の見出しの固定は画面の高さ、アニメーションの停止は端末の「動きを減らす」設定も参照します。

ローカルCSSの読み込みには ?v=... を付けません。エディタからファイルへ移動しやすくするためです。brand.css のGoogle Fonts URLの ?family=... はフォントを指定するために必要なので残します。

共通の配色とフォント

各 design-XX/style.css が addon/brand.css を読み込みます。デザインを選ぶだけで共通設定も適用されるため、入力HTMLへの追加読み込みは不要です。一覧の designs.html も同じファイルを使います。

日本語の指定は --mf-font-ja、英字・数字の見出しは --mf-font-en です。Google Fontsは brand.css の先頭で読み込み、表示を待たずに代替のサンセリフ体で描画します。フォントを変更する場合は、読み込むGoogle FontsのURLと対応する変数の両方を変更してください。外部フォントを使わない運用では、その読み込みを外してシステムフォントを指定できます。

共通色を変更するときは、brand.css 内の既存定義を編集します。

/* addon/brand.css 内の既存の --mf-blue を設置先の色へ変更する例 */
:where(.mf-form-shell, #mf-mail-form, .mf-design-gallery) {
  --mf-blue: #2454d6;
}

1パターンだけ色を変えるときは、使用中デザインの parts/form.css でラッパーとフォーム両方の変数を上書きします。brand.css の共通定義は :where() で詳細度を下げているので、下記の指定が優先されます。

/* 使用中デザインの parts/form.css：ラッパーとフォームを同色に */
.mf-form-shell,
#mf-mail-form {
  --mf-blue: #2454d6;
  --color-primary: var(--mf-blue);
}

背景・幅の調整

04・05・06・07・09・10のフォームはラッパー内で width: 100% です。外側の余白はラッパーのpadding、内側の余白は --mf-panel-padding で調整します。

.mf-form-shell {
  --mf-shell-padding: 64px 80px;
  --mf-shell-padding-mobile: 24px 12px;
  background: var(--mf-blue);
}
#mf-mail-form {
  --mf-panel-padding: 48px;
}

必須バッジ

各 parts/variables.css の --mf-required-bg、--mf-required-text、--mf-required-border で指定します。見出しの案内用 .mf-required-sample も同じ配色になります。

入力画面の変更はフォームのIDを付けて範囲を限定します。

/* 使用中デザインの parts/form.css へ追加 */
#mf-mail-form {
  max-width: 960px;
}

#mf-mail-form .btn-submit {
  border-radius: 6px;
}

元の form/css/parts/ や addon/brand.css を変更すると、それを読み込む複数のデザインにも影響します。1パターンだけ余白や構図を変える場合は、対象デザインの parts/form.css を編集してください。

確認・完了・エラー画面は共通

confirm.php、send.php、thanks.php、result-view.php は全用途・全デザインで使います。用途別の確認・完了PHPは追加しません。

入力ページでCSSを差し替えても、確認・完了・エラー画面のCSSは切り替わりません。これらの画面は従来どおり共通の design-01/style.css を読み込みます。入力デザインを調整するために、共通PHPのCSS参照先や confirm.css・result.css を変更する必要はありません。

brand.css の色・フォント指定は .mf-form-shell、#mf-mail-form、一覧の .mf-design-gallery に限定しています。確認・結果画面は専用コンテナ内の共通CSSを使います。用途ページの初期CSSも brand.css を読み込みません。

共通の parts/variables.css や確認・結果パーツを変更すると、確認・結果画面にも影響します。入力画面だけ変更したいときは、.mf-form-shell または #mf-mail-form 配下に指定してください。

日本語・スマートフォンでの確認

長い日本語ラベル、必須表示、選択肢、入力例、エラーメッセージを入れて確認します。特に氏名の2列、日付・時刻、複数の添付ファイル名を確認してください。

幅375px・768px・1024px前後で、文字の切れや横スクロールがないか確かめます。入力欄やボタンの文字、キーボードで移動したときのフォーカス表示も確認してください。

CSSの変更が反映されない場合

実際に読み込んでいるCSSのパスを確認し、ブラウザーを再読み込みします。キャッシュが残る場合は Ctrl + F5 で強制再読み込みします。開発者ツールのネットワーク設定でキャッシュを無効にして確認する方法もあります。CSSのURLへバージョン値を追加する必要はありません。

<link rel="stylesheet" href="./form/css/design-06/style.css">

デザイン一覧と用途ページへのリンクは パッケージREADMEにあります。