Web制作を学ぶ上で避けて通れないのが、「Web関連の規格」や「セキュリティ」「画像形式」「通信の仕組み」などの基礎技術です。
HTML5プロフェッショナル認定試験でも頻出する領域であり、実務でも確実に役立ちます。
この記事では、概要がわかるように読みやすく整理してまとめました。
目次
1. Web通信の仕組み（HTTP / HTTPS）
Webサイトは「HTTP」や「HTTPS」というプロトコルを使って通信を行います。
■ HTTPとは？
HTTPは、ブラウザとWebサーバーがHTMLなどをやり取りする通信規約のことです。
ブラウザが URL を指定して「リクエスト」を送信し、サーバーがHTMLなどの「レスポンス」を返す流れは「HTTPセッション」と呼ばれます。
■ HTTPSとは？
HTTPSは、HTTPに暗号化技術（TLS/SSL）を組み合わせた安全な通信方式。
まず SSL/TLSセッションで鍵の交換と認証を行い、その後に通常のHTTP通信を実行します。
2. HTTPメッセージとメソッド
■ メッセージ構造
HTTPメッセージは次の構造をもちます。
- 開始行
- ヘッダーフィールド
- 改行（CRLF）
- ボディ
■ 代表的なHTTPメソッド
| メソッド | 役割 |
|---|---|
| GET | 指定リソースの取得 |
| POST | データの送信、リソースの作成など |
GETとPOSTは、試験で特に頻出です。
3. 認証方式（Basic / Digest）
HTTPではページへのアクセス制限を設定できます。
| 認証方式 | 仕組み | 特徴 |
|---|---|---|
| Basic認証 | ユーザー名：パスワード をBase64エンコードして送信 | 暗号化されないため安全性が低い |
| Digest認証 | MD5でハッシュ化した値を送信 | 盗聴・改ざんへの耐性がある |
4. Cookieによる状態管理
HTTPは“ステートレス”なため、状態の記憶に Cookie を使います。
■ 代表的なCookieの用途
- ログイン状態の管理
- ECサイトのカート保持
- 広告配信の履歴管理
5. Webコンテンツに関連する技術
Web文書やメタデータにはさまざまなフォーマットがあります。
| 用語 | 説明 |
|---|---|
| XHTML | HTMLをXML文法で再定義したもの。大文字・小文字の厳密な区別などが必要。 |
| Microdata | コンテンツの意味を検索エンジンに伝える仕組み。 |
| RDFa | XHTMLにRDFのメタデータを埋め込む仕様。 |
| OGP | SNSシェア時に「タイトル・画像・説明文」を表示させる仕組み。 |
6. Webページを動かす仕組み（JavaScript / DOM / Ajax）
■ JavaScript
Webページに動きを与えるプログラミング言語。
■ DOM（Document Object Model）
JavaScriptからHTMLの要素を操作するためのAPI。
要素取得・変更・動的更新が可能。
■ Ajax
ページを再読み込みせず、非同期通信でページ内容を書き換える技術。
Google Mapなどで多用されます。
7. 通信関連の知識（セッション / Data URI / Base64）
| 用語 | 説明 |
|---|---|
| セッション | ログイン〜ログアウトまでの通信の一連 |
| Data URI | HTML/CSS に画像を直接埋め込む方式 |
| Base64 | 画像や文字列をエンコードする形式 |
例（HTML埋め込み）
<img src="data:image/png;base64,xxxxx..." />
8. Webへの攻撃と対策
試験でも頻出の重要ポイントです。
| 攻撃手法 | 内容 | 主な対策 |
|---|---|---|
| SQLインジェクション | SQLを改ざんされDBが操作される | エスケープ処理 / プレースホルダ |
| XSS | 悪意あるスクリプトで情報を盗む | サニタイジング（無害化） |
| CSRF | 意図しないリクエストを送らせる | リクエスト元チェック、トークン |
| ディレクトリトラバーサル | 不正にフォルダを遡りファイル取得 | アクセス権の適正化 |
| HTTPヘッダインジェクション | ヘッダに改行を挿入して攻撃 | 改行コードのエスケープ |
9. ネットワーク脅威と防御（UTM / IDS）
| 用語 | 説明 |
|---|---|
| UTM | ファイアウォール、ウイルス対策などを統合した製品 |
| Web改ざん検知 | HTMLの比較、ログ監視で改ざんを検知 |
| IDS | ネットワークの不正アクセスを監視（ネットワーク型 / ホスト型） |
10. Web制作に関わる技術（MVC / CMS）
| 用語 | 説明 |
|---|---|
| MVC | Model / View / Controller に分ける設計手法 |
| CMS | コードを書かずにWebページを作成・更新できる仕組み（WordPress等） |
11. Webで使われる画像ファイル形式
| 形式 | 特徴 |
|---|---|
| GIF | 256色、可逆、アニメ可 |
| PNG | フルカラー、可逆、透過可 |
| JPEG | 非可逆、軽量、写真向き |
| SVG | XMLベースのベクター、拡大しても劣化なし |
| BMP | サイズが大きくWebには不向き |
| インターレース | 低解像度→高解像度で画像が徐々に表示される方式 |
12. Web集客・広告・SEOの基礎知識
| 用語 | 説明 |
|---|---|
| SEO | 検索エンジン最適化 |
| 検索ロボット | 世界中のサイトを巡回 |
| PPC広告 | クリック課金型広告 |
| アフィリエイト | 成果報酬型広告 |
| コンバージョンレート | 購入や登録につながる割合 |
| ROI | 投資利益率 |
13. Webの規格と技術の試験対策のポイントまとめ
✔ HTTP / HTTPS の違い
✔ HTTPメッセージ構造
✔ GET / POST の使い分け
✔ Cookie / セッション
✔ 認証方式（Basic / Digest）
✔ Web攻撃（SQLi / XSS / CSRF など）
✔ DOM / Ajax の理解
✔ 画像形式の特性
✔ SEO・広告の基本
これらは試験でも出題されるうえ、実務でも必ず必要になる基礎スキルです。
14. Web制作で利用されるAPIの基礎
API（Application Programming Interface）は、自分で作るには難しい機能を、外部サービスやブラウザの仕組みを通じて利用できる仕組み です。
Web制作では、位置情報・カメラ・動画ストリーミング・ストレージ・双方向通信などの高度な機能の多くがAPIで実現されています。
■ APIの基本イメージ
APIは 「リクエスト → レスポンス」 の2ステップで成り立っています。
- 利用者（Webページ）が API に「欲しい情報」をリクエスト
- API提供者が対応するデータをレスポンスとして返す
例として以下のような場面があります：
- Twitterのタイムライン表示
- YouTube動画の埋め込み
- Google Mapsの表示
これらはすべて外部APIの力で実現されています。
HTML5プロ認定試験で出題されるAPIは、大きく4分野に分類できます。
15-1. マルチメディア・グラフィックスAPI
▼ マルチメディア関連（audio / video）
- audio・video要素を使い、音声・動画の埋め込みが可能
- JavaScriptで再生・停止・シークなど制御できる
▼ ストリーミング技術（重要）
Adaptive Streaming により、回線速度に合わせて最適に動画再生されます。
| 技術 | 説明 |
|---|---|
| HLS | Appleが開発。iPhoneで広く採用 |
| MPEG-DASH | Adobe・Microsoftらが策定 |
さらに動画の保護には以下が使われます：
- MSE（Media Source Extensions）：動画を動的に扱うAPI
- EME（Encrypted Media Extensions）：DRM保護を扱うAPI
▼ グラフィックス（Canvas / SVG）
| 技術 | 説明 |
|---|---|
| Canvas | JSでビットマップ画像を描画 |
| SVG | XMLベクター形式で劣化なし |
15-2. デバイスアクセスAPI
ユーザーの端末機能を利用するAPIです。
| API名 | できること |
|---|---|
| Geolocation API | 位置情報の取得（許可必須） |
| DeviceOrientation Event | 端末の傾き・方向の取得 |
| Touch Events | スマホ画面のタッチ操作 |
| Pointer Events | マウス・タッチ・ペンを統合的に扱う |
| DOM3 Events | マウス・キーボード・フォーカス操作 |
スマホ対応サイトを作るうえで必須の知識でもあります。
15-3. オフライン・ストレージ系 API
インターネットがなくても利用できる機能や、ブラウザ保存を扱うAPIです。
| API名 | 概要 |
|---|---|
| Web Storage（session/local） | キーと値の保存 |
| IndexedDB | 構造化データの大容量保存 |
| Application Cache | ローカルキャッシュ（今は非推奨） |
| Web Workers | JSをバックグラウンドで別スレッド実行 |
| Service Workers | PWAの基盤。オフライン利用・通知対応 |
| Push API | スマホのようなプッシュ通知をWebで実現 |
| fetch | HTTPリソース取得（XHRの後継） |
特に Service Workers・fetch・Web Storage は頻出です。
15-4. 通信系API
Webページとサーバー間でデータをやり取りするためのAPI。
| API名 | 説明 |
|---|---|
| XMLHttpRequest（XHR） | Ajax通信の旧来の標準 |
| WebSocket API | 双方向通信（チャットなど） |
| Server-Sent Events（SSE） | サーバー → クライアントへの一方向通知 |
| WebRTC | ブラウザ同士のリアルタイム通話・会議 |
WebRTCはビデオチャットの仕組みの中心技術です。
16. API分野の試験対策ポイント
試験で問われやすいポイントをまとめると：
- 各APIの用途と特徴（名称→何をする？が重要）
- MSE / EME / DRM / HLS / MPEG-DASH の関連性
- Geolocation APIは「許可が必要」
- Web Storage（session/local）の違い
- Web Workers と Service Workers の役割
- XHR と fetch、WebSocket の違い
- WebRTC・SSE などリアルタイム通信の特徴
図や表で出題されることも多いので、単語と用途をまとめて暗記するのが重要です。
