Part4 - 1カラム(1) マークアップ
MarkUp
- ユーザーは上から順にコンテンツを見るため、順番をよく考えて情報設計をすることが大切です
- PC版とスマートフォン版の例のギャップも少ないため、レスポンシブWebデザインと相性のよいレイアウトです
HTMLの構造
<header class="header"> </header> <main class="main-content"> </main> <footer class="footer"> </footer>
ページ内リンクを設定
- ページ内リンクの飛び先となる要素にid属性を指定します
<nav class="gnav"> <ul> <li><a href="#msgArea">Message</a></li> <li><a href="#dateArea">Date</a></li> <li><a href="#formArea">Form</a></li> </ul> </nav><!-- /.gnav --> <section id="msgArea"> … <section id="dateArea"> … <section id="formArea"> …
フォームのマークアップ
- お問合せフォームの作成
formタグ
- action属性とmethod属性は必須
<form action="" method=""> </form>
設問ごとに段落を作る
<form action="" method=""> <p>ご出席 ご欠席</p> <p>お名前</p> <p>メールアドレス</p> <p>ご自身のタイプ 草食動物 肉食動物 人間さん</p> <p>アレルギーのある食べ物 卵 乳 小麦 大豆</p> <p>メッセージ</p> <p>送信</p> </form>
ラジオボタン
- 複数の選択肢から1つのみを選択してほしいために利用します
input
- type属性で入力欄の種類を指定し、name属性で入力欄の名前を指定します
<p> <input type="radio" name="attend" value="ご出席">ご出席 <input type="radio" name="attend" value="ご欠席">ご欠席 </p>
「ご出席」を選択状態にする
- checked属性を追加します
<p> <input type="radio" name="attend" value="ご出席" checked="checked">ご出席 <input type="radio" name="attend" value="ご欠席">ご欠席 </p>
1行のテキスト入力欄
- type属性にtextを指定し、name属性で入力欄の名前を指定します
<p> お名前<input type="text" name="user_name"> </p> <p> メールアドレス<input type="email" name="user_mail"> </p>
セレクトボックス
- ドロップダウン形式で選択肢を提示できるフォーム部品を「セレクトボックス」といいます
- 全体を「selectタグ」で、選択肢を「optionタグ」で囲みます
- name属性は、「selectタグ」に「value属性」は、「optionタグ」につけます
<p> ご自身のタイプ <select name="user_type"> <option value="草食動物">草食動物</option> <option value="肉食動物">肉食動物</option> <option value="人間さん">人間さん</option> </select> </p>
チェックボックス
- 複数選択ができるフォーム部品を「チェックボックス」といいます
- type属性にcheckboxを指定し、name属性に同じ値を指定します
<p> アレルギーのある食べ物 <input type="checkbox" name="allergy" value="卵">卵 <input type="checkbox" name="allergy" value="乳">乳 <input type="checkbox" name="allergy" value="小麦">小麦 <input type="checkbox" name="allergy" value="大豆">大豆 </p>
複数行のテキスト入力欄
- 複数行のテキスト入力欄には「textareaタグ」を使います
- name属性もつけます
<p> メッセージ <textarea name="message"></textarea> </p>
送信ボタンを作る
- 「inputタグ」のtype属性にsubmitを指定します
<p> <input type="submit" value="送信"> </p>