05. HTTPとHTTPSの基本

この章では、HTTPとHTTPSの基本を学びます。

Web制作では、HTTPの細かい仕様をすべて覚える必要はありません。まずは、ブラウザとサーバーがリクエストとレスポンスでやり取りしていること、そしてステータスコードで結果を確認できることを理解しましょう。

HTTPとは

HTTPは、ブラウザとサーバーがWebページやファイルをやり取りするためのルールです。

ブラウザが「このページをください」とサーバーに伝え、サーバーが「このHTMLです」と返す時に使われます。

ブラウザ: /about/ をください
サーバー: 200 OK。HTMLを返します

Webページだけでなく、CSS、JavaScript、画像、フォントなどもHTTPで取得されます。

リクエストとレスポンス

HTTPでは、ブラウザからサーバーへ送る依頼をリクエスト、サーバーから返ってくる結果をレスポンスと呼びます。

たとえば、HTMLにCSSファイルの読み込み指定があると、ブラウザはCSSファイルに対して追加のリクエストを送ります。

<link rel="stylesheet" href="/assets/css/style.css">

この時、/assets/css/style.css が見つからなければ、サーバーは 404 を返します。

GETとPOST

HTTPにはメソッドという考え方があります。

Web制作でまず知っておきたいのは、GETとPOSTです。

通常のページ表示や画像読み込みは、GETで行われます。

お問い合わせフォームの送信では、POSTが使われることが多いです。

<form action="/contact/complete/" method="post">
    <label>
        お名前
        <input type="text" name="name">
    </label>
    <button type="submit">送信</button>
</form>

フォームを作る時は、見た目だけでなく、どこへ、どの方法で送るのかも関係します。

ステータスコード

ステータスコードは、サーバーから返ってくる結果を数字で表したものです。

Web制作でよく見るものを整理します。

DevToolsのNetworkタブを見ると、各ファイルのステータスコードを確認できます。

404 Not Found

404 は、リクエストしたページやファイルが見つからない時に返ります。

Web制作では、次のような原因でよく起きます。

• URLが間違っている
• ファイル名が違う
• ディレクトリ名が違う
• 大文字と小文字が違う
• アップロード漏れがある
• 下層ページで相対パスが崩れている

画像が表示されない時やCSSが効かない時は、Networkタブで 404 が出ていないか確認します。

301と302

301 と 302 は、別のURLへ移動させるリダイレクトです。

URLを変更した時、古いURLから新しいURLへ案内するために使います。

たとえば、サイトリニューアルで /service-old/ を /service/ に変えた場合、古いURLへアクセスした人を新しいURLへ移動させる必要があります。

500 Internal Server Error

500 は、サーバー側で問題が起きている時に返ります。

静的なHTMLサイトではあまり見かけないかもしれませんが、WordPressやフォーム処理、CMSなどでは見ることがあります。

500 が出ている場合、HTMLやCSSのパスミスではなく、サーバー側の処理や設定に問題がある可能性があります。

自分で対応できない場合は、サーバー担当者やシステム担当者へ状況を伝えます。

HTTPヘッダー

HTTPヘッダーは、リクエストやレスポンスに付く追加情報です。

たとえば、次のような情報が含まれます。

• 返ってきたデータの種類
• キャッシュの扱い
• リダイレクト先
• Cookie
• セキュリティに関する情報

Web制作の初学者が細かく覚える必要はありません。

ただし、キャッシュやCookie、リダイレクトの確認でヘッダーを見ることがあります。

HTTPSとは

HTTPSは、HTTPの通信を暗号化したものです。

https://example.com/

HTTPSを使うと、ブラウザとサーバーの間の通信が暗号化されます。

お問い合わせフォーム、ログイン、決済のように個人情報を扱うサイトでは特に重要です。

現在では、通常のコーポレートサイトやLPでもHTTPSが基本です。

SSL証明書

HTTPSを使うには、SSL証明書が必要です。

SSL証明書は、通信を暗号化し、そのサイトが正しい接続先であることを確認するために使われます。

レンタルサーバーやホスティングサービスでは、無料SSLを簡単に設定できることがあります。

具体的な設定手順はドメイン・サーバー講座で扱いますが、この講座では「HTTPSには証明書が必要」と理解しておきます。

mixed content

HTTPSのページの中で、HTTPの画像やCSS、JavaScriptを読み込むと、mixed contentになることがあります。

<img src="http://example.com/images/main.jpg" alt="">

HTTPSページでは、読み込む外部ファイルもHTTPSにそろえるのが基本です。

mixed contentがあると、ブラウザで警告が出たり、ファイルがブロックされたりします。

この章のまとめ

• HTTPはブラウザとサーバーがやり取りするためのルール
• ブラウザはリクエストを送り、サーバーはレスポンスを返す
• GETは取得、POSTは送信でよく使う
• 404、500、301、302などのステータスコードはトラブル確認に役立つ
• 現在のWebサイトではHTTPSが基本
• HTTPSページ内でHTTPのファイルを読み込むとmixed contentになることがある