さあ、Webサイトを作ろう

はじめに

現代社会に生きていると見ないことはない「Webページ」。実はWebページは小学生でも作れてしまいます。
ということで、まずはホームページの基礎について解説していきます。

Webページが届く仕組み

※Webサイトを公開する場合です。公開せず自分だけで見るにはサーバーはいりません

Webページを見せる側が「サーバー」見る側を「クライアント」といいます。

〇〇のページを見せて！

どうぞ、〇〇のページです！

こうしてWebページを見ることができます。
クライアントは私たちのスマホやパソコンで、サーバーにはパソコンが使われます。なので、普通のパソコンでもWebページを公開することもできます。（ただしサーバーのソフトが止まるとWebサイトが見れなくなるのでパソコンをつけっぱなしにすると必要があります）

URL？何それ！？

https://butsuri-kori.net/home/index.php

インターネットを見ていると、謎の文字列があることに気づくと思います。この文字列はURLといい、Webページを見るときには必ず必要です。
このURLを大きく分けると、こんな感じになります

• https://
• butsuri-kori.net
• /home/index.php

まず一つ目の"https://"というのはHTTPという通信ルールで通信するよ、という意味です。
ちなみに、「誤字ってsが付いてるぞ」と思った方もいるかもしれませんが、このsはSSL通信を意味していて、SSL通信というのは暗号化通信のことです。

次に二つ目のbutsuri-kori.netというのは「ドメイン」と言って、インターネット上での住所を表わしています。

最後に三つ目の/home/index.phpというのは、「home」フォルダーの中に入っているindex.phpという意味です。

どんな方法があるの？

コードを手動で書いて作る方法

Webサイトの基本、HTML

Hyper Text Markup Language の頭文字をとってHTMLとなった。テキストをタグというもので囲って意味を付けていく言語。全てのWebページの基本。

小学生でも習得できる簡単な言語なのでパソコン初心者にもおすすめです。

<h1>見出し</h1>
<p>段落</p>

こんな感じで<h1>などの「タグ」でテキストを囲うだけのシンプルな言語です。

HTMLを装飾する、CSS

先程説明したHTMLだけでも最低限Webサイトとしてなりたちますが、白い背景に黒い文字だけではさみしいですよね？（圧）

そこで、CSSの出番です。CSS（スタイルシートとも言う）は、HTMLの見た目を装飾する言語で、色を付けたり文字の場所や大きさなどを変えたりすることが出来ます。

Webページに動きを付ける、JavaScript・PHP

先程説明したHTMLとCSSだけでもWebサイトとしてなりたちますが、やっぱり動きが無いとつまらないですよね？（圧圧）

そこで、JavaScriptの出番です。JavaScriptではWebサイトにアニメーションや計算などの機能を追加することが出来ます。

WordPressなどのCMSを使う方

CMSとは、コンテンツ管理システムの頭文字を取ったものです。記事などのコンテンツを効率よく管理することが出来ます。

あれ、HTMLは？と思った方もいるかと思いますが、CMSではPHPがHTMLを生成するので、大丈夫です。

一見難しそうに見えますが、コードをほとんど書かずに超簡単にWebサイトを作ることも出来るので世界中のWebサイトに使われています。（このWeb サイトでも使われています。）

ブログサービスなどを使う方法

WIXやBloggerなどのブログサービスを利用してWebサイトを作る方法です。最も簡単にWebサイトが作れる反面、コストやカスタマイズ性は悪いです。

次のページ:実際に作ろう！