HTML

メインルート・メタデータ

基本構造

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="" />
    <script src=""></script>
    <link rel="shortcut icon" href="img/favicon.ico" />
    <style type="text/css"></style>
  </head>
  <body>
    内容
  </body>
</html>

コメントアウト

エスケープシーケンス

<以外はエスケープしなくても問題ない。

エスケープシーケンス	対象の文字
<	< (less than)
>	> (greater than)
"	" (quatation)
'	' (apostrophe)
&	& (ampersand)
	半角スペース

CSS埋め込み/紐づけ

<!-- 埋め込み -->
<style type="text/css"></style>

<!-- 紐づけ -->
<link rel="stylesheet" href="">

JavaScript埋め込み/紐づけ

<!-- 埋め込み -->
<script type="text/javascript"></script>

<!-- 紐づけ -->
<script src=""></script>

メタデータ

作成者と説明の追加

<meta name="author" content="Rinca Hayamine" />
<meta name="description" content="このページではHTMLのコードのあれこれについて説明しています。" />

OGP

Open Graph Protocol。サイト共有に使われる画像やタイトルなどの設定。

利用するために、headタグに以下の属性を追加する：

<head prefix="og:http://ogp.me/ns#">

<meta property="og:url" content="ページのURL(絶対パス)" />
<meta property="og:type" content="ページの種類" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@Twitterユーザー名" />

ページの種類

タイプ	概要
website	WebサイトのTOPページ
blog	ブログのトップページ
article	ブログのトップページ
product	製品の紹介ページ

Twitterカードの種類

"summary"、"summary_large_image"、"app"、"player"

詳細

Open Graph protocol

コンテンツ区分

見出し要素

<h1>見出し1(最大)</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

見出し1(最大)

見出し2

見出し3

見出し4

見出し5

見出し6

要素	デフォルトの文字の大きさ
h1	32px
h2	24px
h3	18.72px
h4	16px
h5	13.28px
h6	10.72px

あまり使わない要素

機能や視覚的な意味などを持たないが、これらの要素で囲まれたページの内容が何を意味するのか明確にするために利用する。

要素	説明
adress	個人、団体、組織の連絡先を提供していることを示す。
article	「記事」の内容であることを示す。
aside	サイドバーなど、メインの内容とは直接関係しない内容。
footer	ページの「フッタ」であることを示す。
header	ページの「ヘッダ」であることを示す。
hgroup	h1などの見出しよりもさらに小さな、副次的な見出し。
main	ページの主要な内容。
nav	もくじやメニューなど、ナビゲーションのための領域であることを示す。
section	ページの内容のセクションであることを示す。この中には見出しを含むことが推奨されている。

テキストコンテンツ

コンテンツ区分要素

CSS装飾の要。

<div></div>

箇条書き

順序なしリスト要素、順序付きリスト要素、説明リスト要素。

<ul>
  <li>本x1</li>
  <li>ダイヤモンドx2</li>
  <li>黒曜石x4</li>
</ul>
<ol>
  <li>お金を入れる</li>
  <li>ボタンを押す</li>
  <li>商品を下から取り出す</li>
</ol>
<dl>
  <dt>爬虫類</dt>
  <dd>ヘビ<dd>
  <dd>ワニ<dd>
  <dd>トカゲ<dd>
</dl>

本x1
ダイヤモンドx2
黒曜石x4

お金を入れる
ボタンを押す
商品を下から取り出す

爬虫類: ヘビ; ワニ; トカゲ

[CSS] list-style-type (ul, ol)

circle、disc、squareを指定してリストの行頭記号の形状を指定する。

その他

CSSのline-heightで行間を指定できる。

主題区切り(水平線)要素

<hr>

Tips

CSSでbackground-color、borderを指定して太さや色を変える。

段落要素

性質自体はdivと同じ。パラグラフを囲う専用のボックスとしてdivと区別するために使う。

<p></p>

整形済みテキスト要素

preformatted text。基本的にはdivと同じだが、この中では半角スペースと改行がそのまま反映される。

<pre></pre>

あまり使わない要素

要素	説明
blockquote	引用文であることを示す。デフォルトでインデントされる。
figure/figcaption	図とキャプション。
menu	表示や用法はul要素と同じ。

インラインテキスト意味づけ

アンカー要素

#から始まるリンクでページ内リンク。指定したIDのところへ飛ぶ。

<a href="#">リンク</a>

target属性

"_blank"にすると、リンクを新しいタブで開くことができる。

title属性

マウスホバーしたときに出るツールチップの内容を設定できる。

download属性

ダウンロードファイルを指定して、そのファイルをダウンロードするようにする。

文字の装飾

<b>太字</b>
<i>斜体</i>
<s>取り消し線</s>
<strong>強調</strong>
<u>下線</u>

太字
斜体
~~取り消し線~~
強調
下線

改行要素

<br>

インラインコード要素

性質自体はspanと同じ。コードを囲う専用のボックスとしてdivと区別するために使う。

<code></code>

ルビ注釈要素

<ruby>
  <rb>薔薇</rb>
  <rp>(</rp>
  <rt>ばら<rt>
  <rp>)</rp>
</ruby>

薔薇 ( ばら )

コンテンツ区間要素

CSS装飾用。

<span></span>

上付き・下付き文字

x<sup>n</sup>
a<sub>n</sub>

xⁿ
a_n

あまり使わない要素

要素	説明
abbr	略語であることを示す。
dfn	文脈中での定義であることを示す。
em	強調されていることを示す。
kbd	キーボードなどの入力端末からの入力であることを示す。
mark	目立たせたり強調するためのもの。
q	インラインの引用であることを示す。
samp	プロンプトなどの出力やログであることを示す。
small	著作権表示や法的表記のような注釈的なテキストで、小さく表示されるもの。
time	時間や期間を表していることを示す。
var	数式やプログラムの変数であることを示す。

画像とマルチメディア

画像埋め込み要素・動画埋め込み要素

<img src="">
<video src="" controls></video>

alt属性 (img)

画像を説明する代替文字列を設定する。

autoplay属性 (video)

データの読み込みが完了し、再生可能な状態になった時点で即座にコンテンツの再生が始まる。

loop属性 (video)

動画の末尾に達すると、自動的に先頭に戻る。

muted属性 (video)

初期状態が消音になる。

poster属性 (video)

動画のダウンロード中に表示される画像のURL。

埋め込み音声要素

<audio src="" controls></audio>

画像内のリンク

map要素とarea要素を利用してSVG画像のような画像を描画する。さらに多角形など、画像の内容に忠実な形状のリンク領域を作ることができる。

area要素

埋め込みコンテンツ

インラインフレーム要素

src属性にhtmlファイルを指定すれば、このボックスの中にそのHTMLを表示できる。

<iframe></iframe>

表コンテンツ

表要素

<table border="1">
  <tr>
    <th>列1</th>
    <th>列2</th>
    <th>列3</th>
  </tr>
  <tr>
    <td colspan="2">横2マス</td>
    <td rowspan="2">縦<br>2マス</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">2x2<br>マス</td>
  </tr>
  <tr>
    <td>1マス</td>
  </tr>
</table>

列1	列2	列3
横2マス		縦 2マス
2x2 マス		縦 2マス
2x2 マス		1マス

行/列ごとの色付け

列ごとのスタイル用にcolgroupは使えない。素直に:nth-childを使う。

table.col_stripe td:nth-child(2n+1) {
  background-color: #08f; color: #fff;
}
table.row_stripe tr:nth-child(2n+1) td {
  background-color: #08f; color: #fff;
}

	A	B	C	D	E
1	A1	B1	C1	D1	E1
2	A2	B2	C2	D2	E2
3	A3	B3	C3	D3	E3
4	A4	B4	C4	D4	E4

	A	B	C	D	E
1	A1	B1	C1	D1	E1
2	A2	B2	C2	D2	E2
3	A3	B3	C3	D3	E3
4	A4	B4	C4	D4	E4

見出し固定

table.sticky_header th {
  position: sticky; top: 0;
}

A	B	C	D	E
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5
A6	B6	C6	D6	E6
A7	B7	C7	D7	E7
A8	B8	C8	D8	E8
A9	B9	C9	D9	E9
A10	B10	C10	D10	E10

その他

th 要素をクリックすることによるソート

フォーム

ボタン要素

<button>ボタン</button>

さまざまな入力

<input type="button" value="ボタン">
<input type="checkbox"><input type="checkbox" checked>
<input type="color">
<input type="date">
<input type="file">
<input type="password">
<input type="radio" name="demo" checked><input type="radio" name="demo"><input type="radio" name="demo">
<input type="range">
<input type="text">

disabled属性

無効にすることができる。

pattern属性

入力した値が指定されたパターンに一致するか検証するようにする。見た目はデフォルトで変化しないので、独自でスタイルを設定する必要がある。

<input type="text" pattern="[a-z][a-z0-9_]*:[a-z][a-z0-9_]">

placeholder属性

中身がないときに表示するテキスト。

プレイスホルダーに対してCSSを適用する場合は、専用の擬似要素を使う。

input::placeholder {
  font-style: italic; color: #a0a0a0;
}

読み取り専用

自動補完

一部のタイプの入力要素に対して、自動補完の選択肢を設定することができる。

<input type="text" list="ice-cream-flavors">
<datalist id="ice-cream-flavors">
  <option value="チョコレート"></option>
  <option value="ココナッツ"></option>
  <option value="ミント"></option>
  <option value="イチゴ"></option>
  <option value="バニラ"></option>
</datalist>

アクセントカラー

CSSでaccent-colorを利用すると、アクセントカラーを変更できる。

明るい色にすると、もともと白かったところが自動で黒になる。

ラベル要素

for属性で指定したidを持つinput要素を操作できるようにする。以下のように、ラベルのテキストをクリックしてチェックボックスを操作できる。

<label for="label_demo">ラベル</label>
<input type="checkbox" id="label_demo">

ラベル

選択要素

<select>
  <option value="">--選択してください--</option>
  <option value="dog">犬</option>
  <option value="cat">猫</option>
  <option value="hamster">ハムスター</option>
  <option value="parrot">オウム</option>
  <option value="spider">クモ</option>
  <option value="goldfish">金魚</option>
</select>

テキストエリア要素

<textarea cols=20 rows=2 style="resize: vertical;"></textarea>

disabled属性

無効にする。

maxlength、minlength属性

最大文字数、最小文字数。

readonly属性

読み取り専用にする。

spellcheck属性

スペルチェックをするかどうか。true、defalt、falseから選ぶ。

placeholder属性

表示用のテキスト。内容が0文字のときのみに表示される。

[CSS] resize

noneで大きさの変更を無効にする。

[CSS] :invalid、:valid

中の値が有効かどうかでスタイルを変えることができる。

進捗インジケーター要素

<progress max="100" value="70">70%</progress><br>
<progress max="100" value="30" style="accent-color: #8f0;">30%</progress>

70%
30%

インタラクティブ要素

詳細折りたたみ要素

<details><summary>クリックで展開</summary>
  <p>こんにちは！</p>
</detail>

クリックで展開

こんにちは！

open属性 (details)

先に開いてる状態にする

[CSS] list-style (summary)

summaryタグにCSSでlist-styleの値をnoneにすると三角アイコンを消せる。

SVGとMathML

お楽しみに！

スクリプト

スクリプト無し要素

閲覧者のブラウザの設定でJavaScriptが無効になっているときにのみ表示される要素。

<noscript></noscript>

DOM

Document Object Model。

主要なクラス

データ型	概要
Document
Node	コメントタグやテキストノードも含む、文書内のあらゆるオブジェクト。
Element	Nodeを継承する、一般的な要素。
NodeList	Nodeの配列。
HTMLElement	Elementを継承している、スタイルが設定できる要素。

要素を取得

querySelector

指定したCSSセレクタを満たす最初のElementを取得する。

document.querySelector(selector); // ドキュメント内

/** @type {Element} */
let elem;
elem.querySelector(selector); // ある要素内

querySelectorAll

指定したCSSセレクタを満たす全てのElemenetを取得し、NodeListとして返す。

document.querySelectorAll(selector); // ドキュメント内

/** @type {Element} */
let elem;
elem.querySelectorAll(selector); // ある要素内

getElementById

指定したIDのElementを取得する。querySelectorで済むことが多い。

document.getElementById(id);

要素内のHTML

HTMLコードとして要素の内容を設定することができる。

/** @type {Element} */
let elem;

elem.innerHTML = '<p>置き換えられた段落</p>';

属性の操作

setAttribute

指定した属性の値を設定する。valueは文字列。

/** @type {Element} */
let elem;

elem.setAttribute(name, value);

getAttribute

指定した属性の値を取得する。返り値は文字列。

/** @type {Element} */
let elem;

elem.getAttribute(attributeName)

スタイルの設定

値は文字列で指定する。

/** @type {HTMLElement} */
let elem;

elem.style.color = '#64ec86';
elem.style.width = '100%';

要素の新規作成

指定した名前の要素を新規作成する。

const newElem = document.createElement(tagName);

// 属性などの設定はあとから
newElem.id = 'new_id';

要素の追加・削除

appendChild

ノード内の最後に指定したノードを追加する。

/** @type {Node} */
let node;

node.appendChild(childElem);

removeChild

指定した子ノードを削除する。

/** @type {Node} */
let node;

node.removeChild(childNode);

ページのスクロール

指定した座標へスクロールさせる。

window.scrollTo(0, 1000);

window.scrollTo({
  top: 100,
  left: 100,
  behavior: "smooth",
});

イベントの追加

/** @type {Element} */
let elem;

elem.addEventListener('click', ev => {
  console.log('クリックされました');
});

イベント

要素が発行するイベント

イベント名	概要
scroll	スクロールされたとき
scrollend	最後までスクロールがされたとき
wheel	マウスホイールを動かしたとき
copy	コピーしたとき
cut	切り取りしたとき
paste	貼り付けしたとき
blur	フォーカスを失ったとき
focus	フォーカスを得たとき
keydown	キーが押されたとき
keyup	キーが離されたとき
auxclick	左クリック以外のクリックをしたとき
click	クリックしたとき
contextmenu	右クリックメニューを開こうとしたとき
dblclick	ダブルクリックしたとき
mousedown	マウスのボタンを押したとき
mouseenter	マウスカーソルが要素上に移動したとき
mouseleave	マウスカーソルが要素上から出たとき
mousemove	マウスカーソルが要素内で移動したとき
mouseout	マウスカーソルが要素またはその子要素上から出たとき
mouseover	マウスカーソルが要素またはその子要素上に移動したとき
mouseup	マウスのボタンを離したとき
touchend	画面のタッチをやめたとき
touchmove	要素上をタッチ面がが移動したとき
touchstart	画面のタッチをはじめたとき

Eventクラス

ほぼすべてのイベントクラスはEventを継承しているため、ほぼすべてのイベントクラスから以下のプロパティやメソッドを参照できる。

プロパティ・メソッド	概要
cancelable	読み取り専用。イベントがキャンセル可能かどうか。
currentTarget	読み取り専用。イベント発生元の要素。
preventDefault()	イベントをキャンセルする。

クリップボードイベント

Document、Element、windowで発行される。イベント名は'cut'、'copy'、'paste'。

clipboardData

切り取られた、コピーされた、貼り付けられた内容。

Canvas Scripting API

お楽しみに！

WebGL API

お楽しみに！

A	B	C	D	E
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5
A6	B6	C6	D6	E6
A7	B7	C7	D7	E7
A8	B8	C8	D8	E8
A9	B9	C9	D9	E9
A10	B10	C10	D10	E10

A	B	C	D	E
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5
A6	B6	C6	D6	E6
A7	B7	C7	D7	E7
A8	B8	C8	D8	E8
A9	B9	C9	D9	E9
A10	B10	C10	D10	E10

A	B	C	D	E
A1	B1	C1	D1	E1
A2	B2	C2	D2	E2
A3	B3	C3	D3	E3
A4	B4	C4	D4	E4
A5	B5	C5	D5	E5
A6	B6	C6	D6	E6
A7	B7	C7	D7	E7
A8	B8	C8	D8	E8
A9	B9	C9	D9	E9
A10	B10	C10	D10	E10