
こんにちは、ひつじのジョージです。
大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。


お問合せフォームのレイアウトのレッスンではこれまでに学んだ知識を用いてフォームのレイアウトを作るので、主に復習になります。
復習する内容は
です。
これらのレッスンで学んだことを活かして問い合わせフォームのレイアウトを作っていきます。
このレッスンをクリアするとレベルが11にアップします。
目次
お問合せフォームのレイアウトレッスンの答え
このレッスンの答えは以下のとおりです。
編集した部分のみ表示します。
index.htmlでは以下のことを復習します。
... <div class="contact-form"> <!-- <h3>要素を追加し、「section-title」というclassをつけてください --> <h3 class="section-title">お問い合わせ</h3> <!-- <p>要素を3つ追加してください --> <p>メールアドレス(必須)</p> <p>お問い合わせ内容(必須)</p> <p>※必須項目は必ずご入力ください</p> </div> </div> ...
stylesheet.cssで以下のことを復習します。
... /* contact-formのpadding-topを100pxにしてください */ .contact-form { padding-top: 100px; } ...
よくあるミスや理解すべきポイント
このレッスンで使う今までで学習した以下の知識でよくあるミスや理解するべきポイントをご紹介します。

paddingプロパティの使い方でよくあるミス
paddingプロパティを学んだ「プロゲートのヘッダーの余白レッスンの解説とよくあるミス」では以下のようによくあるミスをご紹介しました。
- 値をダブルクォーテーション(")で囲む
- paddingプロパティの省略形の使い方
paddingプロパティの使い方や挙動をよく理解していないことによるミスがあります。
paddingプロパティの使い所や挙動を正しく学びましょう。
同じクラスを付与したdivタグの使い方と意味の理解
同じクラスを付与したdivタグの使い方と意味の理解は「プロゲートのコンテンツの構造レッスンの解説とよくあるミス」で以下のように紹介しました。
複数のdivタグに同じクラスを付与する意味は、同じ装飾をしたいからです。
以下のように3つのdivタグにcontents-itemクラスを付与したのなら、CSSでcontents-itemで定義した装飾は3つのdivタグに反映されます。
http://programmer-life.com/progate-contents/
このレッスンでは「学べるレッスン」と「お問い合わせ」に同じクラスで同じスタイルが当てられています。
<h3 class="section-title">学べるレッスン</h3> ... <h3 class="section-title">お問い合わせ</h3> ...
見出しと段落
見出しと段落について学んだ「プロゲートの「見出しと段落」の解説とよくあるミス」では以下のようによくあるミスをご紹介しました。
- 開始タグと終了タグが一致していない
- HTMLタグ内に全角の文字が入っている
このレッスンではタグが増えたことによるタイプミスが主なミスの原因となります。
見出しと段落のタグはよく使うのでタイプミスがないように気をつけましょう。
まとめ:学んだ知識を活かしてフォームのレイアウトをしよう
お問合せフォームのレイアウトのレッスンではこれまでに学んだ知識を用いてフォームのレイアウトを作るので、主に復習になります。
復習となる知識は以下のとおりです。
これらの学んだ知識でよくあるミスや理解すべきポイントをご紹介します。
paddingプロパティを学んだ「プロゲートのヘッダーの余白レッスンの解説とよくあるミス」では以下のようによくあるミスをご紹介しました。
- 値をダブルクォーテーション(")で囲む
- paddingプロパティの省略形の使い方
同じクラスを付与したdivタグの使い方と意味の理解は「プロゲートのコンテンツの構造レッスンの解説とよくあるミス」で紹介したように、複数のdivタグに同じクラスを付与する意味は、同じ装飾をしたいからです。
このレッスンでは「学べるレッスン」と「お問い合わせ」に同じクラスで同じスタイルが当てられています。
<h3 class="section-title">学べるレッスン</h3> ... <h3 class="section-title">お問い合わせ</h3> ...
見出しと段落について学んだ「プロゲートの「見出しと段落」の解説とよくあるミス」では以下のようによくあるミスをご紹介しました。
- 開始タグと終了タグが一致していない
- HTMLタグ内に全角の文字が入っている
見出しと段落のタグはよく使うのでタイプミスがないように気をつけましょう。