こんにちは！トモです。今日はWeb制作コース初級編2日目の学習内容を備忘録として残していきます。
この記事を見ると次のことが確認できます。
もくじ
タグで囲む
HTMLは「<」と「>」のカギ括弧で囲まれたタグとコンテンツの組み合わせで書いていき、コンテンツの前に書くタグを開始タグ、終わりに書くタグを終了タグと呼びます。
<p>節約生活録トモ</p>基本、開始タグと終了タグは１セットで書くのがルールで、その中にコンテンツが入ります。
見出しと段落
hタグはそのページの中で見出しにしたい重要なコンテンツに使います。
hタグはh1〜h6まで存在し、h1を最も重要な見出し（ページのタイトルなど）に使い、h2→h6になるほど重要度が低い見出しに使っていきます。
hはheading（見出し）の略で、よく使うのはh1〜h4までとなります。
見出しのhタグはそのページの中で見出しにしたい重要なコンテンツに使います。
<!-- ページのタイトルなどに使用 -->
<h1>h1タグ</h1>
<!-- 大見出しに使用 -->
<h2>h2タグ</h2>
<!-- 中見出しに使用 -->
<h3>h3タグ</h3>
<!-- 小見出しに使用 -->
<h4>h4タグ</h4>
<!-- 重要度の低い見出しに使用（あまり使いません） -->
<h5>h5タグ</h5>
<!-- 重要度の低い見出しに使用（あまり使いません） -->
<h6>h6タグ</h6>続いて、段落についてですが、pはparagraph（段落）の略で、HTMLにテキストを書くときは<p>タグで囲みます。
<!-- テキストにはpタグを使用 -->
<p>これはpタグで、テキストを書くときに使用。</p>演習で、下記のindex.htmlを表示させます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>今日の気分</h2>
<p>デイトラ課題を製作中！</p>
</body>
</html>リンクのつけ方
リンクをつける時はaタグを使います。
aタグのaはAnchor（いかり）の略で、「リンク先へ錨(いかり)を置いておく」とイメージすると分かりやすいです。aタグは
<a href=""></a>の形式で書いて、飛ばしたいリンクのURLを「""」（ダブルクォーテーション）の中に書いて、ブラウザ上で表示したい文字を<a>と</a>の間に書きます。
<a href="https://okane-setsuyaku.com/">節約生活録トモ</a>aタグの中にあるhref（エイチレフ）は属性と呼ばれるもので、HTMLにはたくさんの属性があります。
画像の表示
画像を表示する時はimgタグを使います。<img src="画像のURL">の形式で書くと画像を表示することができます。
注意点として、<img>タグに終了タグはいらないということを覚えておきましょう。
リストの表示
次は箇条書きリストです。
リストには数字なしリスト（ulタグ）と、数字付きリスト（olタグ）の二種類があります。
※「ul」は「unordered list（順序がないリスト）」の略で、「ol」は「ordered list（順序のあるリスト）」の略です。
数字なしリスト（ul・liタグ）
数字なしリストは<ul>と<li>をセットで使います。
<ul>～</ul>は、囲んだ範囲がリストであることを示し、
<li>～</li>は、リストの中で表示する項目の一つを作ります。
以下作成例です。
<ul>
<li>すな肝</li>
<li>レバー</li>
<li>ハツ</li>
</ul>数字付きリスト（ol・liタグ）
数字なしリストは<ol>と<li>をセットで使います。
<ol>～</ol>は、囲んだ範囲がリストであることを示し、
<li>～</li>は、リストの中で表示する項目の一つを作ります。
以下作成例です。
<ol>
<li>ビール</li>
<li>日本酒</li>
<li>ウイスキー</li>
</ol>コメントを入れる
コメントとは、ブラウザに表示させない注釈のことです。「処理の意図」「後で修正する箇所」等といったメモを記録するのに使えます。
<!-- と -->に囲まれた範囲がコメントになり、コメントは複数行になっても問題ありません。
<!-- ここにコメントを書き込みます -->グループにして整理する
「HTMLは<body>～</body>の中に色んなタグを使って書き込んでいくんだな」
という感覚を持つことを覚えておきます。
ただ、HTMLは1ページ数百行くらい平気で書く為、ただつらつらとタグを書き足してるだけではごちゃごちゃになってしまいます。そうならないために、HTMLではグループ化を積極的に行います。
グループ化するときには代表的なタグが<div>を使用します。
<div>はそれだけだとなんの機能もありません。
しかし、<div>～</div>と囲むことで、囲まれた部分をグループ化できます。
<div>
<ol>
<li>ビール</li>
<li>日本酒</li>
<li>ウイスキー</li>
</ol>
</div>グループ化のメリットは次の２つです。
メリット① HTML全体をブロックに分けて整理できる
1ページが数千行以上になることはざらにあり、そのままでは管理が難しくなるので、<div>で1ページを複数のブロックに分けることで管理しやすくします。
この「ブロックに分けて管理する」というのはHTMLの基本的な考え方になります。
メリット② まとめてデザインを設定できる
HTMLで文章や画像などを入れ込んでいったあとは、CSSというものを使ってデザインを設定することになります（DAY3の内容）。
そのとき、タグごとにデザインを設定するのですが、一つ一つ設定していてはとてもじゃないですが時間が足りません。でも、<div>でグループ化していると、<div>～</div>内の要素にまとめて設定を適応できるメリットがあります。
そうすれば同じ設定を何度も書く必要もありません。
従って、ここでは
- HTMLではコードを複数のブロックに分けて管理するのが基本
- <div>を使うと複数のコードをグループ化できる
- <div>～</div>で囲まれた範囲にはまとめてCSSを設定できる
を理解すればOKです。
タグに属性をつける
タグはHTMLを構成する要素ですが、個別のタグに属性を付け加えることができます。
属性は追加的な情報のことで、タグに名前を付けたり、タグ内の要素の言語を指定したりすることができ、種類も膨大にあります。
属性は次のような書き方をします。
<タグ名 属性="属性値">
<p id="taro">出井登良</p>上のコードの場合、<p id="tora">出井登良</p>と囲っているp要素のid属性にtoraを追加しています（id属性とは名前のようなものです）。
尚、上記で既に書いたコードの中でも既に属性を使っています。
それは、以下の二つです。
- <a href="https://www.daily-trial.com/"></a>
- <img src="https://tokyofreelance.jp/web_first.png">
①は、aタグ（リンクを指定するタグ）のhref属性（リンク先のURLを指定する属性）が"https://www.daily-trial.com/"であるという意味です。
②は、imgタグ（画像を表示するタグ）のsrc属性（ドキュメントに埋め込む要素のURLを指定する属性）が"https://tokyofreelance.jp/web_first.png"であるという意味です。
<a href="飛ばしたいリンクのURL">と<img src="画像のURL">は、お約束のようなものなので、それぞれタグと属性を常にセットで使うと覚えてOKです。
以下はよく使う属性の一覧になります。
- id属性：様々なHTMLタグで使われます。要素に好きな「固有名」を付けます。
- class属性：様々なHTMLタグで使われます。要素に好きな「分類名」を付けます。
- src属性：imgタグ（画像を表示するタグ）で使われます。画像ファイルの置き場所を示します。
- href属性：aタグ（ハイパーリンク）で使われます。リンク先を示します。
特に、classはDAY3で扱うCSSで必須の属性です。
上に挙げたすべての属性の特徴を今覚える必要はありませんが、
<タグ名 属性="属性値">
という形だけは頭に入れておく必要があります。
以上、Web制作コース初級編2日目の内容でした。
