目次
- HTML入門講座
- 1. HTMLとは？ 基礎と概要
- 2. HTMLの基本構造と要素
- 3. テキストの装飾とフォーマット
- 4. リンクを作成する: ハイパーリンクの基礎
- 5. 画像を追加する
- 6. リストとナビゲーションの作成
- 7. テーブルの作成方法
- 8. フォームの作成と基本的な使い方
- 9. フォーム要素の種類と属性
- 10. メタデータとSEOの基礎
- 11. コメントとコードの整理
- 12. HTML5の新しい要素
- 13. メディア要素の追加: 音声と動画
- 14. IFrameを使って他のページを埋め込む
- 15. HTMLとCSSの連携: スタイルの基礎
- 16. レスポンシブデザインの基本
- 17. アクセシビリティを考えたHTML
- 18. HTMLでのデバッグと検証
- 19. パフォーマンスの最適化
- 20. HTMLプロジェクトを作成しよう
- タグの解説
HTML入門講座
1. HTMLとは？ 基礎と概要
- 内容: HTMLの基本的な役割、ウェブページの構造を説明し、最初の簡単なHTMLファイルを作成します。
2. HTMLの基本構造と要素
- 内容:
<html>,<head>,<body>タグの意味と使い方、HTMLの基本的な構造を解説します。
3. テキストの装飾とフォーマット
- 内容:
<h1>〜<h6>、<p>,<strong>,<em>など、テキストのフォーマットに使われるタグを学びます。
4. リンクを作成する: ハイパーリンクの基礎
- 内容:
<a>タグを使って、他のページやリソースへのリンクを作成する方法を解説します。
5. 画像を追加する
- 内容:
<img>タグを使って、ウェブページに画像を追加し、画像の最適化やサイズ調整の基本を学びます。
6. リストとナビゲーションの作成
- 内容:
<ul>,<ol>,<li>タグを使用して、箇条書きや番号付きリストを作成します。
7. テーブルの作成方法
- 内容:
<table>,<tr>,<td>,<th>を使ったテーブルの作成方法を学びます。
8. フォームの作成と基本的な使い方
- 内容:
<form>,<input>,<label>,<textarea>,<button>タグを使って、フォームの基本を解説します。
9. フォーム要素の種類と属性
- 内容:
<input>要素のさまざまな種類（テキスト、パスワード、チェックボックス、ラジオボタンなど）を学びます。
10. メタデータとSEOの基礎
- 内容:
<meta>タグや<title>、<link>タグを使って、SEOに適したページを作成する方法を学びます。
11. コメントとコードの整理
- 内容: HTMLでのコメントの書き方や、読みやすいコードを書くためのテクニックを解説します。
12. HTML5の新しい要素
- 内容:
<header>,<footer>,<article>,<section>,<aside>,<nav>などのHTML5のセマンティックな要素を紹介します。
13. メディア要素の追加: 音声と動画
- 内容:
<audio>,<video>タグを使って、ウェブページに音声や動画を埋め込む方法を学びます。
14. IFrameを使って他のページを埋め込む
- 内容:
<iframe>タグを使って、他のウェブサイトやコンテンツを埋め込む方法を学びます。
15. HTMLとCSSの連携: スタイルの基礎
- 内容: HTMLにCSSをリンクして、基本的なスタイルを適用する方法を解説します。
16. レスポンシブデザインの基本
- 内容: HTMLとCSSを使って、異なる画面サイズに対応するレスポンシブなデザインを作成する基礎を学びます。
17. アクセシビリティを考えたHTML
- 内容: ウェブページをアクセシブルにするための基本的なHTMLのガイドラインを学びます。
18. HTMLでのデバッグと検証
- 内容: ブラウザのデベロッパーツールを使ったHTMLのデバッグや、W3Cの検証ツールを使用する方法を紹介します。
19. パフォーマンスの最適化
- 内容: ページの読み込み速度を向上させるためのHTMLの最適化方法を解説します。
20. HTMLプロジェクトを作成しよう
- 内容: 今まで学んだ内容を活用して、簡単なウェブサイトを作成する実践的なプロジェクトを行います。
タグの解説
A
- a
- ハイパーリンクを作成します。
- abbr
- 略語の拡張子を指定します。
- address
- 連絡先情報を表示します。
- area
- 画像マップのエリアを定義します。
- article
- 独立したコンテンツのセクションを定義します。
- aside
- 主要なコンテンツから外れた補足情報を提供します。
- audio
- 音声コンテンツを埋め込みます。
B
- b
- 強調されたテキストを表示します（旧仕様ではボールド）。
- base
- ドキュメント内の相対URLの基準を設定します。
- bdi
- 双方向テキストの中でのテキストの方向を指定します。
- bdo
- テキストの方向を変更します。
- blockquote
- 長い引用を表示します。
- body
- HTMLドキュメントの本体部分を定義します。
- br
- 改行を挿入します。
- button
- ボタンを作成します。
C
- canvas
- グラフィックスやアニメーションを描画するための領域を提供します。
- caption
- テーブルのタイトルを提供します。
- cite
- 参照元を示す引用を表示します。
- code
- コンピュータコードの一部を表示します。
- col
- テーブルの列にスタイルを適用します。
- colgroup
- テーブルの列グループにスタイルを適用します。
D
- data
- コンテンツに機械可読な形式のデータを提供します。
- datalist
- 入力補完の候補を提供するリストを定義します。
- dd
- 説明リストの説明文を表示します。
- del
- 削除されたテキストを示します。
- details
- ユーザーがクリックして展開できる追加情報を提供します。
- dfn
- 用語の定義を示します。
- dialog
- 対話ボックスやモーダルウィンドウを作成します。
- div
- ブロックレベルのコンテナを作成します。
- dl
- 説明リストを作成します。
- dt
- 説明リストの用語を示します。
E
F
- fieldset
- フォーム内の関連する要素をグループ化します。
- figcaption
- 図のキャプションを定義します。
- figure
- 独立したコンテンツ（例：画像、図表）を定義します。
- footer
- セクションやページのフッター部分を定義します。
- form
- ユーザー入力を収集するフォームを作成します。
H
- h
- 見出しを定義します。
- head
- HTMLドキュメントのメタデータを含む部分を定義します。
- header
- セクションやページのヘッダー部分を定義します。
- hgroup
- 見出し要素のグループを定義します。
- hr
- 水平線を表示します。
- html
- HTML文書のルート要素を定義します。
I
- i
- イタリック体のテキストを表示します（旧仕様では斜体）。
- iframe
- インラインフレームを作成します。
- img
- 画像を埋め込みます。
- input
- ユーザーからの入力を受け取ります。
- ins
- 追加されたテキストを示します。
K
- kbd
- キーボード入力を表示します。
L
- label
- フォームコントロールのラベルを提供します。
- legend
- フォーム内のフィールドセットのタイトルを定義します。
- li
- リスト項目を定義します。
- link
- 外部リソースへのリンクを定義します。
M
- main
- 文書の主要コンテンツを示します。
- map
- 画像マップを定義します。
- mark
- ハイライトされたテキストを表示します。
- menu
- ツールバーを表示します。
- meta
- メタデータを文書に追加します。
- meter
- スケール上の値を示します。
N
O
- object
- 外部リソースを埋め込みます。
- ol
- 順序付きリストを作成します。
- optgroup
- 選択リスト内のオプショングループを定義します。
- option
- 選択リスト内の項目を定義します。
- output
- 計算や処理結果を表示します。
P
- p
- 段落を作成します。
- param
- をパラメーターを与えます。
- picture
- 複数の画像ソースを提供するための要素を定義します。
- pre
- フォーマットされたテキストを表示します。
- progress
- 処理の進行状況を表示します。
Q
- q
- 短い引用を表示します。
R
- rb
- ルビー注釈の対象を指定します。
- rp
- ルビー注釈がサポートされていないブラウザ向けの表示を定義します。
- rt
- ルビー注釈を表示します。
- rtc
- ルビー注釈をグループ化します。
- ruby
- ルビー注釈を付けるための要素を定義します。
S
- s
- 削除されたテキストを表示します（`del`との違いは、内容を示す方法です）。
- samp
- サンプル出力を表示します。
- script
- クライアントサイドのJavaScriptコードを定義します。
- section
- 文書内のセクションを定義します。
- select
- 選択リストを作成します。
- slot
- ツリーとして埋め込みます。
- small
- 小さいテキストを表示します。
- source
- メディア要素のリソースを定義します。
- span
- インラインコンテナを作成します。
- strong
- 強調されたテキストを表示します。
- style
- 内部スタイルシートを定義します。
- sub
- 下付き文字を表示します。
- summary
- 要素の要約を提供します。
- sup
- 上付き文字を表示します。
T
- table
- テーブルを作成します。
- tbody
- テーブルのボディ部分を定義します。
- td
- テーブルのセルを定義します。
- template
- 再利用可能なコンテンツのテンプレートを定義します。
- textarea
- 複数行のテキスト入力を作成します。
- tfoot
- テーブルのフッター部分を定義します。
- th
- テーブルのヘッダーセルを定義します。
- thead
- テーブルのヘッダー部分を定義します。
- time
- 日付や時刻を表します。
- title
- 文書のタイトルを定義します。
- tr
- テーブルの行を定義します。
- track
- テキストトラックを表示します。
U
V
W
- wbr
- 単語内での改行の提案をします。
