HTML ドキュメント
簡潔で実例中心の HTML リファレンス。概念を読み、コードを見て、Coddy のジャーニーで実践しましょう。
HTML のガイド付き学習を始めるはじめに
- DOCTYPE 宣言`<!DOCTYPE html>` はすべての HTML 文書の 1 行目に書く宣言です。ブラウザに互換モード (quirks mode) ではなく標準モードで表示するよう伝えます。書き方、古い DOCTYPE で何が起きるか、モードの確認方法を解説します。
- HTML タグHTML タグはコンテンツに印を付け、見出し、段落、リンク、画像といった各部分が何なのかをブラウザに伝えます。タグと要素の違い、終了タグのないタグ、入れ子のルール、よく使うタグを解説します。
- HTML 属性属性は HTML 要素に情報を追加します。リンクの行き先、画像の内容、適用する CSS クラスなどです。書き方、すべての要素で使えるグローバル属性、class と id、真偽属性、data-* 属性を解説します。
- HTML コメントHTML コメントは <!-- と --> で囲んだテキストで、ブラウザには表示されません。書き方、複数行のコメント、コードのコメントアウト、エディタのショートカット、入れ子にできない理由、コメントが非公開にならない理由を解説します。
- div タグ<div> タグはそれ自体に意味を持たない汎用のブロックコンテナです。内容をまとめる方法、class でスタイルを付ける方法、div と flexbox でレイアウトを組む方法、意味を持つタグやボタンを使うべき場面を解説します。
- span タグ<span> タグは汎用のインラインコンテナです。行の中の数語を囲み、改行させずにスタイルを付けたりスクリプトで扱ったりできます。使い方、div との違い、より適したタグがある場面を解説します。
テキスト
- 見出しタグHTML には <h1> から <h6> まで 6 段階の見出しがあり、ページの骨組みを作ります。初期サイズ、見出しの順番、h1 をいくつ使うか、CSS でサイズを変える方法、スクリーンリーダーでの使われ方を解説します。
- HTML 改行テキストの途中で改行するには <br> を使います。<br> を使うべき場面と段落を使うべき場面、テキストの改行をそのまま表示する方法、<wbr> で長い単語を折り返す方法、改行させない方法を解説します。
- HTML 空白ブラウザは HTML の連続した空白を 1 つにまとめます。 で空白を増やす方法、改行しない空白の働き、<pre> と white-space で空白やタブを残す方法、CSS で余白を作るほうがよい場面を解説します。
- 太字と斜体HTML で文字を太字にするには <strong> か <b>、斜体にするには <em> か <i> を使います。タグの使い分け、太字と斜体の組み合わせ方、CSS で太字や斜体にする方法を解説します。
- 下線と取り消し線HTML で文字に下線を引くには <u> か CSS の text-decoration を、取り消し線を引くには <s> か <del> を使います。各タグの意味、<ins> と <del> で編集を示す方法、リンクでないテキストに下線を引くと読み手が混乱する理由を解説します。
- 上付き文字上付き文字は <sup>、下付き文字は <sub> で書きます。指数、序数、脚注の番号、化学式などに使います。よくある使い方、行の間隔が広がるのを防ぐ方法、Unicode の文字や MathML のほうが適した場面を解説します。
- 横線 hrHTML で横線を引くには <hr> タグを使います。hr の意味、CSS で色、太さ、長さ、線の種類を変える方法、中央に文字の入った区切り線の作り方、縦線の引き方を解説します。
- 文字の中央揃えHTML で文字を中央揃えにするには CSS の text-align: center を使います。どこに指定するか、span では効かない理由、箱の中で文字を上下中央に配置する方法、左右や両端に揃える方法、段落を字下げする方法を解説します。
リンクと画像
- HTML リンク<a> 要素でリンクを作る方法を解説します。href 属性、絶対 URL と相対 URL、#id でページ内の特定の位置に移動するリンク、ダウンロードリンク、カード全体のリンク、リンクが壊れるよくある間違い。
- リンクを別タブで開くリンクに target="_blank" を付けると新しいタブで開きます。rel="noopener" と noreferrer、別タブで開くことをユーザーに伝える方法、target のその他の値、JavaScript で新しいタブを開く方法を解説します。
- メールリンク mailtohref="mailto:" で新規メールを開くリンクを作り、件名、本文、cc、bcc を入れて正しくエンコードする方法と、tel: と sms: でタップして電話やメッセージを送れるリンクを作る方法を解説します。
- ボタンリンク別のページに移動するボタンは、ボタンの見た目にしたリンクで作るのが正しい方法です。リンクの中のボタンや onclick での移動がうまくいかない理由、フォームのボタンが適した場面、リンクボタンのスタイルと無効化の方法を解説します。
- HTML 画像<img> タグで HTML に画像を表示する方法を解説します。src と alt、width と height での画像サイズの指定、レスポンシブ画像、object-fit での切り抜き、figure でのキャプション、遅延読み込み、画像の下にできる隙間。
リストと表
- HTML リストHTML でリストを作る方法を解説します。<ul> の箇条書き、<ol> の番号付きリスト (start、reversed、アルファベットやローマ数字)、入れ子のリスト、説明リスト、CSS で行頭記号を変えたり消したりする方法です。
- HTML テーブルHTML で表を作る方法を解説します。<tr> で行、<td> でセル、<th> と scope で見出しセルを作り、キャプション、thead、tbody、tfoot、縞模様の行、小さな画面で横スクロールするテーブルまで扱います。
- テーブルの枠線CSS で HTML の表に枠線を付ける方法を解説します。border-collapse で線を 1 本にする方法、border-spacing、横線だけの表、内側の線だけの表、角丸の表、border 属性が廃止された理由です。
- colspan と rowspancolspan で列方向に、rowspan で行方向にテーブルのセルを結合します。表が崩れないようにセルを数える方法、グループ化した見出しの作り方、結合した表をスクリーンリーダーでも読みやすく保つ方法を解説します。
フォーム
- HTML フォームHTML でフォームを作る方法を解説します。form 要素、name 属性、action と method (GET と POST の違い)、fieldset と legend によるグループ化、required と pattern による入力チェック、JavaScript での送信処理です。
- input type 一覧HTML の <input> タグの type をすべてまとめました。text、email、password、number、range、日付と時刻、color、file、hidden などについて、それぞれのチェック内容、スマートフォンで開くキーボード、共通の属性を解説します。
- HTML ボタンHTML の <button> 要素でボタンを作る方法を解説します。3 つの type (submit、button、reset)、フォームと一緒に値を送る方法、無効なボタン、アイコン付きボタン、フォーカスリングを残す CSS のデザインです。
- チェックボックス<input type="checkbox"> で HTML のチェックボックスを作る方法を解説します。ラベル、checked 属性、チェックしたときとしないときにフォームが送る内容、チェックボックスのグループ、indeterminate で作る全選択、デザインです。
- ラジオボタンHTML のラジオボタンの仕組みを解説します。name 属性によるグループ化、checked による初期選択、必須のグループ、JavaScript で選択された値を読む方法、キーボード操作、独自の丸やカード型のデザインです。
- セレクトボックス<select> と <option> で HTML のプルダウンを作る方法を解説します。value、初期値やプレースホルダーの option、required、option のグループ、複数選択、JavaScript での値の読み書き、矢印のデザインです。
- テキストエリア<textarea> で複数行のテキスト欄を作る方法を解説します。rows と cols、タグの間に書く初期値、サイズ変更と自動で伸びる欄、maxlength と文字数カウンター、送信されるテキストの改行、デザインです。
- label タグ<label> 要素がフォームの入力欄に名前を付ける仕組みを解説します。for と id または囲むことによる関連付け、チェックボックスやラジオボタンのクリック範囲の拡大、ヒントとエラーメッセージ、非表示のラベル、関連付けが切れる間違いです。
セマンティックHTML
- セマンティック HTMLセマンティック HTML とは、見た目ではなく内容の意味でタグを選ぶことです。セマンティックなレイアウト用タグ (header、nav、main、article、aside、footer)、それがスクリーンリーダーと検索エンジンにもたらすもの、ページ構造の確認方法を解説します。
- header タグ<header> 要素には、ページやセクションの導入部 (ロゴ、タイトル、ナビゲーション、著者名) を入れます。サイトのヘッダーの作り方、<header> と <head> や見出しとの違い、記事の中での使い方、スクロールしても固定されるヘッダーを解説します。
- footer タグ<footer> 要素はページやセクションを締めくくり、著作権、連絡先、リンク、著者情報を入れます。リンクの列があるサイトのフッターの作り方、短いページでフッターを最下部に置く方法、記事の中のフッターを解説します。
- nav タグ<nav> 要素は主要なナビゲーションリンクのまとまりを示します。<nav> とリストでナビゲーションバーを作る方法、現在のページの示し方、1 ページにある複数の nav へのラベル付け、モバイルメニューの開閉ボタンを解説します。
- section タグ<section> 要素は、1 つのテーマの内容を独自の見出しの下にまとめます。<section> を使う場面、<article> や <div> のほうが適している場面、3 つの入れ子の仕方、ラベルを付けた section がランドマークになる仕組みを解説します。
headとメタタグ
- title タグ<title> 要素は、ブラウザのタブ、ブックマーク、検索結果でページの名前になります。書く場所、適切な長さ、<h1> や title 属性との違い、JavaScript で変更する方法を解説します。
- meta viewportviewport の meta タグは、スマートフォンにデスクトップの幅ではなく画面の幅でページをレイアウトさせます。標準の書き方、各値の働き、レスポンシブな CSS がこれに依存する理由、避けるべき値を解説します。
- HTML リダイレクトページを別のページへ転送する方法として、HTML だけでできる meta refresh タグ、JavaScript、サーバーでのリダイレクトを解説します。meta refresh の書き方、ページの自動更新、サーバーの 301 リダイレクトのほうがよい理由、検索エンジンがそれぞれをどう扱うかです。
- ファビコンファビコンはブラウザのタブに表示される小さなアイコンです。追加するための link タグ、用意すべきファイルとサイズ (ICO、SVG、PNG、apple-touch-icon)、SVG や絵文字のファビコン、JavaScript での変更、古いアイコンが表示され続ける理由を解説します。
- lang 属性lang 属性は、内容が何語で書かれているかをブラウザ、スクリーンリーダー、翻訳ツールに伝えます。書く場所、使うべきコード (ja、en、en-US、pt-BR)、一部だけ別の言語にする方法、目に見えて変わることを解説します。
メディアとインタラクティブ要素
- iframe タグ<iframe> 要素は、自分のページの中に別の Web ページを表示します。必要な属性 (src、title、width、height)、YouTube の動画や地図の埋め込み、iframe のレスポンシブ対応、sandbox による制限、読み込みを拒否するサイトがある理由を解説します。
- video タグ<video> 要素はブラウザ標準のプレーヤーで動画ファイルを再生します。マークアップ、重要な属性 (controls、autoplay、muted、loop、playsinline、poster、preload)、<source> による代替の形式、<track> による字幕、レスポンシブなサイズ、JavaScript での再生制御を解説します。
- audio タグ<audio> 要素はブラウザ組み込みのプレーヤーで音声ファイルを再生します。マークアップ、属性 (controls、autoplay、loop、muted、preload)、使うべき形式、音声付きの自動再生がブロックされる理由、JavaScript で独自の再生ボタンを作る方法を解説します。
- details と summary<details> と <summary> 要素を使うと、JavaScript なしで開閉できるセクションを作れます。summary は常に表示され、クリックすると残りが表示されたり隠れたりします。マークアップ、open と name 属性、アコーディオン、矢印のデザイン、toggle イベントを解説します。
