VIDEO LESSON

HTML・CSS・JavaScriptで作ったサイトを仕上げる：動作確認・SEOの基本・公開手順の解説動画

再生時間 7:31動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、シーエスエス入門、第十回です。
0:04今回はいよいよ最終回。
0:05これまでの回で作ってきたサイトを点検し、公開する準備をします。
0:09ページが自分のパソコンで開けることと、他の人がユーアールエルから開いて使えることは、
0:12別の話です。
0:15今回の目標は、その公開の状態まで確認できるようになることです。
0:19配布コードは第九回と同じ完成版です。
0:21ここから、文章や画像を自分のものへ置き換えて、自分のサイトとして仕上げていきます。
0:27元になる記事は、エスイーの部屋の、サイトを仕上げる、です。
0:30まず、公開に必要なファイルを確認します。
0:33用意するのは四つ。
0:34ページ本体のインデックス、エイチティーエムエル、見た目のスタイルズ、ドット、
0:38シーエスエス、動きのスクリプト、ドット、ジェイエス、そして画像のワークショップ、
0:41ドット、エスブイジーです。
0:45大切なのは、この四つを同じフォルダーに入れたまま、構成ごと移動することです。
0:50ファイルだけを別々の場所へ移すと、エイチティーエムエルからほかのファイルを指す相対パスが切れて、
0:54ページが崩れてしまいます。
0:58この例は、素のエイチティーエムエルとシーエスエス、ジャバスクリプトだけでできているので、
1:02ビルドや開発用のパッケージは必要ありません。
1:06次に、ローカルで開くことと、公開することの違いを押さえます。
1:11ファイルをダブルクリックして、ファイル、という形式のアドレスで開けることは、
1:16公開した後の通信がうまくいく証明にはなりません。
1:22公開先では、ファイルの場所を表すパス、英字の大文字と小文字の違い、エイチティーティーピーエスの通信、
1:30古いファイルを残すキャッシュ、そして返されるファイルの種類など、手元とは条件が変わります。
1:38手元では動いたのに公開したら崩れた、というトラブルの多くは、この条件の違いから起こります。
1:46だからこそ、公開したユーアールエルから開いて確かめることが欠かせません。
1:52ここからは点検です。
1:54まず、エイチティーエムエルとシーエスエスを、リストで一つずつ確認します。
1:59タイトルと主見出しが、ページの目的を表していること。
2:03見出しの順序、フォームのラベル、画像の代替テキストが適切なこと。
2:08画面の横幅が三百二十ピクセルのスマートフォンから、ピーシーの幅まで、文章や入力欄が重ならないこと。
2:15ブラウザーを二百パーセントに拡大しても読めること。
2:19そして、明るいテーマと暗いテーマの両方で、リンクや入力欄、選択中の枠が見えることです。
2:25確認には、ブラウザーの開発者ツールのエレメンツや、ダブリュー、スリー、シーのエイチティーエムエルチェッカーが使えます。
2:34ただし、文法チェックに通ることと、文章がわかりやすく実際に操作できることは別です。
2:40両方を確認してください。
2:41ジャバスクリプトの点検も、開発者ツールで行います。
2:46コンソールという画面で、予期しないエラーが出ていないかを見ます。
2:51次に、ネットワークという画面で、シーエスエス、画像、ジャバスクリプトのファイルが、
2:56正しく取得できているかを確認します。
3:01メニューの操作は、開くと閉じるだけでは不十分です。
3:05開いた状態のまま画面の幅を変える、エスケープキーで閉じる、リンクを選んで閉じる、
3:10といった操作まで試してください。
3:15第九回で守った、保存が使えない状況でもテーマの切り替えが動くかどうかも、
3:18点検項目の一つです。
3:22フォームについては、役割をはっきりさせることが大切です。
3:27この例のフォームは、入力した内容をブラウザーの中だけで確認するもので、どこかへ送信はしていません。
3:35ですから、申し込み完了、のように、実際には行われていない送信が済んだと思わせる表示へ変えてはいけません。
3:43受け取る側がいないのに完了と表示すると、利用者を誤解させてしまいます。
3:48本当に情報を受け取りたい場合は、バックエンドと呼ばれるサーバー側の仕組みや、
3:55フォームサービスなど、受け取り先を決めて、送信結果に応じて画面を更新する作りに進みます。
4:01公開するサイトは、検索から訪れる人にも内容が伝わるように整えます。
4:07基本は、ページごとに、その内容を表すタイトルと短い説明文を設定することです。
4:13検索キーワードを何度も繰り返すのではなく、誰に向けて、何を提供するページなのかを明確に書いてください。
4:21なお、検索結果に表示されるタイトルや説明文は、検索エンジンが書き換える場合があります。
4:28設定したとおりの表示や、特定の順位は保証されません。
4:32エイチティーエムエルの意味、見出し、説明文、リンクの行き先を明確にすることは、
4:38読む人にも、情報を集める仕組みにも伝わる土台になります。
4:43タイトルや説明文とあわせて、ノーインデックスの扱いも知っておきましょう。
4:48配布されているサンプルには、画面に表示している、ロボッツのノーインデックスという一行が入っています。
4:55これは、練習用のページが、元のサイトと重なって検索に載るのを避けるための指定です。
5:01自分の文章に置き換えた本番のサイトを検索に載せたい場合は、この一行を削除してから公開します。
5:07注意点として、ノーインデックスは、検索に載せないよう頼む指定です。
5:12アクセスを制限する機能ではないので、秘密にしたいページを守ることはできません。
5:17続いて、カノニカルです。
5:19同じ内容のページが、複数のユーアールエルで表示されることがあります。
5:25その場合、代表とするユーアールエルを一つ決めて、画面のリンクタグで伝えます。
5:31画面の例にある、イグザンプル、ドット、コムは説明用の仮のアドレスです。
5:36そのまま使わず、自分の正式な公開ユーアールエルへ置き換えて、ヘッドの中へ追加してください。
5:43代表を決めておくと、検索の評価が分散しにくくなり、利用者に案内するアドレスも統一できます。
5:51公開の流れをまとめます。
5:53まず、静的サイトを公開できるホスティングサービスや、サーバーの公開ディレクトリーへ、
5:57四つのファイルを同じ構成のまま配置します。
6:02すでに運用しているサイトがある場合は、既存のファイルを先に保存したうえで、
6:06置く場所を決めてください。
6:10配置できたら、公開ユーアールエルを開き、再読み込みして、シーエスエスや画像、
6:15ジャバスクリプトが応答するか確認します。
6:19別の端末でも、ページ内リンク、メニュー、フォームを試しましょう。
6:24修正が反映されないときは、配信されているファイルと手元のファイルを見比べ、
6:29ブラウザーや配信側のキャッシュも確認します。
6:34公開できたことと、検索エンジンに登録されることは、別の話です。
6:39まとめです。
6:40連載はこれで完結です。
6:41エイチティーエムエルが書ける、シーエスエスで整えられる、ジャバスクリプトで動かせる。
6:48そして今回は、他の人がユーアールエルから開いて使える状態まで、確認して公開する力も身につきました。
6:55練習として、小さな拡張課題を紹介します。
6:58学習カードを増やして、キーワードで絞り込む機能を付けてみてください。
7:03絞り込んだ結果の件数は、文字でも伝えるようにします。
7:07状態はジャバスクリプト、見た目はシーエスエス、基本情報はエイチティーエムエル、
7:11という分担は、この先も変わりません。
7:16次の学びは、ドムとイベント、非同期処理とフェッチ、そしてリアクト入門へと続きます。
7:22まずは今回の四ファイルを、自分の目的に合うサイトへ仕上げてみてください。
7:27十回にわたる学習、お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

HTML・CSS・JavaScriptで作ったサイトの確認方法と静的公開の流れを解説。noindex・canonical・説明文、フォームの制約と拡張課題を整理します。

解説記事・サンプルコードを読む：HTML・CSS・JavaScriptで作ったサイトを仕上げる：動作確認・SEOの基本・公開手順 →