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