Web技術を整える。

HTTPメソッド・ヘッダーを整える

＝ GET/POSTなどの動詞と、主要ヘッダーの意味を引く早見

HTTPメソッド7種の意味・冪等性・安全性・ボディ有無を表で、主要ヘッダー24個（Host・Authorization・Set-Cookie・Cache-Control・CSP等）を検索で引ける早見。送信ゼロ。

• ● GET/POST/PUT/PATCH/DELETE/HEAD/OPTIONS の意味・安全・冪等・ボディ有無を比較
• ● リクエスト/レスポンスの主要ヘッダーを1行説明＋実例で収録
• ● ヘッダー名・キーワード検索＋種別フィルタ

HTTPステータスコードを整える

＝ 200や404、500が何の意味かを引ける早見表

主要なHTTPステータスコードを番号や語で検索できる早見表。1xx〜5xxをクラス別に色分けし、各コードの意味とよくある原因・対処を日本語で示す。送信ゼロ。

• ● 番号・語による即時検索（送信ゼロ）
• ● 1xx〜5xxのクラス別絞り込み
• ● クラスごとの色分け（2xx緑・4xx金茶・5xx赤）

DNSレコードの種類を整える

＝ AやMXなどDNSの種類の意味と書き方を引く早見表

DNS主要レコード（A/AAAA/CNAME/MX/TXT/NS/SOA/PTR/SRV/CAA）の意味・値の例・ハマりどころの早見表。名前解決の流れも図解。実問い合わせはせず読み方に徹する送信ゼロ。

• ● 主要レコード11種を検索フィルタ付きで早見（A/AAAA/CNAME/MX/TXT/NS/SOA/PTR/SRV/CAA）
• ● 各レコードに用途・値の例・ハマりどころを併記
• ● 名前解決の流れ（あなた→キャッシュ→ルート→TLD→権威→IP）を図解

HTTPSのしくみを整える

＝ アドレスバーの鍵マーク（TLS）のしくみを図でやさしく

HTTPSの鍵マークの正体＝TLSハンドシェイクを図解。ブラウザとサーバが証明書をやり取り・認証局で検証し共通鍵で暗号化通信を始める流れ、httpとの違いを初心者向けに解説。

• ● TLSハンドシェイクを図解アニメで再生
• ● http（平文）と https（暗号化＋本人確認）の比較
• ● 証明書・認証局（CA）・共通鍵をやさしく解説

CDNを整える

＝ CDNがなぜ速いかを世界地図の上で動かして確かめる

CDN（Contents Delivery Network）のしくみを体感する学習ツール。世界12都市から東京オリジン直行と最寄エッジ（東京・シンガポール・フランクフルト・ニューヨーク・サンパウロ）配信を比較し、大円距離×光ファイバー中の光速（約20万km/s×経路係数1.4）でRTTを概算。エッジキャッシュのHIT/MISS/TTLシミュレーター、ヒット率とオリジン負荷軽減の計算、CNAMEとGeoDNS/エニーキャストによる最寄誘導の解説つき。すべてブラウザ内計算で送信ゼロ。

• ● 世界配信マップ：12都市×CDNなし/ありでリクエストの線が動く
• ● 距離×光の速さ（20万km/s×経路係数）からRTT・初回表示を概算
• ● キャッシュHIT/MISSシミュレーター（TTL失効を連打で体感）

ポート番号を整える

＝ よく使うTCP/UDPポート番号の早見表（22 SSH・80 HTTP・443 HTTPS）

よく使う TCP/UDP ポート番号を番号・サービス名・キーワードで即時検索できる早見表。22 SSH/80 HTTP/443 HTTPS など実務頻出を収録し、番号区分も解説。送信ゼロ。

• ● 番号・サービス名・キーワードで即時フィルタ
• ● well-known/registered/dynamic の3区分表示
• ● TCP・UDP・TCP/UDP を色分けバッジ

ブラウザを整える

＝ Chrome/Safari/Edge/Firefoxの違いと、URLからページが映るまでの流れ

主要ブラウザ7種の開発元・レンダリングエンジン・JSエンジンの早見表と、見た目は7種類でも中身はBlink/WebKit/Geckoの3系統という図解、URL入力からページが映るまでの流れの解説。送信ゼロ。

• ● URL入力→DNS→TCP/TLS→HTML受信→DOM/CSSOM→レンダーツリー→描画→JS実行を図解アニメで再生
• ● 主要ブラウザ7種の開発元・レンダリングエンジン・JSエンジン・標準搭載OSの早見表
• ● 「見た目は7種類、中身は3系統」のエンジン系統図解

px・rem・em を整える

＝ 24px が何 rem かをすぐ出し、clamp() も作る

24px＝1.5rem（基準16px）。px・rem・em・pt・% を相互変換し、流体タイポグラフィ用の CSS clamp() を最小／最大 px とビューポート幅から生成（傾きと切片を rem＋vw で表示）。rem と em の違い、62.5% トリックの事実、Tailwind の対応表を解説。送信ゼロ。

• ● px／rem／em／pt／% の5単位を同時表示
• ● 基準フォントサイズ・親要素の px が可変
• ● clamp() の流体タイポグラフィ生成

.htaccess リダイレクトを整える

＝ 旧パス→新パスの 301／302 を、9つの型から選んで生成し、動作確認と誤り検出までする

.htaccess の 301／302 リダイレクトを Redirect／RedirectMatch／RewriteRule の9パターンで生成し、生成結果をテスト URL に適用する簡易シミュレーション（限界を明記）と、既存の .htaccess の誤り検出（RewriteEngine On 漏れ・混在・L フラグ漏れ・未エスケープのドット・www と non-www のループ・302 の使用）を行う。AllowOverride・301 と 302 の違い・curl -I での確認方法を解説。送信ゼロ。

• ● 単純リダイレクト（Redirect／RedirectMatch）と mod_rewrite 版（RewriteRule・NC／QSA）
• ● www 統一・https 統一・末尾スラッシュ統一・ドメイン移転・404／410
• ● ディレクトリ一覧の禁止・ファイル拒否・キャッシュと圧縮の定型