Part4 - 1カラム(1) マークアップ

MarkUp

• ユーザーは上から順にコンテンツを見るため、順番をよく考えて情報設計をすることが大切です
• PC版とスマートフォン版の例のギャップも少ないため、レスポンシブWebデザインと相性のよいレイアウトです

HTMLの構造

• デザインカンプ「design.png」を見ながらマークアップをする

<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>

ラジオボタン

• 複数の選択肢から１つのみを選択してほしいために利用します

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>

１行のテキスト入力欄

• 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>

ユーザビリティを高める

• 「labelタグ」で項目名とradioボタンをマークアップします
• radioボタンだけではなく、項目の文字上も選択可能になります

<p>
  <label><input type="radio" name="attend" value="ご出席" checked="checked">ご出席</label>
  <label><input type="radio" name="attend" value="ご欠席">ご欠席</label>
</p>