第1回目：Webページの仕組みについて
こんにちは！たくぞー（Instagram：takuzo0405）です。
Web制作をしていく上で絶対に欠かせないHTMLについて、全4回に分けて開設していきたいと思います。
プログラミング言語としてまず初めに必ず触れる言語になりますので、最後まで受講してマスターしてしまいましょう。
最後まで無料で受講可能です！
それではさっそく始めていきたいと思います。
Webページの仕組みって？
まずはWebページの仕組みについて解説していきます。
Webページというのは、Webサーバーとドメインによって成り立っています。
Webサーバーというのは聞きなれた言葉でいうとレンタルサーバーですね。
僕の場合、Xサーバーでサーバーをレンタルして、お名前.comでドメインを契約しています。
Xサーバー広告
お名前ドットコム広告
「takuzo-blog.com」というドメインを契約しているのですが、ユーザーが「takuzo-blog.com」にアクセスがあった場合は、このドメインが紐付けされているXサーバーからデータを取得してきます。
どういうことか、試しにWebサーバーへデータをアップしてみましょう。
サーバーにデータを置いてみよう
この動画ではWindowsのパソコンを使っていますので、ffftpというソフトを使ってサーバーにデータを置いてみたいと思います。
場所は「takuzo-blog.com」→「public.html」→「html」という新規フォルダを用意して、この中にデータを置いていきます。
ちなみに現時点では何もファイルデータを置いていないため、Googleで「takuzo-blog.com/html」と検索しても何も見つかりません。
ここに、あらかじめ用意していたファイルをアップロードして、Googleを更新してみると、
はい！このように表示されました。
「takuzo-blog.com/html」にアクセスしたので、Webサーバーからデータを引っ張って来た状態になります。
ここでよく勘違いしてしまうのが、アクセスしたユーザーがデータを見に行っている訳ではありません。
ユーザーのパソコン、あるいはスマートフォンでデータを受け取っています。
Caches（キャッシュ）って聞いたことあると思いますが、ブラウザで一度表示したページのデータ（HTMLや画像）を一時的に保存しておく機能がありますよね。
頻繁に訪れるページなどは、キャッシュが保存されているおかげで、素早く表示することが可能になっています。
ところで、いまアップしたこのファイル、改行も何もされていない文章なので読みづらいですよね。
タイトルなんかも少し大きくして見分けが付くようにしていきたい。
先ほどサーバーにアップしたデータというのは特に何もHTMLとしてマークアップしていないものになります。
そうなると、Webサーバーというのはここがタイトルなんだな、とかここで改行したい、という処理を自動でやってくれる訳ではありません。
ブラウザとしてはただ単にWebサーバーから返って来たデータをそのまま表示しているだけになります。
なので、タイトルを少し大きくしたいとか、改行したいという場合は、Webサーバーに置いているファイルの方で書いてあげる必要があります。
これがHTMLのことです。
マークアップしてみよう
では、このファイルを見やすくするために、簡単にHTMLでマークアップして見たいと思います。
まず、見出しとなる部分にはh1～h6まであるタグを使ってマークアップしていきます。
「たくぞーブログ」に関してはこのページの一番大きな見出しとなるので、h1タグを使って、このようにマークアップしていきます。
大抵のタグにはこのように開始タグと「/」が入っている終了タグがセットになっていて、この間にテキストが入ることで適用されます。
書けましたら、コマンド+Sでファイルを保存して、Webサーバーへ再アップして見ましょう。
「takuzo-blog.com/html」を右上の再読み込みボタンから、再読み込みします。
はい！たくぞーブログの部分がh1タグの元々持っている性質によってこのような見た目にすることができました。
検証ツールで見てみよう
ここで、検証ツールと呼ばれるツールを見てみましょう。
表示方法はブラウザによって異なりますがGoogleChromeの場合は、右クリックして「検証」を選択します。
すると、このように右側にHTMLのソースコードと呼ばれるものが表示できました。
検証ツールのセレクトツールを使って先ほどマークアップしたタイトルを見てみましょう。
ちゃんとh1タグでマークアップされていることが確認できると思います。
まとめ：第2回へ続く
このように、HTMLというのは、ブラウザがここはタイトルですよ、ここは改行するところですよ、といったように指示をするための言語のことです。
では今回はここまででHTML講座の第1回目を終わりたいと思います。
第1回目の講座では、
- Webページの仕組みについて
- Webページがユーザーどのようにして表示されるのか
- HTMLのタグについて
を解説していきました。
では次の講座でお会いしましょう。
「ホームページ制作の独学に限界を感じている」
「HTML・CSSをマスターして単価を上げたい」
そんなお悩みをこれ一つで解決！
本格ホームページを作りたい方はこちら
