HackMDWebの仕組み
本書は初学者を対象にWebの仕組みを簡単に説明したものです。厳密性に欠ける部分もあります。
Webページが見えるまで
今、このページをスマホやPCで見ていると思います。
このページ以外でも YouTube や Yahoo! JAPAN、Amazon など、私たちは様々なWebページを目にします。このデータはどこにあって、どのようにしてこのページは見えているのでしょうか？
実はWebページのデータは単なるファイルです。サーバと呼ばれる特殊なコンピュータからPCやスマホにファイルが送られてきます。このファイルには文字がぎっしり書いてあって、そのままでは何がなんだかわかりません。これを人間に見やすく表示してくれるのがChromeやSafariといったブラウザです。
このようにして、サーバ上にあるファイルをPCやスマホで見ることができるのです。
Webページのデータを見てみよう
実際に送られてくるファイルがどんなものなのか、見てみましょう。
ここではPCのChromeを使っている前提で説明します。PCであればChrome以外のブラウザを使っても同様のことができますが、操作方法や見た目が変わります。
キーボードのF12を押すと、Chromeの画面に開発者ツールが表示されます。図中赤枠で囲ったElementsというところをクリックすると、緑枠で囲った部分が表示されます。この緑枠で囲った部分がサーバから送られてくるファイルそのものです。ブラウザはこの文字列を人間に見やすいように加工してくれるのです。
何やら難しそうな文字がたくさん書かれていますね。Web制作とはつまり、この難しそうな文字列を書くことです。今は難しく見えると思いますが、ルールややり方を覚えれば書けるようになります。
Webサイトを作ってみよう
さて、いきなりですがWebサイトを作ってみましょう。といってもここで作るのは非常にシンプルなものです。
もう一度おさらいすると、Webページを表示するにはサーバが必要でした。サーバを構築するには一般的にはお金がかかります。しかし、無料でサーバを提供してくれるサービスがあるので今回はそれを使います。
今回使うのは Neocities というサービスです。
Neocities のアカウントを作成する
https://neocities.org/ を開いてください。次のような画面が表示されると思います。
必要な項目を入力しましょう。各項目の説明は次の通りです。
| 入力項目 | 説明 |
|---|---|
Username |
これから作るWebサイトのURLになります。後で変更することも可能なので、ここでは 名前-study など適当な名前を設定してください。 |
Tags |
これはNeocitiesで作られたWebサイトを検索するときに使われます。何を入力してもいいです。 |
Password |
Webサイトを管理するためのパスワードです。 |
Email |
Neocitiesのアカウントに紐付けるメールアドレスです。 |
Confirm you are human |
人間である（ボットでない）ことの証明です。表示される指示に従って操作してください。 |
Create My Site |
すべて入力し終わったらクリックしてください |
Create My Site をクリックすると次のような画面になります。この画面は課金を促すだけの画面なので閉じてください。
さて、先程入力した Email 宛てに Neocities からメールが届いているはずです。
メール中に書かれている https://neocities.org/site/kaito-study/confirm_email/****** というURLをクリックして開きます (****** の部分は人によって違います)。
すると、 Email が確認されたという画面が表示されます。
これで Neocities のアカウント作成は完了です。
Neocities のWebサイトを編集する
ではさっそく Neocities でWebサイトを作ってみましょう。画面右上の▼をクリックし、Edit Site をクリックしてください。
すると、あなたのWebサイトの編集画面が表示されます。今は index.html, neocities.png, not_found.html, style.css という4つのファイルがNeocitiesのサーバ上に置かれていますね。サーバが最初に送信するのは index.html というファイルなのでこれを編集してみましょう。 index.html の上にカーソルをもっていきEdit をクリックしてください。
すると、次のような編集画面が表示されます。 <body> と </body> で囲われた部分 (13〜30行目) を削除してください。
削除した部分に次のような文字 (13〜15行目) を入力してください。 カイト とあるところはあなたの名前でいいです。入力できたら Save をクリックし View をクリックしてください。
すると、今作ったWebサイトのページが表示されます。これであなたのWebサイトが世界中に公開されました。試しにスマホでも見てみましょう。
今回説明するために作ったWebサイトのURLは https://kaito-study.neocities.org/ です。
Webサイトを構成するファイルの種類
Webサイトのデータは単なるファイルだと言いました。このファイルは役割に応じて3つの種類に分けられます。
HTML
Webサイトを構成する最も基本的なファイルです。Webサイトの構造を定義します。構造というのは「見出し」とか「段落」といったものです。
CSS
Webサイトのデザインを定義するファイルです。例えば見出しの フォントサイズは16pt にするとか、指定した段落の 背景は赤 にする、といったものです。HTMLで定義した構造に対してどのようなデザインを当てはめるか、というものです。
JavaScript
Webサイトの動きを定義するファイルです。例えば、指定したボタンをクリックしたら 背景の色が変わる といったものです。
以上の3種類のファイルをうまく組み合わせてWebサイトを作ります。
次に何をする？
Webの基本的な仕組みがわかったところで、次はWebサイトの作り方を勉強していきましょう。今回はとてもシンプルなWebサイトを作りましたが、実際にはこんなシンプルなWebサイトはありません。ちゃんとしたWebサイトが作れるようになるためにはHTML, CSS, JavaScriptの文法を勉強し、ある程度書けるようになる必要があります。その学習方法として Progate というサービスをおすすめします。
この HTML&CSS と JavaScript のレッスンをやるといいでしょう。このレッスンで学んだことを今回作った Neocities のWebサイトで実践し、積極的にアウトプットしていきましょう。
このページについて
URL https://hackmd.io/@kai10/r1vbVUrfq
tags: kaito_study Web HTML CSS JavaScript Neocities
お問い合わせ
Discord の勉強用サーバを立てました。
質問がある場合はこちらにお願いします。
招待URL https://discord.gg/YCdMrwVEGX
