2023/12/05 学科 HTML基礎②【オンライン】

Diary
2023.12.05

1限目：HTMLの基本構造について
2限目：HTMLの文書情報について
3限目：セクション分類タグについて
4限目：コンテンツ分類タグについて
5限目：本日の講義のまとめ

今日教わったこと

https://samplesdl.me/training_html-css/
・ここ↑は大事な点だけ書いてあって全部網羅しているわけじゃないが、現役デザイナーだって全部網羅しているわけじゃない。
・全てのブラウザで使えるタグしかない
・コピペして使えるサイトだけど、ここからそのままではなくて自分で作るようにしてほしい。その方が覚える。
・タグチェッカーはデータのところを選んで、書いたタグを全部貼ってOKを押す
・訓練校で勧めているLintって所が繋がらない場合はW3Cって所がおすすめ。ただ全部英語なので頑張って読んで。
・ブロックレベル要素（幅いっぱいの領域を持つ）（箱）か、インライン要素（一部しか持たないか）（部品）という言い方は無くなったが性質は残っている。箱の中に部品は入るが、部品の中にはブロック要素は入れない。

▼セクション分類タグについて

・h1～h6 要素（見出し）
数字が小さい方が大きく、大きくなれば中見出し、小見出しといった形で下がっていく。使う時はページ上から1，2，3，4，…の順番で使わないといけない。2が出てくる前に3は使えない。
また、h1はそのページのタイトルになるようなもので、ページに1つだけ配置する。見出しじゃないけど文字を大きくしたいからｈ1にしましたはNG。
（htmlはあくまで意味付けで、装飾はしない）

・article 要素（アーティクル）
これ単独で成り立つコンテンツのブロックを定義。このページに関連している別のページへのリンクとか。
無いページもある。

・section 要素（セクション）
章のブロックを表す。セクションの中には必ず見出しが入る。

・header 要素（ヘッダー）
だいたいページ上部にある帯の部分。ページのタイトルやナビゲーションが配置されている。
ヘッダーはいくつ使ってもOKだが、ヘッダーの中にヘッダーは入れない。響きが似てるけどタグとは別物。

・footer 要素（フッター）
ページの下にある。コピーライトやサイトマップとかナビゲーションとかほかの関連サイトへのリンクとかが配置されてることが多い。
フッターも、いくつ使ってもOKだがフッターの中にフッターは入れない。あとヘッダーの中にフッターは入れないし、フッターの中にヘッダーも入れない。

・nav 要素（ナビ）
ここはナビゲーションだよって所を囲む。ヘッダーの中のメニューとか。

・aside 要素（アサイド）
ページの内容と関連がないブロックや、補足情報を定義している。アジェンダページの右側のカレンダーとかの部分とか。無いページもある。

▼コンテンツ分類タグについて

・p 要素（段落（パラグラフ））
段落を示すタグ。

・hr 要素（区切り）
WordPressでいう水平線。空要素なので終了タグ無し。
話が変わるから線を入れるのであって、飾りとして入れるのはNG

・ul/li 要素（順序のないリスト。ただの箇条書きなので・がつく）
・ol/li 要素（順序のあるリスト。ランキングや手順とかなので数字がつく）
それぞれ使うならulかolとliは必ずセットになる。
箇条書きを・や数字から他にしたい場合はCSSでやる。navの中に入ったりもする。

・dl/dt/dd 要素（定義・説明リスト）
全体をdlで囲って、dtが見出し的な言葉で、それに対する説明文がdd
dt1つに対してdd2つ付くこともある。これを横に並べたい、隙間を消したいなどはCSSでやる。

・div 要素（ひとつのかたまりの範囲）
ここからここまでは1つの塊にしたいですと示すもの。何にでも使っていい。
最悪全部divを使っていいけどSEO対策（検索して引っかかってくるかなど）に関わってくるので見た目は大丈夫でも検索結果が上がらなくなったりすので使い分けたほうがいい。

・main 要素（メインコンテンツ）
メインコンテンツを示すので1ページに1つしか使わない。

・今後HTMLの記述をするときはとにかく先に全部文字を起こしていく。いちいち半角全角を切り替えるのは面倒だしタイプミスに繋がるので。
・Dreamweaverは5か月目に習う。予測変換が出て閉じタグも出てくるので時短に繋がって便利。
・一旦非表示にしたい文章がある場合は、でいったん非表示にできる。これをコメントアウトという。
・＜br＞は改行。自分の環境上の雰囲気の良い所ではなく、文章のキリが良いところに入れないとユーザー側の環境によっては読みにくいところで改行されてしまう。
・文章の間を空けたいならば＜br＞ではなくCSSでやる。

今日の参考サイト

コメント