デイトラでWEB制作コース学習（Day２）☆HTMLのタグを書いてみよう☆

こんにちはユーマです！@yuma_web_studio

デイトラのWEB制作コースを受講しています。

受講した内容を発信していきたいと思っています。

☆タグで囲もう

1”<”と”>”のカギ括弧で囲まれたタグとコンテンツの組み合わせ、<p>30  days</p>

2基本的に「開始タグと終了タグは１セットで書くのがルール」

☆見出しと段落

・hはheading（見出し）の略で、よく使うのは<h1>〜<h4>
・段落にはpタグを使います。pはparagraph（段落）

◆<h2>恐怖を乗り越える</h2>

☆リンクの付け方

・リンクをつける時はaタグを使います。aタグのaはAnchor（いかり）
・href（エイチレフ）は属性
・<a>タグを使う時は<a href="URL">テキスト</a>が1セット
◆<a href="https://www.daily-trial.com/">デイトラ</a>

☆画像を表示

・。imgはimage（画像）、srcはsource（出典）
・<img src="画像のURL">
<img>タグに終了タグはいらない
◆＜<img src="https://tokyofreelance.jp/web_first.png" alt="">

☆リストを表示（ul/ol）

・数字なしリスト（ulタグ）と、数字付きリスト（olタグ）の二種類
・「ul」は「unordered list（順序がないリスト）」、「ol」は「ordered list（順序のあるリスト）
◆<ul>　数字無
<li>リンゴ</li>
<li>リンゴ</li>
<li>リンゴ</li>
</ul>

<ol>　数字あり
    <li>リンゴ</li>
    <li>リンゴ</li>
    <li>リンゴ</li>
    </ol>

☆コメントの入れ方

・<!-- と -->に囲まれた範囲がコメントになります。コメントは複数行になってもOK
・いちいち消さなくても、実質的には消したのと同じ挙動にできます。
このコメントの使い方をコメントアウト
・、ブロックの区切りを分かりやすくするためにもコメントを使います。
◆<!--<h2>恐怖を乗り越える</h2>-->

☆グループにして整理する

・HTMLは1ページ数百行くらい平気で書きます。
・HTMLではグループ化を積極的に行います！
<div>～</div>と囲むことで、囲まれた部分をグループ化
・HTML全体をブロックに分けて整理できる「ブロックに分けて管理する」というのはHTMLの基本的な考え方
・まとめてデザインを設定できる（<div>でグループ化していると、<div>～</div>内の要素にまとめて設定を適応できる）

☆タグに属性をつける

・<p id="taro">山田太郎</p>と囲っているp要素のid属性にtaroを追加しています（id属性とは名前のようなものです）。
・「aタグのhref属性がこのURLなんだな」
１id属性：様々なHTMLタグで使われる。要素に好きな「固有名」を付ける
２class属性：様々なHTMLタグで使われる。要素に好きな「分類名」を付ける
３src属性：imgタグ（画像を表示するタグ）で使われる。画像ファイルの置き場所を示す
４href属性：aタグ（ハイパーリンク）で使われる。リンク先を示す
※<タグ名 属性="属性値">

最後に

HTMLの基本を中心とした内容でした。