blog

作成日 : 2025/07/08
更新日 : 2025/07/08

Googleフォームの見た目をおしゃれにする方法②

前回は、Googleフォームの概要とGoogleフォームを作成するところまで紹介しました。

今回はGoogleフォームのフロントUIに成り代わる独自のフォームを作ってみましょう。

この記事では、htmlとcssを使って独自のフォームを作るところまで紹介します。

②htmlでフォームを書く

①で作成したフォームの内容や形式に合わせて、公開用のページをhtmlで作成します。

フォーム部分はこんな感じ。

私はhtmlが書けないので、Gemini先生に手取り足取り教えてもらいながら書きました。

生成AIはとても便利!!

③cssでおしゃれなデザインにする

cssでページのレイアウトやデザインを設定します。

ここでもGemini先生が大活躍。

背景画像もおしゃれなものを作成してもらいました。

見た目は完成形と同じになりましたが、この状態ではまだGoogleフォームと紐づけできていません。

次回は作成したhtmlフォームとGoogleフォームを紐づける方法を紹介します。