プログラマーになる

プロゲートのお問合せフォームのレイアウトレッスンの解説とよくあるミス

プロゲートのお問合せフォームのレイアウトレッスンの解説とよくあるミス

こんにちは、ひつじのジョージです。

大都会でプログラマーとして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プロパティを学んだ「プロゲートのヘッダーの余白レッスンの解説とよくあるミス」では以下のようによくあるミスをご紹介しました。

<meta charset="utf-8">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プロパティを学んだ「プロゲートのヘッダーの余白レッスンの解説とよくあるミス」では以下のようによくあるミスをご紹介しました。

<meta charset="utf-8">paddingプロパティの使い方でよくあるミス
  • 値をダブルクォーテーション（"）で囲む
  • paddingプロパティの省略形の使い方

同じクラスを付与したdivタグの使い方と意味の理解は「プロゲートのコンテンツの構造レッスンの解説とよくあるミス」で紹介したように、複数のdivタグに同じクラスを付与する意味は、同じ装飾をしたいからです。

このレッスンでは「学べるレッスン」と「お問い合わせ」に同じクラスで同じスタイルが当てられています。

<h3 class="section-title">学べるレッスン</h3>

...

<h3 class="section-title">お問い合わせ</h3>
...

見出しと段落について学んだ「プロゲートの「見出しと段落」の解説とよくあるミス」では以下のようによくあるミスをご紹介しました。

見出しと段落でよくあるミス
  • 開始タグと終了タグが一致していない
  • HTMLタグ内に全角の文字が入っている

見出しと段落のタグはよく使うのでタイプミスがないように気をつけましょう。

おすすめの記事