Loading

Account Engagement におけるレスポンシブフォームの概要

公開日: Sep 30, 2025
説明
2010 年に An Event Apart で Ethan Marcotte がレスポンシブデザインの原理を説明した後、Jeffrey Zeldman はこのプレゼンテーションに「the presentation that launched a thousand redesigns」というタグを付けました。「100万回のデザイン変更」の方が正確かもしれませんが、彼の言葉の精神の方が重要です。これは、多くのウェブデザイナーの仕事への取り組み方を根本的に変える画期的なアイデアでした。Account Engagement のお客様の中には、すでにレスポンシブデザインへの変更を行った方も多く、また近い将来に変更を予定している方も多くいらっしゃいます。この記事では、Account Engagement の標準フォームをレスポンシブサイトデザインに適合させるための要点を説明します。

前提条件
* HTML と CSS の基本的な知識を持っていること。* レスポンシブウェブデザインの原則を理解していること。Google で検索すれば、たくさんの資料が見つかります。

手順
1. テンプレートとフォームの作成
今回の例では、何もない状態から始めます。Account Engagement でテンプレートを作成し、必要な数のフォーム項目を含む新しいフォームに適用します。新しいテンプレートに空の内部スタイルシートを追加します。このスタイルシートはこのウォークスルーで追加していきます。
  
<style>

</style>

2. CSS ボックスモデルの変更
ボックスモデルは、ブラウザが要素の幅と高さをどのように計算するかを決定します。デフォルトでは、マージン、ボーダー、パディングは要素の幅に加算されます。例えば、幅 100px の要素に 20px の左パディングを追加した場合、要素の幅は実際には 120px となります。通常は問題ありませんが、レスポンシブデザインで要素にプロポーショナル幅を追加すると、フォーマット上の問題が発生することがあります (特にフォーム項目を含む場合)。一方で、2 つ目のボックスモデルは減算方式で、100px の幅の要素に 20px の左パディングを追加すると、要素が 80px に縮小され、全体の幅は 100px のままとなります。詳しくは、tuts+ のレスポンシブデザインにおけるボックスモデルの記事を参照してください。ボックスモデルを変更するには、テンプレートの内部スタイルシートに以下を追加します。
  
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

3. フォーム項目ドラッパーのパディングとマージンの変更
デフォルトでは、Account Engagement の各フォーム項目は、パディングとマージンが適用されたものに包まれています。ここでは、パディングを取り除き、レスポンシブレイアウトに適したマージンを適用します。以下をテンプレートの内部スタイルシートに追加します。
  
#pardot-form .form-field {
	margin: 1em 0;
	padding: 0;
}

4. 項目ラベル、テキスト入力、およびテキストエリアにプロポーショナル幅を適用する
ここからが本番です。この例では、フォーム項目のラベルに 25% の幅を与え、残りの 75% をテキスト入力とテキストエリアに与えることにします。これらの割合は、完全に任意です。これらの概念をデザインに適用されると、サイトのレイアウトに合わせて変更されます。以下をテンプレートの内部スタイルシートに追加してください。
  
#pardot-form .field-label {
    width: 25%;
}

#pardot-form input.text, #pardot-form textarea {
    width: 75%

5. インデントされた要素のマージンを変更する
この時点で、フォームの送信ボタンが適切な場所にないことに気づいたかもしれません。また、フォームに説明文やチェックボックス、ラジオなどの項目が含まれている場合や、ラベルのないフォーム項目がある場合にも、これらのものは適切な場所に配置されていません。これは、デフォルトでは左マージンが 160px に固定されているためです。これをフォーム項目のラベルの幅に合わせて変更する必要があります。以下をテンプレートの内部スタイルシートに追加してください。
  
#pardot-form .no-label,
#pardot-form .description,
#pardot-form .value,
#pardot-form .submit {
    margin-left: 25%;
}

6. ブレークポイントの作成
この時点では、フォームはスムーズに表示されていますが、ブラウザのウィンドウがどんどん狭くなっていくと、最終的にはレイアウトが崩れてしまいます。この例では、約 400px の幅でレイアウトが崩れています (項目のラベルテキストの長さによります)。レイアウトが崩れる前に、レイアウトを調整する必要があります。この例では、フォームラベルを強制的にフォーム項目の上に表示し、テキスト入力とテキストエリアの幅を 100% にします。以下をテンプレートの内部スタイルシートに追加します。
  
@media (max-width: 400px) {
   #pardot-form .field-label {
        display: inline-block;
        width: auto;
        float: none;
        text-align: left;
    }

    #pardot-form input.text, #pardot-form textarea {
        display: block;
        width: 100%;
    }

    #pardot-form .no-label,
    #pardot-form .description,
    #pardot-form .value,
    #pardot-form .submit {
        margin-left: 0;
    }
}

レスポンシブデザインの基本を Account Engagement のフォームに適用してみました。これで、貴社のサイトのライブフォームにこのコンセプトを適用する準備ができたと思います。もちろん、これはかなり単純な例であり、ここで説明した詳細 (幅、ブレークポイントなど) は、貴社のサイトのデザインに合わせて調整する必要があります。
 
ナレッジ記事番号

000381612

 
読み込み中
Salesforce Help | Article