HTMLを書く際に最低限必要なもの
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
・各種タグの説明
<!DOCTYPE html>：htmlで文書作成する際に必須のタグ。VScodeでは、「!」を押した際の予測変換を押すと、
基本のタグが自動で入力されるので便利
<html lang="ja">：langで英語や日本語といった言語を指定
<head>：ヘッダー情報。タイトルやcss等の外部ファイルの読み込みをここで行う。
<title>：そのページのタブのタイトルをつける。
<body>：body部分、実際にページ内に表示される部分。ここに各種タグ等を配置して見た目を作っていく。
各種タグは一部を除いて、<body></body>といったように開始タグと終了タグをそれぞれ配置する必要がある。上記サンプルコードの<head>タグのように開始と終了タグの間にテキストや別のタグを記述することで内容を追加できる。
※<input>や<a>には終了タグがないため注意。
HTMLでCSSを使う方法
〇方法１_HTML内にcssファイルを外部ファイルとして読み込む方法
一般的にHTML側の<head>タグ内に<link>タグを配置して指定し使う。
<head>
<link rel="stylesheet" href="./test.css">
</head>
〇方法２_要素のタグ内でstyle属性を指定し、直接変更する。
そのページのその箇所しか変更しないならいいが、あまり使わない。
<p style="font-size: 20px; color: red;">testの文章</p>
HTMLの属性とは?
HTMLのタグに補足情報を与える役割を持ちます。タグに名前を付けたり、飾りをつけたり、働きを調整したりすることができる。
※参考サイト
絶対パスと相対パスの違い
※参考サイト
<h1>タグ
h1～h6まであり、見出しを作るためにある。数字が小さいほど、文字も小さい。
<h1>一番大きい見出し</h1>
<h2>二番目に大きい見出し</h2>
<h3>そんな感じ</h3>
<h4></h4>
<h5></h5>
<h6>一番小さい見出し</h6>
<p>タグ
見出し以外の汎用的な文に使うタグ。
<p>一般的な文章</p>
<div>タグ
グループを作るタグ。特にidやclassを使用して複数のグループを組み合わせ、サイトのレイアウトを作成できる。
<div>タグは前後に改行が入る点には注意。
<div id="test_group">
<p>このように</p>
<p>グループを作成</p>
</div>
<div>と<span>は似ているようで違う。
※参考サイト
<span>タグ
範囲を指定するだけのタグであり、spanタグ単体を使用する意味はない。CSSで特定箇所だけ変更する時などに使用。
また、spanタグはインライン要素なので、ブロック要素の中で使用する必要がある。
<p>
あいうえお<span class="test_group">12345</span>かきくけこ
</p>
//CSSでtest_groupクラスを指定し、12345の部分だけ色を変更したりフォントを変えるなどできる。
<a>タグ
リンクを作成するタグ。<a>タグの間に画像を挟むと画像もリンクにできる。
<a href="リンク先URL">リンクになって色が変わる文章</a>
<img>タグ
画像読み込み用のタグ。単体で使うため、終了タグは不要。
jpg,png,GIF,SVG等の画像形式のみ可能。PDFや動画データは読み込み不可。
<img src="test_img.jpg" alt='代替テキスト' />
//srcで読み込み先を指定
//altは、画像が表示できなかった際に表示するテキスト
//終了タグが必要なく書かなくても大丈夫だが、最後に/を記述して終わりである事を分かるようにする。
<br>タグ
改行に使うタグ。単体で使うため、終了タグは不要。
<p>abc<br>123</p>
//出力結果
//abc
//123
<!---->コメントアウトタグ
他言語では//で書く事がおおいが、HTML内でコメントを書く際には下記ように記述する。
<!--このようにコメントアウトします。-->
<button>タグ
ボタンを作成する際のタグ
※参考サイト
<input>タグ
さまざまな種類の入力欄（フィールド）を作るために使用する。
※参考サイト
<button>タグと<input>タグの違い
同じような動きをできる両者だが、<button>の方が<input>タグより後で追加された要素となる。
より細かく新しい要素を交えてボタンを作成するなら<button>タグを使うのがいいかも。
・参考サイト
<ul>、<ol>、<li>タグ
箇条書き時に使うリスト。細かい調整は、css側で行う。
ulは、unordered listの略で順序のない箇条書き
olは、ordered listの略で順番の存在する箇条書き
<ul>
<li>1つめの項目</li>
<li>2つめの項目</li>
<li>3つめの項目</li>
</ul>
<ol>
<li>1つめの項目</li>
<li>2つめの項目</li>
<li>3つめの項目</li>
</ol>
※参考サイト