HTMLマークアップの考え方

まずはデザインを決めねばならない

HTMLを覚えればwebページが作れるが、作れない。
webページのデザインを決めなければならない。

製作は以下の3工程で進んでいく

フレームワーク

どこに何が来るのか、ボタンがどう並ぶのかなど線で枠を作り、大まかな形を決める

デザインカンプ

文章、画像をはめて、装飾を施し、完成見本を作る。

コーディング

デザインカンプをもとにHTML、CSSを使ってwebページを作る
ページサイズもピクセル単位で決まっていて、はめていく。

なので、デザインが無い段階で、VSCordをひらいてHTMLのソースを見ていても何も出来上がらない。

コーディングはあくまでブラウザで表示させるための方法。

フレームワーク、デザインカンプを作るところを学ばなければいけない

デザインカンプで使うソフトは
フォトショップ
イラストレーター
XD

いわゆるアドビ製品がメインになる。

HTMLタグを使い階層で分けていく
body直下に次の4種がくる

この4つを分けてからより細かく分けていく
ｐだとかh1だとかimg、リンクがaとかはまだいらない。
大きなブロックで分けていく。

headerとasideはリンク部分をnavタグで囲い、ulタグでリストを作る。

mainタグの下にarticleタグ、構成次第だけど、メインと同じ範囲を囲う。
articleタグが記事全体をくくり、　sectionタグで見出しごとに分けていく。
sectionタグの中は、見出しh2と段落のｐタグが入る。

大まかなブロック分けが終わってから、
細かい要素をタグ付けしていく。

デザインはCSSを作る段階までお預け。
HTMLで要素を分けてから、CSSを作る、
殺風景だけど、要素ごとにマークアップする。

タグ	フォーム関連タグ
form	項目はPで囲う
input	type=radio:checkbox:text：submit
select	optionで項目を作る
textarea	複数行のテキストエリア
label	ボタンだけでなく項目名をクリックでも選択できるようになる
属性
checkd=	checkdでデフォでチェックが入る