HTML・CSS
お問い合わせフォーム
入門

デザイン提供

Muse Academy
課題
ヒント

この画面を開発してください。
全く同じに作れなくても構いません。自分の技術でできる範囲に仕様を変えてみましょう。
分からない部分は、インターネットで調べたり、「#Codiary」タグで質問して皆で助け合いましょう!

素材はこちら
仕様の説明

素材フォルダにある「index.html」をテンプレートとして開発しましょう。

Bootstrapのドキュメントを見ながら開発しましょう。「Containers」「Text alignment」「Spacing」を使うと、オブジェクトを画面中央に寄せるレイアウトがつくれます。テキストボックスなどは「Form controls」を利用します。

テキストボックスの入力項目には、入力例を示す「プレースホルダー」や、必須項目を示す「*」マークを表示してみましょう。

「お問い合わせ内容」の選択ボックスには「サービスに関するお問い合わせ」「採用に関するお問い合わせ」「その他」を表示してください。

「送信する」ボタンを押下したときの動作はHTML・CSSだけでは実装できないため、まずはボタンの見た目だけを実装しましょう。

投稿する
ヒント

完成したら、サイトをインターネットに公開してから、Twitterでシェアしましょう。
「#Codiary」のタグをつけてつぶやくと、あなたのつくったサイトが「みんなの投稿」で紹介されます。(最大で1日程度の時間がかかります。)
サイトをインターネットに公開する方法は、こちらのチュートリアルで解説しています。

ツイートする
みんなの投稿