今回の記事は前回の続きとなっています。
まだみていない人はそちらからどうぞー
さあプログラミング（HTML・CSS）勉強の2日目です。
前回の復習
まずは前回の復習からです。
前回覚えたことは、
- HTMLファイルの概要
- 文章の書き方
- 画像ファイルの入れ方
- リンクの入れ方
- リスト
- 表
以上6点をメインに覚えていきました。
まずはその点について覚えたことをメモ帳に書いていきます。
だいぶ雑に書いていますが自分に分かればOKです。
自分が後から見てわかりやすいように各項目ごとに分けて書きました。
これでチャプター2の半分くらい。今日はチャプター2を全部通りましょう。
チャプター2完走まで
チャプター2では後、以下の内容が紹介されています。
- テキスト入力
- ラジオボタン
- チェックボックス
- 複数行のテキストボックス
- グループ分けについて
これだけ見ると少なそうですが、かなり内容的には結構重めそうなのでしっかり頑張っていきましょう
テキスト入力の作成
テキスト入力欄は
入力してもらいたいこと:input type=”text” placeholder=”〇〇”
で作成できます。
※〇〇は入力欄にあらかじめ入るもの（入力令を書く場合が多い）
ラジオボタン、チェックボックス
ラジオボタン、チェックボタンはそれぞれ
input type=”radio” name=”グループ名” value=”選択肢1″>選択肢1
input type=”checkbox” name=”グループ名2″ value=”1″ checked>1
となります
checkedをつけることでさいしょからチェックが入ってる状態になります
※valueの後に idで名前を付けて label forとすることで文字も選択範囲になリマス。
例：input type=“checkbox” name=“〇〇” value=“” id=“〇〇”
※〇〇のところに任意の名前をつける
複数行のチェックボックス
複数行のテキストボックスは textarea で作成できます。
textarea name=“message” placeholder=“メッセージを入力”
これらで入力などの前半部分終了です。次はプログラムを打つ際のグループの分け方についてです
グループとは？
グループとはウェブサイトを構成する際に構成要素となる固まりのことで、グループを分けることでプログラムをする際にわかりやすくします。
記事のグループ化
記事のグループ分けの方法は2つ
１、見出しでくくる：文字通り見出しを作ります。h○から次のh○までを一つのグループとして扱います。
２、article、sectionでくくる：こちらも同様にグループ化したい部分をarticleやsectionで囲みます
その他のタグによるグループわけ
他のタグには以下のようなのもがあります
- ヘッダー部分の header
- ナビゲーションメニューの nav
- 読み物や記事の article
- テーマを持ったグループを作る section
- メインコンテンツの main
- 補足情報の aside
- フッター部分の footer
- 意味を持たないブロックの div
これらのグループやブロックを作るタグを駆使してウェブサイトを作っていきます
今日のまとめ
それでは今日やったことをまとめていきます。
本日やったのは、
- テキスト入力
- ラジオボタン
- チェックボックス
- 複数行のテキストボックス
- グループ分けについて
これらの内容です
そしてここまでの内容をぽちぽちとプログラミングしたものがこちらです
途中で見切れるくらいにはやってみました笑
そして、できたWebページがこちら！
うーん、、、なんというか、、、
ごちゃごちゃしすぎ！！
フォントとかそういうのも、てんでバラバラですし、まとまりがない！
まあ覚えたことをそのまま適当に打ってるだけなのでそうなるとは思いますけど、、、
とぐずぐず言っていたら次のチャプターのCSS編で変えていくようです笑
と言うことで今回はここまで！
これで教材のチャプター2が終了しました。次回からはCSS編に入っていきます。
次のチャプターは、ぱっと見分厚いので何日かかけて頑張っていきます、、、
それではまた次の記事でお会いしましょう！！
次の記事はこちら！→まだ
コメント
[…] […]