無料動画レッスンで学ぶHTMLの勉強③ Webデザイン系の職業訓練開始までに自習中
Webデザイン系の職業訓練を受けることになったので、
せっかくだし訓練開始までの期間に関連するスキルについて
予習しておこうと思い始めたコーディング（HTML）の勉強。
第３回目。
使った教材は、前回と同じドットインストールという動画を使った無料レッスン↓。
今日はこれの、第２０回〜２４回までの動画レッスンを受けた。
学んだ内容をつらつらと書いてみる。
適当なので間違ってたり若干範囲が前後しているかも。
第２０回 checkbox､radio､labelを使ってみよう
<input>：ボタンを作る
checkbox：チェックボックス
radio：ラジオボタン。チェックボックスと異なり一つのみ選択可能
checked：予め選択された状態に
label：チェックボックスやラジオボタンだけでなく、ラベルのクリックでも選択することが可能に。
例
<p>
phone:
<label><input type="checkbox" name="phone" value="android" checked>Android</label>
<input type="checkbox" name="phone" value="iphone" id="iphone"><label for="iphone">iPhone</label>
</p>
<p>
Color:
<input type="radio" name="color" value="red" checked id="red"><label for="red">Red</label>
<input type="radio" name="color" value="blue" id="blue"><label for="blue">Blue</label>
</p>
<p><input type="submit" value="送信"></p>
でこうなる↓。
phone:
Color:
第２１回 selectタグでセレクトボックスを作ろう
select：選択式のやつを出せる
selected：予め選択されるのを指定
multiple：複数選択可能になる。macだとcommand押しながらで。
size：multiple使用時に表示される枠のサイズ（数）。
例
<p>City:
<select name="city">
<option value="tokyo">Tokyo</option>
<option value="nagoya">Nagoya</option>
<option value="osaka">Osaka</option>
<option value="sendai" selected>Sendai</option>
<option value="hakata">Hakata</option>
</select>
</p>
<p>City:
<select name="city" multiple size="3">
<option value="tokyo">Tokyo</option>
<option value="nagoya">Nagoya</option>
<option value="osaka">Osaka</option>
<option value="sendai" selected>Sendai</option>
<option value="hakata">Hakata</option>
</select>
</p> <p><input type="submit" value="送信"></p>
でこうなる↓。
City:
City:
第２２回 HTML5から使える属性を使ってみよう
・email
・number
・date
いずれも、いい感じの形式になって適したもの以外の入力を弾いてくれる。
required：入力必須にする
novalidate：formに追加でrequiredなどを無効化
例
<form action="survey.php" method="post">
<p>メールアドレス:<input type="email" name="email" required></p>
<p>料金：<input type="number" name="price"></p>
<p>誕生日：<input type="date" name="birthday"></p>
<p><input type="submit" value="送信"></p>
</form>
<p>novalidateの場合↓</p>
<form action="survey.php" method="post" novalidate>
<p>メールアドレス:<input type="email" name="email" required></p>
<p>料金：<input type="number" name="price"></p>
<p>誕生日：<input type="date" name="birthday"></p>
<p><input type="submit" value="送信"></p>
</form>
でこうなる↓。
novalidateの場合↓
第２３回 文字参照を使ってみよう
htmlタグでよく使う”とか＆をそのまま表示させたい場合の話。
記号の表示には数値文字参照と文字実体参照の２通りの方法がある。
文字毎に参照の文字列が決まっている。
例えば不等号の＜は
と入力する。
例
<p><</p>
<p><</p>
<p><input type="text" value="区切り文字は""></p>
<p>この記号の文字参照は&quot;です。</p>
で↓のようになる。
<
<
この記号の文字参照は"です。
第２４回 コンテンツモデルを理解しよう
タグ
カテゴリー：どの分類か
コンテンツモデル：どのカテゴリーのタグを入れられるか
トランスペアレント：親要素のコンテンツモデルを使ってくれ
要は、<a>タグだったら<a></a>の間に入れられるタグが決まってるよ。
そういう決まり事がありますよ、ということ。
以上で、とりあえずドットインストールのHTML入門講座の全２４回を完了した。
フォームが案外簡単に作成できることに驚いた。
テーブルについては、この講座を受けただけだと良い具合に使えそうな感じがしないなぁ。単なるちょっとした表としてならともかく。
講座は言われたままに入力するのにいっぱいいっぱいだったけど、何か作ろうとした時にリファレンスとして役立ちそう。
次はCSSのレッスン動画を見てみようかな。
