Webサイトを作るには、Web上に文章を書くための「マークアップ言語」のHTMLを覚えなければ書けません
HTMLはHyper Text Markup Language（ハイパー テキスト マークアップ ランゲージ）の略です
やなぎHTMLはWeb上に「文字を書くだけ」
ハリネズミ博士文字に装飾を付けるのはCSSですがそれは、HTMLを覚えてからです
HTMLは基本、指定のタグで挟んで書きます<○>〜〜</○>となります
終了タグには「／」が入ります
○の事を要素名と言い、開始タグと終了タグの間に文章が入り「それらをまとめて要素」と呼びます
終了タグの無い要素も出てきますが少しずつ覚えましょう
HTMLの基本のひな形
HTMLを書くときにはどのタイプのHTMLなのかを「宣言」する必要があるので、現在主流になっている【Doctype（ドクタイプ）宣言】します
<!DOCTYPE html>
やなぎDoctype宣言！なんかカッコいいw
HTMLの文書は<html>〇〇</html>で全体を囲み、日本語の文書である事も同時に示します
「language」は「Japanese」ですよっと略して書きます
<!DOCTYPE html>
<html lang="ja">
<!--ここに文章が入ります-->
</html>
headとbody
HTMLの文書は大きく分けると「head（ヘッド）要素」と「body（ボディ）要素」に分かれます
ハリネズミ博士それぞれ<head>ダグと<body>タグで囲みます
head要素には文書に関する情報（メタ情報）を記述し、閲覧者には見えない設定や情報になります
body要素は見せたい情報（コンテンツ）を記述します
- ドクタイプ宣言
- 言語は日本語
- 文字コード
- ページのタイトル
- ページの説明
- OGP（SNSでシェアされた時に表示される仕組み）
- CSSを反映させる要素
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>記事のタイトル</title>
<meta name="description" content="記事の説明">
<!-- OGP -->
<meta property="og:site_name" content="サイト名">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="説明">
<meta property="og:type" content="website">
<meta property="og:url" content="url">
<meta property="og:image" content="画像url">
<meta property="og:locale" content="ja_JP">
<!-- CSS -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>記事の大見出し</h1>
</body>
</html>
<meta charset=”UTF-8″>とは文字コードを「UTF-8」にするという指定です（メタ キャラセット）
<title>記事のタイトル</title>は記事のタイトルになるところです
<meta name=”description” content=”記事の説明”>は記事の説明文を書きます（メタ ネイム ディスクリプション コンテンツ）
属性とは
HTMLの各要素には属性という何かしらの設定（付加情報）を付ける事ができます
＜要素名 属性名＝”属性値”＞
〇〇の 〇〇は 〇〇です
多くのタグは属性と合わせて記述されます
要素によって使用頻度の高い属性は決まっているので少しずつ覚えましょう
id属性とclass属性
id属性とclass属性は属性の中でも多く使う属性で
HTMLとCSSを紐付ける事ができる架け橋のようなものです
id属性はIdentification（アイデンティフィケーション）の【id】です
同じ属性のid属性を2つ以上書くことはNG。指定の要素がどれか分からなくなります
やなぎclass属性は同じ属性値のものを何個書いてもOK
ハリネズミ博士id属性やclass属性の事をセレクタと呼ぶよ
HTMLでidを書いたときには、CSSでは【＃id名】とハッシュを書き、classの場合には【.class名】とドットを付けて書きます
ページ内ジャンプにはid属性を使います
ここではなんとなく、そんなもんがあるんだな〜程度でOK
HTML内のメモ帳<!–〇〇–>
HTML内にはWeb上には表示されないけどコードを書くときにちょっとしたメモを残す事ができます
<!--メモメモ-->
Webサイトのソースは誰でも見る事ができるので、何でもかんでも書くのはやめておきましょう
インデントとはスペースのこと
インデントとはコードを書きやすく見やすくするための「スペースの事です」
スペースあり↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>地元の居酒屋</title>
<meta name="description" content="居酒屋メニューをご紹介">
</head>
<body>
<h1>お酒の種類</h1>
<p>いろいろなお酒を紹介します</p>
</body>
</html>
スペースなし↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>地元の居酒屋</title>
<meta name="description" content="居酒屋メニューをご紹介">
</head>
<body>
<h1>お酒の種類</h1>
<p>いろいろなお酒を紹介します</p>
</body>
</html>
VS Codeでインデントを自動で整えるショートカットキー
p要素の段落
文章を段落ごとに区切って書く時には、<p>〜〜</p>で書きます
基本的にHTMLの文章はpで書きます
p要素のpはparagraph（パラグラフ）のpで段落を意味します
<p>
昔々あるところに「おじいさんとおばあさん」が居ました。おじいさんは山に柴刈りに、おばあさんは川へ洗濯に行きました
</p>
br要素の改行
p要素で文章を永遠と書いても改行されません
なので、<br>で改行します
<p>
昔々あるところに「おじいさんとおばあさん」が居ました。
<br>おじいさんは山に柴刈りに、おばあさんは川へ洗濯に行きました
</p>
見出し<h1>〜</h1>
大見出しには<h1>〜</h1>を使い、大見出しの記事のタイトルになります
heading（ヘディング）の【h】です
記事の目次になる中見出しは<h2>〜</h2>になり、さらに下の子見出しは<h3>〜</h3>になります
2〜6くらいまで見出しはありますが大体2〜3をよく使います
<h1>居酒屋の料理</h1>
<h2>焼き鳥</h2>
<h3>もも</h3>
<h3>ねぎま</h3>
<h3>ハツ</h3>
<h2>お刺身</h2>
<h3>盛り合わせ</h3>
<h3>マグロ</h3>
<h3>サーモン</h3>
こんな感じです
サイトにまとまりを付ける
Webページは大体ヘッダー・メイン記事・サイドバー・フッターに分かれています
<header>
<!-- ここにヘッダーが入ります -->
</header>
<main>
<article>
<h1>大人の居酒屋</h1>
<h2>お通し</h2>
<h2>焼き鳥</h2>
<h2>お刺身</h2>
<h3>マグロ</h3>
<h3>サーモン</h3>
</article>
<aside>
<nav>
<!-- ここにナビゲーションが入ります -->
</nav>
</aside>
</main>
<footer>
<!-- ここにフッターが入ります -->
</footer>
とりあえずまとめたい<div></div>
特になんの意味もないけどまとめたい時は<div>〜〜〜</div>を使います
divはDIVision（ディビジョン）部分という意味です
<section>
<h2>お刺身</h2>
<div>
<h3>マグロ</h3>
</div>
<div>
<h3>サーモン/h3>
</div>
</section>
順番のないリスト<ul>〜</ul>
順番のないリストには<ul>〜</ul>を使います
Unordered List（アンオーダード リスト）の【ul】です
下記のようになりますがこのままだと
<ul>
ビール
焼酎
ウイスキー
日本酒
</ul>
【 ビール 焼酎 ウイスキー 日本酒 】と表示されてしまいます
リストの項目<li>〜</li>
順番のないリストの<ul>〜</ul>に加えて、各項目を1つずつリストの項目<li>〜</li>で挟みます
List Item（リスト アイテム）の【li】です
<ul>
<li>ビール</li>
<li>焼酎</li>
<li>ウイスキー</li>
<li>日本酒</li>
</ul>
このようにすると
- ビール
- 焼酎
- ウイスキー
- 日本酒
と、表示されるようになります
順序ありリスト<ol>〜</ol>
リストに番号を付けるには<ol>〜〜</ol>を使います
olとはOrdered List（オーダード リスト）の略で順序あるリストという意味です
<ol>
<li>ビール</li>
<li>焼酎</li>
<li>ウイスキー</li>
<li>日本酒</li>
</ol>
説明リスト<dl>〜</dl>
リストの項目に説明文を追加したいときは<dl>〜〜</dl>を使います
dl要素はDescription List（ディスクリプション リスト）の略で説明リストという意味です
<dl>
</dl>
dl要素で囲った中にdt要素とdd要素を入れます
Description Term（ディスクリプション ターム）説明する用語
Description Details（ディスクリプション ディテール）説明する詳細
<dl>
<dt>ビール</dt>
<dd>大麦の製麦から始め、仕込み・発酵・熟成・濾過などの工程で作ります< /dd>
<dt>焼酎</dt>
<dd>米麹に水と酵母を加えて、原料の米や芋、麦などを入れて発酵・蒸留・濾過を経て作ります</dd>
<dt>ウイスキー</dt>
<dd>製麦大麦を発酵させ乾燥し、麦芽から麦汁を作りそれを発酵させ蒸留して熟成して作ります</dd>
</dl>
表（table要素）
表にはtable（テーブル）要素を使いますが、他にも複数の要素があります
| table（テーブル） | 表を書く時に最初に書く要素。必要 |
| thead（ティヘッド） | table header（テーブルヘッダー）の略でテーブルのヘッダーという意味。省略可 |
| tbody（ティボディ） | table body（テーブルボティ）の略でデーブルのボディという意味。省略可 |
| tr（ティアール） | table row（テーブルロウ）の略で横一列を書く時に使う。必要 |
| th（ティエイチ） | table head（テーブルヘッド）見出しで太文字になる |
| td（ティディ） | table data（テーブルデータ）内容を書く時に使う |
下記のような「表を作ってみます」CSSが反映されていない状態です
| 人気順 | ビール | 焼酎 | ウイスキー |
| 1 | モルツ | レモンサワー | ハイボール |
| 2 | エビス | ウーロンハイ | コークハイ |
| 3 | 金麦 | 緑茶ハイ | ピーチハイ |
<table>
<thead>
<tr>
<th>人気順</th>
<th>ビール</th>
<th>焼酎</th>
<th>ウイスキー</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>モルツ</td>
<td>レモンサワー</td>
<td>ハイボール</td>
</tr>
<tr>
<th>2</th>
<td>エビス</td>
<td>ウーロンハイ</td>
<td>コークハイ</td>
</tr>
<tr>
<th>3</th>
<td>金麦</td>
<td>緑茶ハイ</td>
<td>ピーチハイ</td>
</tr>
</tbody>
</table>
こんな感じになります。
横へ横へと書いていくイメージです
form要素
お問い合わせのような「入力フォーム」にはform（フォーム）要素を使いますが、内容によってタグは変わります
例えばこんなフォームを書いてみます
<form>
<label for="name">名前</label>
<input type="text" id="name" name="name" placeholder="例：やなぎまん">
<br>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" placeholder="info@yanagiman.com">
</form>
form要素はサーバーサイドプログラミング言語（PHPやRuby）がないと動作しません
label要素とinput要素
form要素にはlabel（ラベル）要素とinput（インプット）要素があります
label要素はinput要素のためのlabel（表示名）で「for=” “」の属性で、input要素のid属性を指定します
<label for="name">名前</label>
input要素は「入力エリア」です。入力の形式がたくさんあるので「type=” “」で指定します
文字ならtext、メールアドレスならemail、パスワードならpasswordなどです
<input type="text" name="name">
label要素は表示用でしか使用しないので、ブラウザに「名前のテキストボックス」と「メールアドレスのテキストボクス」は別と分かってもらうために
input要素に「name」属性を追加します
placeholder属性
input要素では、placeholder（プレースホルダー）属性が使えます
これを使うと「入力エリアにあらかじめ例を表示できます」何か入力されたら消える仕組みになっています
<input type="text" id="name" name="name" placeholder="例：やなぎまん">
ファイルパス
ファイルパスとはHTMLやCSS、画像などのファイルを読み出すために「どこのファイルなのか」を指定するためのものです
フォルダー内にファイルをたくさん作り過ぎると訳がわからなくなるので注意しましょう
フォルダーは、データやファイルをまとめておく「箱」で、ファイルは文章や写真など実際にデータが入っている小箱みたいなものです
相対パス
基本となる書き方が「相対パス」で、呼び出しの元のファイルから見た「対象ファイル」の位置を指定します
絶対パス
呼び出したいファイルが別のWebサイトの場合に指定し、https://などから始まります
「https://aaaaa.com/image/hujiyama.jpg」というように書きます
画像を表示させる
画像には<img>タグを使います。終了タグはありません。
src属性を使って画像の場所を指定してあげます
<img src="hujiyama.jpg">
画像がうまく表示されなかった時や、音声出力をしている場合に表示される画像の名前も同時に設定します
<img src="hujiyama.jpg" alt="富士山">
基本の相対パスのイメージです
ステータスコード404は指定されたファイルが見つからない時のエラーです
404エラーまたはNot Foundエラーと呼びます
エラーが見つかったら直しましょう
ページリンク
ページへのリンク先を記述するには「a要素」を使います
aはAnchor（アンカー）は船の錨のaの事で、<a>〜〜〜</a>で書きます
a要素にプラスして「href（エイチレフ）属性」を入れます
hrefはHypertext REFerence（ハイパーテキスト リフェレンス）の略でハイパーテキストの参照先を指します
ハリネズミ博士「欲しいものをGoogleで検索しよう」→「欲しいものをGoogleで検索しよう」と書いてみよう
欲しいものを
<a href="https://www.google.co.jp">
Google
</a>
で検索しよう
分かりやすいように改行しましたが<a href=”リンク先”>テキスト</a>と、このようになります
メールアドレスならhref=”mailto:”〜〜
電話ならhref=”tel:”〜〜
SMSならhref=”sms:”〜〜
画像にリンクを貼る
画像にもリンクが貼れます
先ほどの「Google」のところに「画像の<img>タグ」を入れます
<a href="https://www.google.co.jp">
<img src="hujiyama.jpg" alt="富士山">
</a>
ページ内リンク
クリックすると好きな場所へ飛ばすことが出来ます
ページ内リンクと言います
リンク先の要素に「id属性」を設定して「href属性」に＃とid属性の値を指定します
<a href="#contents">コンテンツへのリンク</a>
<section id="contents">コンテンツです</section>
ページ上部にリンクする場合にはhref属性に＃を指定します
<a href="#">ページ上部へのリンク</a>
idは好きな単語でOK
野球ならbaseballでもyakyuでも自分が分かればOK
チームでやる時は相談してやります
CSSをHTMLに反映させる
HTMLだけでは装飾がないためCSSを反映させます
その時に使う要素です
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="../css/style.css">
【 ./ 】同じ階層
【 ../ 】ひとつ上の階層
【 ../../ 】2つ上の階層
HTML文法チェック
HTMLを書いたけど大丈夫かな？という時には
The W3C Markup Validation Serviceを使いましょう
アクセスすると英語なので焦りますが大丈夫です
「validate by Direct input」を選択して全文コピーしてここに貼り付けて「Check」をクリックしよう
まとめ
超基礎の基礎なので、まだまだ覚えることはたくさんありますがここで一度区切りをつけますね
まだまだこれから学んでいくので学んだ事をどんどん追加していきます
やなぎ目指せフリーランスで年収UP
