2023/12/07 学科 HTML基礎③【オンライン】

1限目：テキスト分類タグとコンテンツ埋め込みタグについて
2限目：画像の取り扱いについて
3限目：テーブルタグとフォームタグについて
4限目：HTML・CSSの紐付けと特殊文字について
5限目：本日の講義のまとめ

今日教わったこと
今日の参考サイト

今日教わったこと

・文字コード：HTMLとCSSにそれぞれ記述するから注意
・コメントアウト：タグに影響しないメモ書き。HTML（見えなくさせる）とCSS（プログラムを止める）で書き方が違うので注意
・パス：
・画像：imgはマークアップなので意味が必要。backgroundはCSSなので見た目だけ。文法上の意味を持たない。
imgを使うべきか、backgroundを使うべきか
文脈上必ず必要な画像はHTMLでimg使っていれる、文脈上いらんけど飾りとして入れたいならCSSでbackground使っていれる。
・表示ルール：覚えるのは大変なのでメモっておくといい。
・セレクタの得点：効く効かないがある（攻撃力的な…？？）数字が高い方が効き、同点の場合は後から書いた方が効く。
・絶対に必要なHTMLコードたちは最初にテンプレファイル作っておいてそれを使いませばいい。

▼テキスト分類タグについて
（pで指定したブロックの中で更に指定する要素。br以外は部品の要素）
（HTML4までと意味が違うので、古いサイトを修正する時に昔の意味で使われてたりするかもしれないのでそういうものがあるとして覚えとく）

・a要素（ハイパーリンク）
　リンクを表すもの。触れた時の装飾はCSSでやる。どこに飛んでいくか示す「href=”リンク先情報”」は
　必ず必要なのでセットで覚える。ページ内リンクもできる。
　外部サイトへのリンクなど、新しいタブで開かせたいときは「target=”_blank”」を付ける。
　が、脆弱性があるので「rel=”noopener noreferrer”」もセットでつける。

・em要素（強調）
　強調する単語をemで囲むと文字に斜体がかかる（傾けないで強調したいときはCSSで指定）

・strong要素（強い重要性）
　emより強い強調。太くなるが文字を太くしたい時に使うものではないので注意。

・small要素（免責・警告・著作権など）
　見た目は小さくなるが、小さくしたい時に使うものではないので注意。

・i要素（声や心の中で思ったこと）
　セリフとか、他の文章と区別したい所で使う。

・b要素（キーワードや商品名など）
　キーワードや商品名として定義しておきたいものに使う。

・span 要素（ひとつの範囲）
　意味はないけどここだけ区切りたいって時に使う。例外。

・br 要素（改行）
改行。空要素なので終了タグ無し。

▼コンテンツ埋め込みタグについて

・img要素（画像）
画像をここに埋め込んでくださいの指定。空要素なので終了タグ無し。
＜img src=”画像パス名” width=”画像の幅” height=”画像の高さ” alt=”代替テキスト”＞
src：必須。相対パスと絶対パスの概念はここで使う。
　　PNG・GIF・JPEG(JPG)・WEBP・SVG・PDFなどを指定できる。
　　外部サイトの画像を直リンクできなくもないが規約で禁じている場合もあるので必ず規約を確認する。
width・height：幅と高さ。スマホでの閲覧も想定して今も入れてる。入れることで指定したサイズ分の
　　　　　　　領域を予め確保してから画像を読み込んでくれるようになる。（レイアウトシフト）
　　　　　　　また、指定する時に単位は入れない。勝手にピクセルで表示してくれる。
alt：必須。万が一リンク切れした時や音声読み上げ機能で表示させる文章。なので具体的に書く

・iframe要素（インラインフレーム）
Webサイト内にフレームを作ってその中に別のWebサイトを貼り付ける。
＜iframe src=”フレーム内に表示する URL” width=”フレームの幅” height=”フレームの高さ” title=”補足情報（大体の場合URLやタイトルが入る）”>フレームが表示できない時のメッセージ</iframe＞
対応していないブラウザもある。

▼テーブルタグ（表）

HTMLだと縦の表だろうと横に書いていく。幅高さ色などはCSSで。
（楽天やヤフーだとテーブルタグで調整しなきゃいけなかったりする）

＜table>テーブルの範囲。全体を囲う。
　　＜caption>キャプション必ず1行目
　　＜tr>＜th>見出し①見出し②横の1行がtrで見出しがth
　　＜tr>＜td>データデータデータはtd
　　＜tr>＜td>データデータ
＜/table>

＜tbody＞＜thead＞＜tfoot＞は省略OKだが書くと構造をより明確にできる。
セルの結合を横にしたい時は＜th＞の中に「 colspan=”つなげたいマスの数”」を入れる。
縦にしたい時は＜th＞の中に「 rowspan=”つなげたいマスの数”」を入れる。

・cols（横/カラム）rows（縦/ロー）はHTML・CSSではよく出てくる。

▼フォームタグ

・form要素（フォーム）
お問い合わせフォームや登録フォームに使う
＜form action=”URL(送信先)” name=”フォームの名前(何のフォームか)” method=”転送方法” enctype=”データ型式”>
フォーム要素（部品）
</form＞
全体をフォームで囲う。methodとenctypeは転送方法や転送形式の話なので、今は形を作れるようになればいい。

・label要素（ラベル）
入力欄と関連付けしてあげるためのもの。ここをクリックしても入力欄が反応する。
formもforもform要素との関連付けを行う。

・input要素（インプット）
入力欄の話。幅や最大・最小文字数などの指定。

・textarea要素（テキストエリア）
お問い合わせ内容とか。サイズや最大・最小文字数などの指定ができる。

・select/option 要素（セレクト／オプション）
選択ボックスを作れる。最初にどこ選んでるのかとか（1900年代から開始してるけど2000年を最初に設定している状態にするとか･･･）

・button 要素（ボタン）
初期値は送信ボタン。リセットボタンかそれ以外なのかを設定できる。
タグで挟まれてる部分がボタンに出てくる文字。

・fieldset/legend 要素（フィールドセット／レジェンド）
フォームの中にグループを作るのがfieldset、そのグループの名前を付けてあげるのがレジェンド

▼CSSとの紐付けについて

別ファイルで作ったHTMLとCSSをタグで紐づけする。
ただ、例えば2つテーブルがあったとして片方だけ見た目を変えたいとする。そういう時にテーブルに名前を付けて、その名前のものだけに変更を適用するとかそういう指定をする。

id属性：1つのページの中に同じ名前は1回しか使えない。JacaScriptとかで動きを制御するために使う。
（id自体は何回出てきてもいい。id=”a”が何回も出てくるのがダメ）
class属性：何度でもOK。CSSで見た目を整理するために使う。

↓CSS例↓
h1{font-size:200%;}
①　②　　　　③
①どのタグを変更するか（今回は見出し）
②それの何を変更するか（今回はフォントサイズ）
③どのくらい変更するかの値（：；で挟んで書く）

▼例を踏まえて設定の優先順位の話（今後改めてやる）

タグの名前+id名指定あり（101点）
タグの名前+タグの名前+class名指定あり（12点）
タグの名前+class名指定あり（11点）
class名指定あり（10点）
id名・class名指定なしでタグの名前のみ（1点）

・id名を付けるといきなり100点加算されて絶対的な設定となる。
なので、CSSで見た目の設定を変更したいならclassで変更した方が「変更してるはずなのに反映されない…(idが優先されちゃってるから反映されない)」みたいなのが減らせる。
・動きの指定のためにidも設定する、見た目の設定のためにclassもつけるってものOK。

▼特殊文字について
記号を文字として表示させたい。（例：タグを文字列として見せたい時など）
タグは＜＞で囲まれている限りタグとして認識されるので、「<」「>」で置き換えてあげると見た目上は＜＞で表示される。
世間には特殊文字に変換するツールがあるので必要になったらそれを使う。