前回の続きでTechAcademyさんの無料動画「はじめてのHTML入門講座」の後半部分です。
分かりやすくて内容が短くまとめられているので、
一通り実施するのにそれほど時間はかかりませんでした。
丁寧な話し方なので1.25倍速がお奨めです。
Contents
はじめてのHTML入門講座リスト
| Chapter | 題名 | 時間 |
|---|---|---|
| 1-1 | HTMLとは何か？（はじめてのHTML） | 6:19 |
| 1-2 | マークアップ（はじめてのHTML） | 4:16 |
| 1-3 | HTMLの基礎構造（はじめてのHTML） | 4:47 |
| 1-4 | よく使われるタグ（はじめてのHTML） | 5:24 |
| 2-1 | 見出し・段落（HTMLのテキスト） | 5:10 |
| 2-2 | 強調・区切り線（HTMLのテキスト） | 4:28 |
| 2-3 | 引用（HTMLのテキスト） | 4:29 |
| 2-4 | 略語・名前の特記・住所表現（HTMLのテキスト） | 4:30 |
| 2-5 | コード、改行、プリフォーマット（HTMLのテキスト） | 4:22 |
| 3-1 | リスト項目（HTMLのリスト表記） | 4:38 |
| 3-2 | 定義リスト（HTMLのリスト表記） | 3:28 |
| 4-1 | アンカータグ（HTMLのリンク） | 5:42 |
| 4-2 | 相対パスと絶対パス（HTMLのリンク） | 7:53 |
| 5-1 | 画像（HTMLのオブジェクト） | 4:28 |
| 5-2 | ファイルの読み込み（HTMLのオブジェクト） | 7:47 |
| 5-3 | iframe（HTMLのオブジェクト） | 3:46 |
| 5-4 | コメント（HTMLのオブジェクト） | 4:05 |
| 6-1 | 行とセル（HTMLのテーブル) | 6:37 |
| 6-2 | テーブルのヘッダーとフッター（HTMLのテーブル） | 4:34 |
| 7-1 | テキスト入力（HTMLのフォーム） | 5:30 |
| 7-2 | ラジオボタンとチェックボックス（HTMLのフォーム） | 6:41 |
| 7-3 | ドロップダウンメニュー（HTMLのフォーム） | 7:12 |
| 7-4 | フォームのグルーピング（HTMLのフォーム） | 6:39 |
画像（HTMLのオブジェクト）
・imgタグ
img srcの形でどの画像を表示させるかを指定。
これは何度も使ったことがあるので簡単。
・alt属性
画像がどの様なものかを説明する。
読み上げブラウザに対応している場合は、画像の代わりに読み上げられる。
・title属性
画像の上にカーソルを置いておくと表示される内容。
ここでは無料素材で使わせて頂いている画像ですとしました。
ファイルの読み込み（HTMLのオブジェクト）
・Link
スタイルシートやFaviconなどを読み込むときに使う
Faviconはfavorite + iconの略。
略語の説明にはabbrタグが使えますね。昨日の復習です。
・scriptタグ
JavaScriptのファイルを読み込んだり、JavaScriptを書くときに使う
マナブさんのプログラミング基礎の完全ロードマップには対象になってませんが、
TechAcademyさんのはじめてのJavaScript入門講座も観ておこうと思います。
コメント（HTMLのオブジェクト）
<!– ここがコメントアウトされる個所 –>
この形を忘れなければOK。
行とセル（HTMLのテーブル)
デザインをするために使わないという暗黙のルールがあるのは知りませんでした。
マナーでしょうかね。
何でだろう。
tr：table record。一つのデータの塊を意味する。
td：table data
th：table header
| メニュー | 値段 |
|---|---|
| ハンバーガー | 250円 |
| フライドポテト | 200円 |
| コーラ | 170円 |
上の表をイメージ図で現すとこうなります。
これは形で覚えたら忘れにくいと思います。
テーブルのヘッダーとフッター（HTMLのテーブル）
thead：表のヘッダー
tbody：表のボディ
tfoot：表のフッター
見たことはありましたがあまり意識していなかったので、
ここで初めて勉強しました。
これらのタグでエリア分けをするとその場所だけを表示させる
などのことができるみたいです。
まずここでは構文を抑えておきます。
また<td colspan=”2″></td>とすると、
セルを2つ分連結することができます。
| メニュー | 値段 |
|---|---|
| ハンバーガー | 250円 |
| フライドポテト | 200円 |
| 安いお奨めWiFiをお探しなら | |
ハンバーガーとポテトには関係無いですが、私の別の記事のリンクをセル2つに渡って表示させてみました。
よくお店のページにもメニュー一覧の最後に広告や他のものを紹介したりしていますね。
イメージ図です。
テキスト入力（HTMLのフォーム）
ここからは私にとってこの講座のメインに入ります。
フォームは色々使えるのでここで基本をマスターしつつ、
より使いやすい方法を身に着けていきたいと思います。
・inputタグ
<input type=”text”>
これでテキストの入力欄ができました。
実際に文字を入力しようとしたらブラウザがこの様に反応しました。
いつもよく見る入力フォームの画面です。
<input type=”password”>
これでテキストの入力欄の部分が*で表記されるようになります。
<textarea></textarea>
文字を入力するエリアができました。
<textarea rows=”5″></textarea>
エリアの大きさをrowsで5行分に設定できます。
<textarea cols=”10″></textarea>
textarea cols=””で指定すると入力できる文字の幅を指定できる。
、、筈ですがWordpressだとうまくいかないぁ。。
多分やり方はあるんでしょうね。
textでhtmlファイルを作成してブラウザで開いたところ、
下の様に幅が小さくなっていました。
とりあえずここでは先に進んでみようと思います。
<input type=”text” name=”abc”>
見た目は変わりませんが、この部分をabcという名前を付けることができます。
名前を付けることによってこの部分を名前で指定できるようになります。
ラジオボタンとチェックボックス（HTMLのフォーム）
まずはTechAcademyさんの説明をそのまま覚えることにしました。
・ラジオボタン
<input type=”radio”>を使う。
name属性が同じものの中で一つだけ選択できる。
value属性で送信する値を指定する。
あなたが一番欲しいのはどれですか？
愛
お金
その他
※一つだけ選択することが出来ることを確認して下さい。
ここで書くタグの内容は下記になります。
<input type=”radio” name=”ichiban” value=”love”>愛<br>
<input type=”radio” name=”ichiban” value=”money”>お金<br>
<input type=”radio” name=”ichiban” value=”other”>その他<br>
イメージ図
・チェックボックス
<input type=”checkbox”>で指定する。
name属性が同じものがひとまとめのデータとして扱われる。
value属性で送信する値を指定する。
あなたが欲しいのは何ですか？
愛
お金
その他
※複数選択することが出来ることを確認して下さい。
ここで書くタグの内容は下記になります。
<input type=”checkbox” name=”hosiimono” value=”love”>愛<br>
<input type=”checkbox” name=”hosiimono” value=”money”>お金<br>
<input type=”checkbox” name=”hosiimono” value=”other”>その他<br>
ドロップダウンメニュー（HTMLのフォーム）
いよいよこの講座も大詰め。
ドロップダウンメニューは一つしか選択できない。
・selectタグ
selectタグに対してname属性を指定する。
optionタグに対してvalue属性を指定して送信する値を決定する。
・optgroupタグ
複数のoptionをグルーピングするために使われる。
住んでみたい国は？
タグはこの様に書きます。
住んでみたい国は？
<select name=”country”>
<option value=”Japan”>日本</option>
<option value=”Philippines”>フィリピン</option>
<option value=”America”>アメリカ</option>
</select>
上記では3国のみですが、数が多い場合は分かりづらくなるので
optgroupを使ってグルーピングすると見やすくなります。
住んでみたい国は？
うん。何となくそれっぽく見えますね(笑)
いよいよ次でラスト。
フォームのグルーピング（HTMLのフォーム）
・fieldsetタグ
複数の入力欄をまとめる。
・legendタグ
伝説。
ではなくfieldsetでまとめた項目の説明を書く。
・labelタグ
入力欄のラベルとして使う。
入力欄のidに対してlabelのfor属性で指定する。
まずは動画の内容を覚えることに専念して、いずれ自分で色々作れるようにします。
この様に記載します。
<fieldset>
<legend>IDとPassword</legend>
<input type=”text” name=”name”><br>
<input type=”password” name=”pass”><br>
</fieldset>
WordPressでそのまま記載するとどうしてもIDとPasswordの部分が横長になりますね。
この様に書きます。
<fieldset>
<legend>性別</legend>
<input type=”radio” name=”gender” value=”male”>男性<br>
<input type=”radio” name=”gender” value=”female”>女性<br>
</fieldset>
この状態だと男性、女性の部分をクリックしてもチェックが入りません。
男性、女性の部分をクリックすればチェックが入るようにします。
この様に書きます。
<fieldset>
<input type=”radio” name=”gender” value=”male” id=”male”><label for=”male”>男性</label><br>
<input type=”radio” name=”gender” value=”female” id=”female”><label for=”female”>女性</label><br>
</fieldset>
イメージ図
これでTeckAcademyさんのはじめてのHTMLで自分が知らなかった所、
曖昧だった所は一通りまとめ終わりました。
ここからが勉強のスタートだと思って頑張ります。
プログラミングは大変ですが、継続は力なりで頑張ります。