[progate] HTML/CSS 初級 「お問い合わせフォームを作ろう！」のまとめ
これまで学んだコンテンツの追加とWebページの入力フォームの定義について学んでいきます。最後になりますが、頑張っていきましょう。
HTML/CSS 初級の構成での「お問い合わせフォームを作ろう！」の位置付け
- HTMLに触れてみよう
- CSSに触れてみよう
- レイアウトを作ろう
- ヘッダーを作ろう
- フッターを作ろう
- コンテンツを作ろう
- 問い合わせフォームを作ろう ← 今回はここ、ラスト！
目次
まとめ
- spanタグを使って、インライン要素を学習していきます。
- divタグを使って、ブロック要素について概ね理解できます。
- コンテンツの特性に基づくレイアウトについて経験します。
「お問い合わせフォームを作ろう！」の解説
本セクションでは、入力フォームについての基礎について学習しています。JavaScriptなどは含まれていないので、気軽に始めてみましょう。
- お問い合わせフォームのレイアウト
- お問い合わせフォームのレイアウト(2)
なんかエピローグ的な内容になっている・・・
お問い合わせフォームのレイアウト
本セクションでは、これまで学習した内容を元にお問い合わせ用の項目についてタグの追加、CSSの適用を復習します。
難しいな？と感じた場合には1つ前のセクションに戻って、解説を読むなどしてみましょう。
学習タグ/ プロパティ
h3, divタグ, padding
お問い合わせフォームのレイアウト(2)
お問い合わせの入力を受け付けるformタグの定義の仕方を学習します。指定内容はかなり基礎的なものだけです。肩の力を抜いて取り組んでみてください。
入力系のタグについては、本来は以下のものがあります。
- １行自由入力欄（input type="text”）← 今回はこれ
- 自由入力欄（textarea）← 今回はこれ
- ラジオ択一（input type="radio")
- セレクトボックス（select）
- チェックボックス（input type="checkbox"）
- 送信ボタン（input type="submit"）← 今回はこれ
本セクションでは、その内の一部のみ、且つ設定も最低限となっていますので注意してください。
学習タグ/ プロパティ
form, input, textareaタグ
Try it!
各セクションで是非チャレンジしてみてください。
| スライド | Try |
| お問い合わせフォームのレイアウト |
|
| お問い合わせフォームのレイアウト(2) |
|
「お問い合わせフォームを作ろう！」では学ばないこと
入力フォームのその他・・・
本コースは、まずはタグを指定すること、CSSを指定することなので、基本的なことを体験できればとは思います。
しかしもう少し「見たことあること」を体験してもらっていいと思います。つまりどういうことかというと
- 入力タイプについてはもう少しできて良いでしょう
- 送信ボタンについて説明をもう少ししても・・
- そうでない場合は、どこで習うか教えておくなど
参加ランキング
