デイトラ Web制作コース中級編 DAY 14-19 LP制作 4（共通パーツの作成）

MIO

2024年8月4日 01:46

ご覧いただき、ありがとうございます！

DAY14-19で、残りのセクションをコーディングしていきました。
今回は、私が苦手な表の作成とお問い合わせフォームの内容を書いていこうと思います。

compareセクション

compareセクションでは、上記のような表を作成しました。

compareセクションのHTML

表を作成するときは、tableタグを使用します。

<table>
  <thead>
    <tr>. <!-- 行 -->
      <th></ th> <!-- 列のタイトル -->
      <th>タイトル</ th> <!-- 列のタイトル -->
      <th>タイトル</ th> <!-- 列のタイトル -->
      <th>タイトル</ th> <!-- 列のタイトル -->
    </ th>
  </ thead>

  <tbody>
    <tr>　　<!-- 行 -->
      <th>タイトル</ th> <!-- 列のタイトル -->
      <td>中身</ td> <!-- データ（中身） -->
      <td>中身</ td>　<!-- データ（中身） -->
      <td>中身</ td>　<!-- データ（中身） -->
    </tr>

    <tr>. <!-- 行 -->
     <th>タイトル</ th> <!-- 列のタイトル -->
     <td>中身</td>　<!-- データ（中身） -->
      ：
  <tbody>
</ table>

表は行ごとに作成しており、<tr>が行を表しています。

タグの説明は以下のとおりです。

<thead>タグ: 表のヘッダー部分（列のタイトル（見出し））
<tbody>タグ: 表の本体部分（実際のデータ）
<tr>タグ: 行を定義（表の横一列のデータをまとめる）
<th>タグ: ヘッダーセルを定義（列のタイトル部分）
<td>タグ: データセルを定義（実際のデータ）

compareセクションの表では、横一列と縦一列の両方がタイトル（見出し）になっているので、どちらも<th>タグを使用しています。

続いて、cssについてお話しします。

compareセクションのCSS

CSSの実装がされていない表はこんな感じです。

線や仕切りがなく、セルの大きさもバラバラになっています。
ここにボーダーや余白をつけて、スタイリングしていきます。

表の作成でよく使うCSSプロパティは以下になります。

/*----- 表の枠線 -----　*/
table {
  border: 1px solid black; /* 表全体の枠線 */
}
th, td {
  border: 1px solid black; /* セルの枠線 */
}

/*----- 枠線を結合 （デフォルトはセルが離れている） -----　*/
table {
  border-collapse: collapse;
}

/*----- 列の幅を均等にする -----　*/
table {
  table-layout: fixed; 
}

その他にも、太字にしたり、背景色を変えたり、普段の実装でよく使うプロパティも使用します。

以下の記事で、詳しく表の作り方について書いてありました。
詳しく知りたい方はこちらもお読みください。

contactセクション

contactセクションではお問い合わせフォームを作成しました。
こちらは非常にボリューミーなので、HTMLの説明を行おうと思います。

まず、お問い合わせフォームを作成するときは、formタグを使用します。

<form>
  <!-- ここにお問い合わせフォームの内容を書く -->
</ form>

フィールドの種類

HTMLにおけるフィールドとは、ユーザーにデータを入力してもらうための要素をいいます。

種類も様々ありますが、今回作成したフィールドの種類は以下です。

テキストフィールド：1行のテキストを入力するボックス
＜例＞名前、住所など
メールフィールド：メールアドレスを入力するボックス
ラジオボタン：複数の項目から1つを選択する丸いボタン
ドロップダウンリスト：複数の項目から1つを選ぶリストボックス
テキストエリア：複数行のテキストを入力するボックス
＜例＞お問い合わせ内容の入力フィールド
チェックボックス：同意などを選択するときに使うチェックボックス
＜例＞プライバシーポリシーの同意

テキストフィールドを例にとって説明します。

テキストフィールド

今回のLP制作では、テキストフィールドはお名前の入力欄で使用しました。

<div> <!-- フィールド全体を囲むコンテナ -->
  <div> <!-- フォームのフィールド部分を囲むコンテナ -->

    <div> <!-- フィールドのタイトル部分を囲むコンテナ -->
      <label for="your-name"> <!-- 入力フィールドに関連付けられたラベル -->
        お名前
      </label>
      <span>必須</span>
    </div>

    <div> <!-- 実際の入力フィールドを囲むコンテナ -->
      <input
        type="text" 
        name="your-name" 
        id="your-name" 
        placeholder="田中 おは次郎"
      />
    </div>

  </div>
</div>

上記は、クラス名などを省いて、簡略化したものを書いています。

labelタグにフィールドの名前（説明）記入しており、labelタグはほぼ全てのフィールドで使用します。
使用する理由は、Tabキーで入力欄を移動するためです。

Tabキーのフォーカス移動

今回のテキストフィールドでは、「labelタグのfor属性」と「inputタグのid属性」が一致しているので、Tabキーでフォームを移動できるようになります。

フィールドによっては、inputタグを使用しないものもあります。

例えば、複数の項目の中から1つを選択するドロップタウンリストでは、inputタグではなく、selectタグを使用します。

その場合は、「selectタグのid名」と「labelのfor属性名」が一致している必要があります。

<!----- ドロップダウンリスト ----->

<label for="your-age">年代</label>
  ：
<select id="your-age">
  <option value="">選択してください</option>
  <option value="">10代</option>
  <option value="">20代</option>
    ：
</ select>

他には、複数行を入力するテキストエリアも同様にinputタグを使用しません。
テキストエリアの場合は、textareaタグを使用するので、「textareaタグのid名」を一致させます。

<!----- テキストエリア ----->

<label for="your-message">お問い合わせ内容< /label>
 ：
<textarea
  id= "your-message"
    ：
</ textarea>

お問い合わせフィールドの書き方はフィールドによって、多少変わりますが、大まかには似たような書き方かなと思います。

他の種類やもっと知りたい方は、以下の記事が詳しく書いてくださっていたので、ぜひ参考にしてください。

感想

実際にフォームを送信するには、JavaScriptやPHPなどのプログラミング言語を書く必要があります。
今回のLPではそこまでは行っていません。

上級編に入ると、PHPを学びます。
現在、中級編の内容について書いていますが、学習中の私は最近上級編に入り、いま絶賛PHPを勉強中です。

中級編では、ひたすらLP制作を行い、HTML, CSS, JavaScriptをひたすら書きました。

まだ、不安な部分もあり、お問い合わせフォームは最近やっと苦手意識がなくなったところです。

CSS設計やSEO対策ももっと意識したコーディングを行っていきたいと思います。

最後までお付き合いいただき、本当にありがとうございました🌸

Xで毎日デイトラの学習記録つけてます！
応援していただけると嬉しいです✨
X : https://twitter.com/totoro_mi8

この記事が気に入ったらサポートをしてみませんか？