- 2015-6-20
- ブログ
架空請求体験「にせ架空請求」ではGoogleフォームを埋め込んでにせSNSへの登録フォームを作成しました。
にせSNSの登録フォームは中央揃えにしましたが、この中央揃えがなかなかできなかったので埋め込み方と中央揃えの仕方について解説します。
目次
１、フォームの埋め込み
２、HTMLを貼り付ける
３、cssを設定する
１、フォームの埋め込み
Googleフォームは作成を行うと自動でurlが作成され、使うことができます。しかし、urlが長かったり使いづらい面があるので自分の作成したサイトに埋め込みます。
埋め込みは簡単です。
フォーム編集画面のツールバー（上のファイル・編集などが並んでいる場所）からファイルを選択し、埋め込む…をクリックします。
そうすると、GoogleフォームのHTMLが作成されるのでサイズを設定してコピーしましょう。サイズは全てが表示される程度に設定すると良いです。
２、HTMLを貼り付ける
次は表示したいページにHTMLを貼り付けます。
Googleフォームはdivで囲む必要がありますので下のような表記になります。
とりあえず、idをgfをとします。
<div id=”gf”>
<iframe src=”https://docs.google.com/forms/d/1ML_X0guzcg6JcBnXBlC6BbabBzWvggxSkyen3vfJwqI/viewform?embedded=true” width=”760″ height=”700″ frameborder=”0″ >読み込み中…</iframe>
</div>
３、CSSを設定する
次はcssです。
cssではこのまま
margin:0 auto;としたいのですがそれだと中央寄せになりません。私はこれで苦しみました。
そのため、一度横幅を設定します。今回はwidthが760pxなので
#gf{
width: 760px;
margin: 0 auto;
}
となります。
こうすることで横幅が確定され、中央揃えになります。
見て触れて学ぶネット詐欺体験サービス「にせサギ」
にせサギはネットサギを安全に体験できるサービスです。
子供・高齢者・障害者、誰もが安全にインターネットを使える社会を目指しています。
解説の小冊子や教え方や授業案を記載した資料も無料で配布しています！
