デザインデータをもとにHTML,CSSのコーディングの練習をしてみましょう。
今回は「コンタクトフォーム」の見た目をHTMLとCSSで作成します。
この記事は「デザインデータからブログサイトを作ってみよう」の記事の続きになります。
はじめに
今回も練習をするにあたって、必ずやって欲しいことが３点あります。
わからなかったところをメモに残す
わからなかったところを調べる
この記事の内容を必ず復習する
前回に引き続き、上記の作業も併せてやっていただけると、この記事の内容の理解が深まります。
教材を開く
それでは、練習に入っていきましょう。前回の教材をそのまま使用します。
新たに教材のファイルをダウンロードしたい方は以下のボタンからダウンロードができます。（前回までのコードは記述済のものになります。）
ダウンロードしたファイルの確認
今回は、「contact.html」を編集していきます。
XDで制作するデザインを確認する
XDでデザインデータを開き、練習用の教材のデザインを確認しましょう。
今回は「お問い合わせページ_SP」のアートボードを使っていきます。
VSCodeで編集するフォルダを開く
エディタを開いて、srcフォルダを開きましょう。
今回、編集するファイルはcontact.htmlなので、左のサイドバーのファイル一覧からcontact.htmlをダブルクリックして表示しておきましょう。
Google ChromeでHTMLを表示する
編集していくHTMLの結果を確認するために、ブラウザに表示させます。
前回同様に「Live Server」を使って、HTMLをブラウザに表示させます。
contact.htmlをエディタで表示し、エディタの右下の「Go Live」クリックしてLive Serverを起動します。
この後、自動でブラウザが起動し、ブラウザ上でcontact.htmlを開くことができていれば問題ありません。
ブラウザタブのタイトルが「Contact|ZeroPlus Blog」になっているかを確認しましょう。
検証ツールを開きスマホ表示にする
前回と同様に、スマホ版のデザインのみコーディングしていきます。
検証ツールを開きスマホ版表示にしていきましょう。
スマホ版表示にする手順
- ブラウザの画面を右クリック
- メニューの「検証」をクリック
- 「デバイスビュー切り替えボタン」をクリック（上記画像参照）
- 「デバイス切り替えメニュー」から「iPhone SE」を選択（上記画像参照）
これでコーディングの準備は完了になります。
コーディングしてみよう
今回のページは画像が使われていないので、そのままコーディングの作業に移ります。
再度確認となりますが、コーディングを行う際は、いきなりコードを記述せず、サイトのデザインをよく確認することが大切です。
デザインデータから構造を確認する
HTMLでサイトの構造を記述する
デザインデータからプロパティを確認する
CSSでサイトのスタイルを記述する
上記の流れを意識して、実際にコーディングを行っていきます。
CSSファイルの確認
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
まずは、ページに適用させるスタイルを確認しておきましょう。
今回の練習ではstyle.cssでページ全体のスタイルを管理します。そのため、今回も編集していくcssファイルはstyle.cssとなります。
※上記コードは既に記述済みなので、別途記述する必要はありません。
Google Fonts の読み込み
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"
rel="stylesheet"
/>次に、前回同様に「Google Fonts」を用いてフォントの読み込みを行います。
contact.htmlのheadタグの中に上記のコードを記述しましょう。
index.htmlで記述したものと同じ内容になるので、実際に行うときにはindex.htmlからコピー&ペーストをします。
ヘッダーを作る
全体のスタイルは「ブログサイトのコーディング」の際に記述したので、ヘッダーから作っていきます。
デザインデータから構造を確認する
XDを用いてデザインデータの確認をしていきましょう。
index.htmlとcontact.htmlはヘッダーのデザインが共通していることに注目です。
今回のページでは、ヘッダーのサブテキストが「Contact」に変わっているだけになります。
HTMLでサイトの構造を記述する
<header class="header">
<div class="header-inner">
<h1 class="logo">
<a href="index.html" class="logo-link">ZeroPlus Blog</a>
</h1>
<p class="header-heading">Contact</p>
</div>
</header>前回記述したヘッダーの構造を、「contact.html」に記述します。
p.header-headingのテキストを「Contact」に変更すれば、HTMLの記述は完了です。
CSSでサイトのスタイルを記述する
contact.htmlでは、前回記述したstyle.cssを読み込んでいるので、ヘッダーにはそのままスタイルが適用されます。
ブラウザを更新して、画像のようなサイトの見た目になっていれば問題ありません。
複数のページの制作を行う作業では、使いまわせるスタイルを見つけることが大切です。
コードの量を少なく記述することができるので、デザインデータをよく見て、共通するスタイルを見極めましょう。
コンテンツの入れ物を作る
次に、サイトのコンテンツの入れ物となる構造を作っていきます。
デザインデータから構造を確認する
今回のお問い合わせのページは、コンタクトフォームが主要なコンテンツになります。
まずは、コンテンツの入れ物としてmainタグを用いてコンテンツの入れ物を作ります。
その中に、「コンタクトフォーム」を作成するのでformタグで構造を作ります。
HTMLでサイトの構造を記述する
<main class="contact">
<form action="" class="contact-form"></form>
</main>先ほどの構造をHTMLで表すと上記のコードになります。
現状、ブラウザを更新しても見た目上は変化がないので、そのまま次の工程へ進みます。
デザインデータからプロパティ、余白を確認する
デザインデータを確認して、横幅と余白を確認します。
CSSでサイトのスタイルを記述する
デザインデータのプロパティの確認ができたので、スタイルの記述をしていきましょう。
.contact {
padding-bottom: 64px;
}
.form-body {
/* PC時の横幅の制限 */
max-width: 1080px;
/* PC時に中央配置 */
margin: 0 auto;
}コンタクトフォームが入るform-bodyクラス要素は、パソコン版のレイアウト時には横幅に制限をかけておきます。このようにすることで、フォームが横幅いっぱいに広がるのを防ぐことができます。
また、中央寄せを行うスタイルも記述しておきます。
今回は、スマホ版のみのコーディングになりますが、気になる方はパソコン版の見た目にして、挙動を確認してみましょう。
名前を入力するフォームを作る
次に、コンタクトフォームの各項目を作っていきます。
コンタクトフォームの構造の作り方にはいくつか方法があります。
今回はdlタグを用いて、コンタクトフォームを構造化していきます。
まずは、全体の構造と名前を入力するフォームを作っていきます。
デザインデータから構造を確認する
まずは、コンタクトフォーム各項目をdlタグで囲みます。
コンタクトフォームの各項目をdivタグ（div.form-unit）としてまとめます。
その中に、フォームの項目名をdtタグ、対応する内容をddタグで構造を作ります。
また、ddタグの中にinputタグを用いてフォームの入力欄を作ります。
HTMLでサイトの構造を記述する
<dl class="form-body">
<div class="form-unit">
<dt class="form-unit-head">お名前</dt>
<dd class="form-unit-contents">
<input type="text" placeholder="山田 太郎" class="form-input" />
</dd>
</div>
<!-- ↓次のdiv.form-unit項目が続く-->
</dl>先ほどの構造をHTMLで表すと上記のコードになります。
名前を入力する項目は、ユーザーにテキストを打ち込んでもらうフォームとなるためinputタグのtype属性の値は「text」にします。
また、placeholder属性も設定し、入力例を表示しておきましょう。
ブラウザで状態を確認すると画像のようになっていれば問題ありません。
続いてスタイルを記述するために、プロパティの確認へ移りましょう。
デザインデータからプロパティ、余白を確認する
デザインデータを確認して、余白を確認しましょう。
dtタグ（dt.form-unit-head）の余白は、他のフォームの箇所でも共通になっています。
CSSでサイトのスタイルを記述する
デザインデータのプロパティ、余白の確認ができたので、スタイルの記述をしていきましょう。
.form-unit-head {
font-size: 14px;
font-weight: bold;
padding: 16px 24px;
background: #ffecd1;
}
.form-unit-contents {
padding-top: 16px;
/* 中央寄せした時に左右に16pxの余白になる横幅 */
width: 92%;
/* 中央寄せ*/
margin: 0 auto;
}
.form-input {
font-weight: bold;
letter-spacing: 0.1em;
max-width: 640px;
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}
/* プレースホルダ―のスタイルを変更 */
.form-input::placeholder {
color: #ccc;
}
スタイルを記述・変更したら、ブラウザを確認しましょう。
上記の状態になっていれば問題ありません。
性別を入力するフォームを作る
次に、性別を入力するフォームを作っていきます。
デザインデータから構造を確認する
性別のラジオボタンをulタグ（ul.form-radio-list）としてまとめ、liタグ（li.form-radio-item）を記述しリストの構造を作ります。
liタグの中にinputタグを記述し、ラジオボタンを作りましょう。
HTMLでサイトの構造を記述する
<div class="form-unit">
<dt class="form-unit-head">性別</dt>
<dd class="form-unit-contents">
<ul class="form-radio-list">
<li class="form-radio-item">
<label for="man" class="form-label">
<input
type="radio"
name="gender"
id="man"
class="form-radio"
/>
<span class="form-label-txt">男</span>
</label>
</li>
<li class="form-radio-item">
<label for="woman" class="form-label">
<input
type="radio"
name="gender"
id="woman"
class="form-radio"
/>
<span class="form-label-txt">女</span>
</label>
</li>
</ul>
</dd>
</div>先ほどの構造をHTMLで表すと上記のコードになります。
性別を入力する項目は、ユーザーにラジオボタンを用いて選択してもらいます。
そのため、inputタグのtype属性の値は「radio」にします。
また、「男」「女」などのテキストをクリックした際に、ラジオボタンにチェックが入るようにしたいので、labelタグ（label.form-label）を使います。
inputタグのid属性と、labelタグのfor属性の値を一致させましょう。
ブラウザで状態を確認すると画像のようになります。
次は、デザインデータを確認して、記述するスタイルを考えていきましょう。
デザインデータからプロパティ、余白を確認する
デザインデータを確認して、余白を確認しましょう。
ラジオボタンの間の細かい余白も忘れずに確認しましょう。
CSSでサイトのスタイルを記述する
デザインデータのプロパティの確認ができたので、スタイルの記述をしていきましょう。
.form-unit:not(:first-child) {
/* ２番目以降のフォームの項目の上に24pxの余白をあける */
margin-top: 24px;
}
.form-radio-list {
display: flex;
}
.form-radio-item:not(:first-child) {
/* ２番目のliタグの左に16pxの余白をあける */
margin-left: 16px;
}
.form-label {
/* ホバーした時、マウスカーソルを変更する */
cursor: pointer;
}
.form-label-txt {
font-weight: bold;
margin-left: 8px;
}
.form-radio {
/* ラジオボタンの見た目を指定 */
appearance: button;
}
スタイルを記述・変更したら、ブラウザを確認しましょう。
上記の状態になっていれば問題ありません。
メールアドレスと電話番号を入力するフォームを作る
次に、メールアドレスのフォームと電話番号のフォームを作っていきます。
デザインデータから構造を確認する
メールアドレスのフォームと電話番号のフォームは、名前を入力するフォームと構造がよく似ています。
そのため、inputタグのtype属性とplaceholder属性を変更するだけで構造が作れます。
HTMLでサイトの構造を記述する
<div class="form-unit">
<dt class="form-unit-head">メールアドレス</dt>
<dd class="form-unit-contents">
<input
type="email"
placeholder="zeroplus@example.com"
class="form-input"
/>
</dd>
</div>
<div class="form-unit">
<dt class="form-unit-head">電話番号</dt>
<dd class="form-unit-contents">
<input
type="tel"
placeholder="080-0000-0000"
class="form-input"
/>
</dd>
</div>名前を入力するフォームのHTMLの構造を少し書き換えるだけで構造を作ることができます。
メールアドレスを入力する項目は、ユーザーに正しくメールアドレスを入力してもらえたかチェックする必要があります。そのため、inputタグのtype属性の値は「email」にします。
また、電話番号を入力する項目は、ユーザーに正しく電話番号を入力されているかチェックする必要があります。そのため、inputタグのtype属性の値は「tel」にします。
CSSでサイトのスタイルを記述する
名前を入力するフォームの箇所でスタイルを共通させているので、そのままスタイルが反映されます。
上記の状態になっていれば問題ありません。
セレクトボックスを使用したフォームを作る
デザインデータから構造を確認する
セレクトボックスを使うことで、ユーザーが複数の選択肢の中から回答を選択することができます。
liタグの中にinputタグを記述し、ラジオボタンを作りましょう。
HTMLでサイトの構造を記述する
<div class="form-unit">
<dt class="form-unit-head">職業</dt>
<dd class="form-unit-contents">
<select name="job" class="form-select">
<option value="" hidden selected>選択</option>
<option value="公務員">公務員</option>
<option value="経営者・役員">経営者・役員</option>
<option value="会社員">会社員</option>
<option value="自営業">自営業</option>
<option value="自由業">自由業</option>
<option value="専業主婦">専業主婦</option>
<option value="パート・アルバイト">パート・アルバイト</option>
<option value="学生">学生</option>
<option value="その他">その他</option>
</select>
</dd>
</div>セレクトボックスを作成するときは、selectタグの中にoptionタグを入れることで項目を作っていきます。
ブラウザで状態を確認すると画像のようになります。
まだセレクトボックスのスタイルが整っていないので、次はセレクトボックスのスタイルを確認していきます。
デザインデータからプロパティ、余白を確認する
デザインデータを確認して、余白を確認しましょう。
セレクトボックスの角に丸みがあることも見落とさないよう注意です。
CSSでサイトのスタイルを記述する
デザインデータのプロパティの確認ができたので、スタイルの記述をしていきましょう。
.form-select {
font-weight: bold;
max-width: 200px;
width: 100%;
padding: 8px 0;
border: 1px solid #ccc;
border-radius: 5px;
appearance: menulist;
}
スタイルを記述・変更したら、ブラウザを確認しましょう。
上記の状態になっていれば問題ありません。
チェックボックスを使用したフォームを作る
次に、チェックボックスを使用したフォームを作っていきます。
デザインデータから構造を確認する
スキルを選択するチェックボックスをulタグ（ul.form-checkbox-list）」としてまとめ、liタグ（li.form-checkbox-item）を記述しリストの構造を作ります。
liタグの中にinputタグを記述し、ラジオボタンを作りましょう。
HTMLでサイトの構造を記述する
<div class="form-unit">
<dt class="form-unit-head">スキル</dt>
<dd class="form-unit-contents">
<ul class="form-checkbox-list">
<li class="form-checkbox-item">
<label for="html-css" class="form-label">
<input
type="checkbox"
name="skill"
id="html-css"
class="form-checkbox"
/>
<span class="form-label-txt">HTML, CSS</span>
</label>
</li>
<li class="form-checkbox-item">
<label for="js-jquery" class="form-label">
<input
type="checkbox"
name="skill"
id="js-jquery"
class="form-checkbox"
/>
<span class="form-label-txt">JavaScript, jQuery</span>
</label>
</li>
<li class="form-checkbox-item">
<label for="worpdress" class="form-label">
<input
type="checkbox"
name="skill"
id="worpdress"
class="form-checkbox"
/>
<span class="form-label-txt">WordPress</span>
</label>
</li>
<li class="form-checkbox-item">
<label for="else" class="form-label">
<input
type="checkbox"
name="skill"
id="else"
class="form-checkbox"
/>
<span class="form-label-txt">その他</span>
</label>
</li>
</ul>
</dd>
</div>スキルを選択するチェックボックスは、チェックボックスを用いてユーザーに選択してもらいます。そのため、inputタグのtype属性の値は「checkbox」にします。
また、「HTML,CSS」「その他」などのテキストをクリックした際に、チェックボックスにチェックが入るようにしたいので、ここでもlabelタグ（label.form-label）を使います。
チェックボックスのinputタグのid属性と、labelタグのfor属性の値を一致させましょう。
ブラウザで状態を確認すると画像のようになります。
まだセレクトボックスのスタイルが整っていないので、次はセレクトボックスのスタイルを確認していきましょう。
デザインデータからプロパティ、余白を確認する
デザインデータを確認して、余白を確認しましょう。
CSSでサイトのスタイルを記述する
デザインデータのプロパティ、余白の確認ができたので、スタイルの記述をしていきましょう。
.form-checkbox {
appearance: checkbox;
}
.form-checkbox-item:not(:first-child) {
/* ２番目のliタグの上に8pxの余白をあける */
margin-top: 8px;
}
以上で、チェックボックスを使用したフォームは完成です。
テキストエリアを使用したフォームを作る
次に、テキストエリアを使用したフォームを作っていきます。
デザインデータから構造を確認する
お問い合わせ内容の文章を入力するテキストエリアは、textareaタグ（textarea.form-textarea）で構造を作成します。
HTMLでサイトの構造を記述する
<div class="form-unit">
<dt class="form-unit-head">お問い合わせ内容</dt>
<dd class="form-unit-contents">
<textarea rows="6" class="form-textarea"></textarea>
</dd>
</div>textareaタグは、rows属性で入力欄の行数を設定することができます。そのため、今回は値を「6」にします。
ブラウザで状態を確認すると画像のようになります。
次はテキストエリアのスタイルを整えていきます。
デザインデータからプロパティ、余白を確認する
デザインデータを確認して、余白を確認しましょう。
テキストを入力する箇所は、内側に余白がないと入力欄スレスレにテキストが打ち込まれてしまいます。
ユーザーが文章を見えにくい状態で入力することになるので、余白を入れていきます。
CSSでサイトのスタイルを記述する
デザインデータのプロパティの確認ができたので、スタイルの記述をしていきましょう。
.form-textarea {
font-weight: bold;
letter-spacing: 0.1em;
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
}
テキストエリアを使用したフォームは完成です。
いよいよ、残るは「送信ボタン」と「フッター」の２つです。
あともう一踏ん張り、頑張っていきましょう！
コンタクトフォームの送信ボタンを作る
次に、コンタクトフォームの送信ボタンを作っていきます。
デザインデータから構造を確認する
コンタクトフォームの送信ボタンは、inputタグtype属性を「submit」にすることで作成することができます。
HTMLでサイトの構造を記述する
<!-- dlタグの閉じタグの下 -->
<input type="submit" class="form-submit" value="送信" />送信ボタンは、dlタグの中には含めず、dlタグの兄弟要素として構造を記述します。
value属性の値に「送信」と入力し、ボタン内のテキストを設定します。
ブラウザで状態を確認すると画像のようになります。
次はボタンの形になるようにスタイルを整えていきます。
デザインデータからプロパティ、余白を確認する
デザインデータを確認して、余白と配置の方法などを確認しましょう。
CSSでサイトのスタイルを記述する
デザインデータのプロパティの確認ができたので、スタイルの記述をしていきましょう。
.form-submit {
color: #fff;
font-weight: bold;
width: 200px;
padding: 20px 0;
margin: 48px auto 0;
display: flex;
justify-content: center;
align-items: center;
background: #333;
border-radius: 100vh;
cursor: pointer;
}
上記のコードが記述できれば、コンタクトフォームの送信ボタンは完成です。
最後のフッターは、index.htmlのものを再利用することができるので楽に実装できます。
あと少しでページの完成です！
フッターを作る
最後に、フッターの構造を作っていきます。
デザインデータから構造を確認する
フッターのデザインはindex.htmlと共通になっていることが確認できれば問題ありません。
前回記述したstyle.cssでのスタイルが適用されて、フッターにはそのままスタイルが適用されます。
ここまでできたらcontact.htmlは完成です。
反復して練習しよう
ここまでの作業お疲れ様でした。
今回の流れを実際に行った場合のサンプルコードをご用意しましたので、以下のボタンからダウンロードして、自分が制作したものと見比べてみてください。
反復での練習が大切なので、今回の記事をもう一度初めから読んで理解を深めましょう。
最終的には、解説を見ずに制作できるところまで目指しましょう！
