Web フォームのサイズ変更

最終更新日 : 2023年7月20日

Web フォームの高さと幅の変更

Web フォームの高さと幅は、web フォームの埋め込みコードをピクセルに基づく静的サイズか、画面領域の割合に基づく相対サイズに編集することで変更できます。

メモ

この手順は、スクリプトおよび iframe の埋め込みコードにのみ適用されます。URL Web フォームのサイズは変更できません。

デフォルトでは、Web フォームの高さと幅はブラウザーのサイズとともに拡大・縮小されます。この動的な特性により、Web フォームをほとんどのスクリーン解像度で表示できます。

Web フォームのサイズを調整するにはまず、web フォームから HTML またはスクリプトコードを取得する必要があります。

Web フォームのフレームサイズの編集は、使用しているコードによって異なります。

HTML コード(iframe)

HTML コードには、web フォームからコピーした文字列内にコントロールが含まれています。

以下に、iframe コード文字列の例を示します。

<iframe src=&quot;https://secure.na1.adobesign.com/public/esignWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*&hosted=false&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0; overflow: hidden; min-height: 500px; min-width: 600px;&quot;></iframe>

コード文字列の末尾近くに、width="100%" および height="100%" のパラメーターがあります。これらのパラメーターを調整すると、web フォームのフレームサイズが調整されます。パーセント値を使用することができます。また固定されたピクセルサイズを使用することもできます(パーセント記号は削除してください)。

テキストエディターでコード文字列を編集し、編集したコードを web ページにコピー&ペーストします。

メモ

引数  ?wid= は、一意の web フォーム ID を示し、作成される web フォームごとに異なります。

(Java)スクリプトコード(スクリプト)

JavaScript オプションは、パラメーターがまだ文字列に含まれていないという点で少し複雑ですが、考え方は同じです。

以下は、同じ web フォームのスクリプトの例です。 

<script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>
</script>

スクリプトでフレームサイズを調整するには、フレームプロパティを含む <div> 要素で <script></script> 要素を囲む必要があります。これにより、<script> は <div> コンテナ内に存在するように強制され、<div> の制限が適用されます。

以下に、幅が 600 ピクセル、高さが 500 ピクセル、幅が 1 ピクセルの黒い実線の <div> 要素の例を示します。

<div style=&quot;height:500px; width:600px; border:1px solid black;&quot;> 
</div>

スクリプトは、<div> 要素内に含まれている必要があるため、次のような完全なコードブロックになります。

<html>

    <div style=&quot;height:500px; widget:600px; border: 1px solid black;&quot;>

        <script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>

        </script>

    </div>

</html>

結果の web フォームが、指定されたサイズで表示されます。

スクリプトの設定方法のその他の例

フルスクリーン 1

<body style=&quot;margin: 0; padding: 0;&quot;>

        <script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>

        </script>

</body>

フルスクリーン 2

<div style=&quot;height:100%; width:100%; border:0px solid black;&quot;>

        <script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>

        </script>

</div>