HTML・CSS・JavaScriptで作ったサイトを仕上げる：動作確認・SEOの基本・公開手順
HTML・CSS・JavaScriptで作ったサイトの確認方法と静的公開の流れを解説。noindex・canonical・説明文、フォームの制約と拡張課題を整理します。
最終回では、第9回で完成したサイトを点検し、自分のサイトとして公開する準備をします。HTMLを書けること、CSSで整えられることに加え、他の人がURLから開いて使える状態まで確認することが目標です。配布コードは第9回と同じ完成版で、ここから自分の文章と画像へ置き換えます。
完成ファイルと表示の確認
公開に必要なファイル
同じフォルダーにindex.html、styles.css、script.js、workshop.svgを置きます。ファイルだけを別々に移すと相対パスが切れるので、フォルダーの構成を保ってください。開発用の依存パッケージやビルドは、この素のHTML・CSS・JavaScriptの例には不要です。
atelier-site/
index.html
styles.css
script.js
workshop.svg各回のZIPは、その回だけでも開ける完成時点のコードです。途中から学び直すときは対応する回を展開してください。画像のSVGも同梱しており、別サービスからの読み込みは必要ありません。
ローカルファイルと公開URLの違い
file:///で開けることは、公開後の通信が成功することの証明にはなりません。公開先ではパス、大文字小文字、HTTPS、キャッシュ、返されるファイルの種類などが関係します。今回の例にはfetch()やES Modulesを使っていませんが、それらを追加したらローカルHTTPサーバーでも確認する構成に進みます。
見た目と操作を点検する
HTMLとCSSの確認
- タイトルと主見出しがページの目的を表している。
- 見出しの順序、ラベル、画像の代替テキストが適切。
- 320pxからPC幅まで、文章や入力欄が重ならない。
- ブラウザーを200%に拡大しても内容を読める。
- 明暗両テーマでリンク、入力欄、フォーカスが見える。
開発者ツールのElementsでHTMLの構造と適用されたCSSを確認します。HTMLの検証にはW3CのHTMLチェッカーを利用できます。文法チェックに通っても、文章が理解しやすいか、実際に操作できるかは別に確認が必要です。
JavaScriptの確認
Consoleに予期しないエラーがないか、NetworkでCSS・画像・JavaScriptが取得できるか確認します。メニューは開く・閉じるだけでなく、開いた状態から画面幅を変える、Escapeで閉じる、リンクを選ぶ操作も試します。保存が使えない状況でもテーマの切り替えが動くかを点検します。
フォームの役割を誤解させない
この例は入力内容をブラウザー内で確認するだけです。「申し込み完了」のように実際の送信が行われたと思わせる表示へ変更しないでください。メールを送る機能を実装するなら、バックエンドやフォームサービスなどの受け取り先を決め、送信結果に応じて画面を更新する必要があります。
検索から伝わる情報を整える
title・description・見出し
ページごとに内容を表すtitleと短い説明文を設定します。検索キーワードを繰り返すより、誰に向けて何を提供するページかを明確にしてください。検索結果のタイトルや説明は検索エンジンが変更する場合があり、設定どおりの表示や順位は保証されません。
HTMLの意味、見出し、説明文、リンクの行き先を明確にすることは、読者や検索システムが情報を理解する土台になります。AI検索向けにも、質問に対する具体的な答え、実際に確認したコード、参照元を明示しますが、特定の設定だけで引用や掲載が保証されるわけではありません。
noindexの扱い
配布サンプルには、練習ページの重複掲載を避けるため<meta name="robots" content="noindex">を入れています。自分の文章に置き換えた本番サイトを検索に掲載したい場合は、この行を削除して公開します。noindexはアクセス制限ではなく、秘密のページを守る機能でもありません。
公開URLが決まったらcanonicalを確認する
同じ内容が複数URLで表示される場合は、代表とするURLを決めます。下のURLは説明用なので、そのままコピーせず、自分の正式な公開URLへ置き換えてhead内に追加します。
<link rel="canonical" href="https://example.com/">公開から確認までの流れ
静的ファイルを配信できる場所へ配置する
静的サイトを公開できるホスティング、またはApacheやNginxなどで設定した公開ディレクトリへ、4つのファイルを同じ構成で配置します。サーバーごとに配置先や設定は異なります。すでに運用中のサイトがある場合は、既存ファイルを保存したうえで、今回のサイトを置く場所を決めてください。
URLから開いて検証する
公開URLを開き、再読み込みしてCSS・画像・JavaScriptの応答を確認します。別の端末でもページ内リンク、メニュー、フォームを試します。修正が反映されない場合は、配信されたファイルと手元のファイルを比較し、ブラウザーや配信側のキャッシュも確認します。公開した事実と検索エンジンに登録された事実は別です。
次の作品へ進む
小さな拡張課題
学習カードを増やし、キーワードで絞り込む機能を追加してみましょう。入力値でカードの表示を切り替えたら、該当件数を文字でも伝えます。状態をJavaScript、見た目をCSS、基本情報をHTMLに分ける方針を保ちます。
次はDOMとイベントで一覧の追加・削除、非同期処理とfetchで通信を学べます。その後にReact入門へ進むと、部品と状態を整理する理由がわかりやすくなります。まずは今回の4ファイルを、自分の目的に合うサイトへ仕上げてください。
参考資料
この回の完成版と学習の続き
第10回の見本をブラウザーで開く · 第10回の完成コードをダウンロード
ZIPを展開してindex.htmlを開けば、この回の完成時点から試せます。コードを変更する場合は、ZIP内のファイルをテキストエディターで編集して保存してください。