フロントエンドを学び直す#1（HTML）
今回からフロントエンドについて、もう1度学び直します。
HTMLとは
文書に対してマークアップをするマークアップ言語のこと。
HTMLの構造
HTMLでは決まった書式で書く必要がある。下記の4つは必ず必要。
!DOCTYPE html- 最新のHTMLで書くことを宣言
html- HTML文書であることを指定
head- メタ情報の設定
body- 本文
<!DOCTYPE html>
<html>
<head>
<title>何かのタイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>本文</p>
<h2>見出し2</h2>
<p>本文2</p>
</body>
</html>HTMLの色々な要素
<!-- 太字にする -->
<b>何かの文章</b>
<!-- 段落 -->
<p>何かの文章</p>
<!-- 見出し -->
<h1>階層が1番目の見出し</h1>
<h2>階層が2番目の見出し</h2>
<h3>階層が3番目の見出し</h3>
<h4>階層が4番目の見出し</h4>
<h5>階層が5番目の見出し</h5>
<h6>階層が6番目の見出し</h6>
<!-- 順序なしリスト -->
<ul>
<li>順序なしリスト</li>
<li>順序なしリスト2</li>
</ul>
<!-- 順序ありリスト -->
<ol>
<li>順序ありリスト</li>
<li>順序ありリスト2</li>
</ol>
<!-- リンク -->
<a href="https://www.google.com">Googleへのリンク</a>
<a href="about.html">自サイトのページへのリンク</a>
<!-- 画像の埋め込み -->
<img src="pictures/about.png" alt="画像の説明（アクセシビリティ)">
<!-- 水平要素 -->
<hr>
<!-- 改行 -->
<br>
<!-- 上付き文字 -->
注釈<sup>[1]</sup>
<!-- 下付き文字 -->
化学式H<sub>2</sub>OHTML Living Standard
HTML Living Standard とは HTML の標準仕様のこと。この仕様に沿ってブラウザは開発、実装されている。
インライン要素とブロック要素
インライン要素
文章の一部として扱う要素。要素の前後で改行されない。（<a>, <span> など）
ブロック要素
行全体をまとまりとして扱う要素。要素の前後に改行される。（<h1> , <div> など）
HTMLエンティティ
アンパサンド（&）で始まり、セミコロン（;）で終わるテキストのひとかたまりのこと。予約文字や通常のキーボードでは入力が難しい文字を表示するために使用される。
<a&bt;とは
（<a>とはと表示される）セマンティックHTML
その HTML 要素には、どのような目的や役割があるのか？をきちんと表現すること。例えば、すべて <div> で書かれたHTMLは、どの要素が何を表しているかHTMLを見ただけではわからないので、セマンティクスではないと言える。セマンティックな書き方をするメリットは次のようなものが挙げられる。
- 検索エンジンが内容を重要なキーワードとして理解し、ページの検索ランキングを上げる
- 読み上げソフトが、目の不自由なユーザーがページを操作するのを補助するための標識として利用することができる
- 開発者にとって開発がしやすくなる
セマンティックな要素
下記のような要素を追加することで、見た目は何ら変わらないが、上に挙げたメリットを享受できる
<main>- 文書の
<body>の主要な要素を表す - 文書で固有のもののみにする。他の要素で繰り返し登場する内容には使わない
- 文書の
<nav>- 現在の文書の他の部分や他の文書へのナビゲーションリンクを表す
<section>- 文書の自立した一般的なセクションを表す
- そのセクションを表現する、意味的により具体的な要素がない場合に使用する
- 例えばナビゲーションリンクになっている箇所は
<nav>を使ったほうが良い
- 例えばナビゲーションリンクになっている箇所は
<article>- サイトの中で自己完結しており、個別に配信や再利用を行うことを意図した成果物を表す
- 例えば、ブログの1つの記事に対して
<article>を使い、その記事に対するコメント1つ1つに<article>を使う
- 例えば、ブログの1つの記事に対して
- サイトの中で自己完結しており、個別に配信や再利用を行うことを意図した成果物を表す
<aside>- メインのコンテンツと間接的な関係しか持っていない要素を表す
- サイドバーなど
- メインのコンテンツと間接的な関係しか持っていない要素を表す
<header>- サイトのヘッダー部分を表す
<footer>- サイトのフッター部分を表す
<time>- 特定の時の期間を表す
datetimeを使うことで、日付を記述することができる<time datetime=20:00>20:00</time>
- 特定の時の期間を表す
<figure>- 図表などの自己完結したコンテンツを表す
figcaptionを使うことで、キャプションをつけられる
- 図表などの自己完結したコンテンツを表す
VSCodeのEmmet
VSCodeにはEmmetという機能が標準搭載されており、特定の形式で記述することで、素早くHTMLのコードを作成することができる
<!-- main>section>h1 と入力してTabを押した場合 -->
<main>
<section>
<h1></h1>
</section>
</main>
<!-- h1+h2+h2 と入力してTabを押した場合 -->
<h1></h1>
<h2></h2>
<h2></h2>
<!-- ul>li*4 と入力してTabを押した場合 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>テーブル要素
<table>: テーブル要素を作成するとき1番外側を囲む<td>: テーブルの中のデータを表現<tr>: テーブルの行を表す、trで囲われたところが1行になる<th>: テーブルのヘッダーを表す<thead>: テーブルのヘッダー<tbody>: テーブルのボディ<tfoot>: テーブルのフッターrowspan: thなどにつけて使う、複数行を使う宣言colspan: thなどにつけて使う、複数列を使う宣言
<h1>世界の重い鳥一覧</h1>
<table>
<thead>
<tr>
<th rowspan="2">動物名</th> <!-- 2行使う宣言 -->
<th colspan="2">重さ</th> <!-- 2列使う宣言 -->
<th rowspan="2">飛べる？</th> <!-- 2行使う宣言 -->
</tr>
<tr>
<th>kg</th>
<th>ポンド</th>
</tr>
</thead>
<tbody>
<tr>
<td>ダチョウ</td>
<td>104 (203)</td>
<td>No</td>
</tr>
<tr>
<td>ソマリダチョウ</td>
<td>90 (190)</td>
<td>No</td>
</tr>
</tbody>
</table>フォーム要素
- ウェブサーバーに情報を送信するための対話型コントロールを含む文書の区間を表す
action属性はどこに送信するかを表すmethod属性はどのhttpメソッドを使うかを表す
要素の種類
<form>- フォーム要素であることを表す
<input>- 入力要素を表す、typeで何を指定するかでフォームの形が変わる
text: テキストを入力するpassword: パスワード入力color: 色選択number: 数字min: 設定できる最小の数値max: 設定できる最大の数値step: 増加幅value: デフォルト値
checkbox: チェックボックスcheckedを書くとデフォルトでチェックが入った状態になる
radio: ラジオボタンrange: 範囲選択できるバーmin: 選択できる最小の数値max: 選択できる最大の数値step: 選択できる幅。例えば50にすると、50ずつふえる。value: デフォルト値
placeholderを設定することができるnameを指定するとクエリパラメータとして送信できる
- 入力要素を表す、typeで何を指定するかでフォームの形が変わる
<label>inputと紐づけて、そのinputが何を表しているかを示すinputをlabelで囲んであげる場合は、forは不要
<button>- ボタン要素を表す
typeを指定することで、ボタンの動きを変えることができるsubmitだとウェブサーバーに送信しようとするが、buttonにすると何も動作しないただのボタンになる
<select>- セレクトボックスを表す
<option>で選択肢を表すselectedをつけると、デフォルトでその選択肢が選択された状態になる
<textarea>- テキストエリアを表す
- 複数行をかける
- 下記のオプションをつけることができる
rows: 何行まで入力できるかcols: 横幅が何文字まで入力できるかplaceholder: プレースホルダー
<form>
<!-- テキストを入力するフォーム -->
<input type="text" placeholder="ユーザー名" name="username">
<!-- パスワードを入力するフォーム -->
<input type="password" placeholder="パスワード">
<!-- ラベルをつける -->
<label for="username">ユーザー名</label>
<input type="text" placeholder="username" id="username">
<!-- labelでinputを囲むパターン -->
<label>
好きな色
<input type="color">
</label>
<!-- 数字のフォーム -->
<label for="number">何かの数字</label>
<input type="number" min="10" max="50" step="5" id="number" value="45">
<!-- チェックボックス -->
<input type="checkbox" name="agree" id="agree" checked>
<label for="agree">利用規約に同意します</label>
<!-- ラジオボタン -->
<label for="xs">XS:</label>
<input type="radio" name="size" id="xs" value="xs">
<label for="s">S:</label>
<input type="radio" name="size" id="s" value="s">
<label for="m">M:</label>
<input type="radio" name="size" id="m" value="m">
<!-- セレクトボックス -->
<label for="meal">食事を選択してください</label>
<select name="meal" id="meal">
<option value="fish">焼き魚</option>
<option value="salad">サラダ</option>
<option value="steak" selected>ステーキ</option>
</select>
<!-- 範囲を指定 -->
<label for="cheese">チーズの量</label>
<input type="range" name="cheese_level" id="cheese" min="0" max="1000" step="100" value="500">
<!-- テキストエリア -->
<label for="comments">その他コメント：</label>
<br>
<textarea name="comments" id="comments" rows="10" cols="40" placeholder="コメントを入力してください"></textarea>
<!-- フォームの内容を送信するボタン -->
<button type="submit">送信</button>
<!-- inputでも送信ボタンを作れる -->
<input type="submit" value="送信するのだよ">
</form>フォームバリデーション
フォームにはクライアントサイド側でバリデーションをかけることができる
required: 入力必須minlength: 最低文字数の指定
<!-- 入力必須と最低文字数のバリデーション -->
<label for="first">名前：</label>
<input type="text" id="first" name="first" required minlength="5">
<!-- inputでemailやurlを指定した場合、email形式、url形式でないものは弾かれる -->
<input type="email">
<input type="url">以上です。