ホームページはどうやって作られているの?

  • HTML/CSS
  • JavaScript

皆さんが普段が見ているホームページはあれはどうやって作られていると思いますか?
基本的には以下の3つの技術によって作られています。

1. HTML: ホームページの骨組み

HTMLは”HyperText Markup Language”の略で、ホームページの基本的な構造を作るために使われます。
例えば、

  • 見出し
  • テキスト
  • 画像

これらを配置するための「土台」がHTMLです。

簡単な例を挙げると、以下のようなコードで「こんにちは、世界!」というメッセージを表示できます。

<!DOCTYPE html>
<html>
<head>
  <title>サンプルページ</title>
</head>
<body>
  <h1>こんにちは、世界!</h1>
</body>
</html>

2. CSS: デザインを整える

CSSは”Cascading Style Sheets”の略で、ホームページの見た目を整えるために使われます。通常HTMLだけだと何も色が付いてなかったりするので、CSSを使用することで色を付けたりしてデザインを調整することができます。

以下は、文字を赤くするCSSの例です。

<style>
  h1 {
    color: red;
    font-size: 24px;
  }
</style>

これをHTMLと組み合わせると、赤い文字で「こんにちは、世界!」と表示されます。

3. JavaScript: 動きをつける

JavaScriptは、ホームページにアニメーションやインタラクティブな動きを加えるために使われます。上の2つと違って本格的なプログラミング言語になります。

以下は、ボタンをクリックしたときに文字が変わるコードです。

<button onclick="changeText()">クリックしてね</button>
<p id="text">こんにちは、世界!</p>

<script>
  function changeText() {
    document.getElementById("text").innerText = "こんにちは、JavaScript!";
  }
</script>

その他にもスクロールしたらふわっと現れるといったアニメーションや、クリックしたら大きい画像が表示されるといったポップアップなどで使用されます。

参考サイト01:https://sanominori-kindergarten.net/
参考サイト02:https://www.marinemesse.or.jp/omotenashi/

4. PHP: データを扱う

PHPは”Hypertext Preprocessor”の略で、データベースとやり取りしたり、動的なページを作るときに使われます。

例えば、ブログの記事を保存したり表示したりするシステムや、ECサイトのシステムなどはPHPで作られることが多いです。世界的なシェアを持つCMSであるWordPressはPHPで作られています。

以下のようにPHPを使うと、簡単なメッセージを表示することができます。

<?php
  echo "こんにちは、PHP!";
?>

PHPは上3つと違ってサーバー上で動作する言語のため、開発環境を構築しないと動作しないです。XAMPPやMAMPといったアプリケーションを使って構築するのが多いです。

まとめ

ホームページは、以下のような技術を組み合わせて作られています。

  1. HTML: 骨組みを作る
  2. CSS: 見た目を整える
  3. JavaScript: 動きをつける
  4. PHP: システムやデータを扱う

これらを組み合わせてホームページが出来上がります。