なんか自分のWebサイト作りたいよ〜〜〜！
とたまに相談を受けます。
当サイトを2年近く運営している私が、実際に学習したこと、実践したことなどをシリーズ形式で紹介していきたいと思います。
疑問点などございましたら、お問い合わせフォームなどでお気軽に質問してください👌
Webサーバに必要なもの
下記のようなものがWebサーバ側で準備する必要があります。
- HTML
- CSS
- Javascript、PHPなど
- ミドルウェア
HTML
HTMLは「ハイパーテキストマークアップランゲージ（Hyper Text Markup Language）」というマークアップ言語です。
私たちが利用する一般的な文字列は、以下のようなものですよね。
|
1 2 3 4 5 6 |
私は山田太郎といいます！ 好きな食べ物はリンゴです。 メロンは700万番目に好きですが、あまり食べません。 休みは山下公園を走り回っています。 |
マークアップ言語（HTML）では、「タグ」というものを使って、文字にマーク（印）をつけます。
この印をつけることで、文字を強調したり、色をつけたりすることができます。
|
1 2 3 4 5 6 |
私は<b>山田太郎</b>といいます！ 好きな食べ物は<span style="color: #ff4500;">リンゴ</span>です。 メロンは700万番目に好きですが、あまり食べません。 休みは<a href="https://www.welcome.city.yokohama.jp/spot/details.php?bbid=190">山下公園</a>を走り回っています。 |
「山田太郎」を太文字、「リンゴ」を赤く、「山下公園」にリンクをつけてみました。
このようにタグを付与することで、文章構造を明示的に記す言語がHTMLです。
マークアップというだけあって、印をつけるイメージですな。
CSS
CSSは「カスケーディングスタイルシート（Cascading Style Sheets）」という装飾をするための言語です。
内容まで理解しなくていいので、具体例を見てみましょう。
|
1 2 3 |
b { color: #ff0000; } |
これは、タグ「b（太文字）」の色を赤にするという設定になります。
先述のHTMLの例文で行けば、「山田太郎」の部分が赤くなるわけです。
縁起悪いな。
気にしない。気にしない。例文なので。
このように、HTMLで印をつけ、それを指定して装飾するというのがCSSの役割です。
Javascript、PHPなど
これらを本命の「プログラミング言語」と呼びます。
画面上の処理を行ったり、アプリケーションの処理を作成したり、サーバ側の処理を作成したりと様々な場面で利用されます。
今回は特に触れませんが、プログラミングの基礎的な部分を知りたい方は、コチラの記事をご参考ください。
ミドルウェア
コンピュータに搭載しているOSと、アプリケーションとの中間に入るソフトウェアのこと。
……という業務的な説明では分かりづらいと思います。
ざっくりいうと、「サーバというコンピュータをある役割にするためのソフトウェア」と考えていいです。
自分もあまり詳しく知らないので、えらい人に教えてもらいたい。
具体的なミドルウェアを一部紹介します。
- Webサーバ
- Apache
- Nginx
- DB（データベース）サーバ
- MySQL
- PostgreSQL
上記のようなミドルウェアをサーバにインストールすることで、特定の処理に特化した機能を発揮します。
まとめ
最後に復習しましょう。
- HTML
- サイトを構築する骨組みとなるもの
- CSS
- サイトを装飾するもの
- Javascript、PHPなど
- 動的なサイトを制作するために必要なもの
- ミドルウェア
- 特定の処理に特化した機能を持つソフトウェア
これでもまだまだ大枠です。
こういうのがあるんだな、ということを頭に置いておくだけで良いです。
次は、サーバを借りるための下準備をしていきますよ！
