ホームページ作成

ホームページ作成の基本となる3つの言語を解説【入門】

ホームページを作成したい。
どんな言語を使えばいいのかな。
基本的なことから知りたいです。

ホームページを作成するための基本となる言語は3つあります。

こんにちは、本田です。フリーランスのWEBエンジニアをしています。

この記事では、ホームページ作成につかう3つの言語を紹介します。

ホームページ作成につかう3つの言語とは

ホームページ作成の基本として覚えておきたい言語は「HTML」「CSS」「Javascript」の3つです。

それぞれ個別に解説します。

ホームページの構造を決めるマークアップ言語「HTML」

ホームページ構造の作成にはHTML(Hypertext Markup Language)という言語を使います。

HTMLは、1989年にティム・バーナーズ=リーというイギリスの計算機科学者によって実装・開発されました。

当時の研究者たちの膨大な資料を調べやすくするために、コンピュータ上で資料を行き来できる仕組みが必要となったため、このHTMLが生まれたわけです。

こちらがHTMLの基本構造のサンプルです。(2019年最新verのHTML5で書いてあります)↓

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>1ページ目</title>
</head>
<body>
  <p>これがHTML言語です</p>
  <a href="page2.html">2ページ目を見る</a>
</body>
</html>

<xxx>ではじまり</xxx>で終わる部分を「タグ」と呼びます。

このタグを組み合わせることにより、ホームページの構造を作っていきます。

「このタグが頭、脇はこのタグ、お尻のほうはこのタグ」といったイメージです。

サンプルをよく見ると、<meta>タグは<head>タグに囲まれていますし、<p>タグも<body>タグに囲まれていますね。

このように、HTMLではタグを入れ子にして構造を整えていく書き方をします。

また、特徴的なのは以下の部分。

  <a href="page2.html">2ページ目を見る</a>

この<a>タグで囲まれた部分は「ハイパーリンク」と呼ばれ、別の文書とつなげるための仕組みです(現在は単にリンクと呼ばれます)。

ユーザーはこの「2ページ目を見る」というテキストをタッチするだけで、別のHTMLページ(page2.html)を参照することができます。

ホームページのレイアウトを決めるスタイルシート言語「CSS」

ホームページ構造の作成にはHTMLを使うという話をしました。

ですが、このHTMLは研究資料の文書構造を取り決めることが目的ですので、デザインやレイアウトなどの見た目を整える能力がとても弱い言語でした。

そこで、このHTMLの構造を活かして、1996年に見た目を整えていく言語であるCSS(Cascading Style Sheets)が勧告され、各ブラウザがその仕様に基づいてCSSを読み込めるようにしました。

こうして、CSSによって文書のデザインやレイアウトの自由度が飛躍的に高まることになったのです。

一例として、先ほどのHTMLの『これがHTML言語です』という文字をもっと大きくみせたいと思ったとします。

<p>これがHTML言語です</p>

この文字を大きくするためには<p>タグで囲まれていることを利用して、CSSではこう書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトルのサンプル</title>
  <style>
    p { font-size: 120%; }
  </style>
</head>
<body>
  <p>これがHTML言語です</p>
</body>
</html>

このとき<style>タグに囲まれているこの部分。

p { font-size: 120%; }

↑これがCSS言語の基本的な書き方です。

「pタグに囲まれている部分の書体の大きさ(font-size)を基本値から120%大きく表示する」という意味になります。

この記事執筆(2019年3月)の段階ではCSS3が最新バージョンとなっています。

CSS3ではアニメーションや角丸、段組みなども仕様として定義され、より一層使いやすくなりました。

ホームページの動作を決めるプログラミング言語「Javascript」

最後にブラウザ上で動作するプログラミング言語「Javascript」です。

このプログラミング言語はブレンダン・アイクというプログラマによって実装・開発されました。

詳細は割愛しますが、非常に紆余曲折の歴史をたどっているプログラミング言語です。(気になる方はこちらの記事が詳しく解説されていてオススメです → Javascriptの歴史 – Qiita

いまではブラウザのユーザー操作やユーザー体験に欠かせない言語となっています。

ここでは、先のHTMLをベースにJavascriptの簡単なサンプルをご紹介しておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトルのサンプル</title>
  <script>
     function showAlert() {
        alert("これがJavascriptです。");
     }
  </script>
</head>
<body>
  <button onClick="showAlert();" >サンプルボタン</button>
</body>
</html>

Javascriptで書かれている箇所は2箇所あります。

  1. <button>タグに書かれている「showAlert();」の部分
  2. <script>タグで囲まれている箇所(「function showAlert() { 〜 }」の部分)

これらの部分です。

要約すると、

  1. 「サンプルボタン」(<button ~>サンプルボタン</button>) がクリックされたら(onClick=””) showAlertというプログラムを実行してね。
  2. showAlertが呼び出されたら警告ダイアログに「これがJavascriptです。」を表示してね。(alert(“これがJavascriptです。”);)

という流れになっています。

このようにJavascriptを組み込んでいくことによって、お問い合わせフォームや掲示板などの『ユーザーと情報をやりとりする仕組み』や、ゲームなどの『ユーザー操作に反応する仕組み』など、ホームページ上の動的な部分を構築していくことが可能になります。

ホームページ作成言語に関するその他の質問と回答

絶対にこの3つの言語を覚えなければいけないの?

3つの言語を絶対に覚えないといけないかというと、答えは「No」です。

なぜなら、文書を表示してリンクしていくだけであれば、「HTML」だけで実現できるからです。

インターネット黎明期はHTMLで十分でした。発展するにつれて、CSSやJavascriptが出てきました。

凝ったデザインを必要とせず、資料の確認程度でしたらHTMLの学習だけで十分です。

ただ、このブログでは「知識ゼロからフリーランスエンジニアを目指す」をテーマにしています。

このテーマには、自分で作ったサービスやアプリ以外にも、お客さんの要望を満たした開発をするという流れが含まれています。

ですので、CSSやJavascriptも必要な可能性が十分高いので学習しておくとよいですよ、とお伝えしています。

歴史通りまずはHTMLの基礎を理解する。それから、CSSやJavascriptの学習へと進んでいけばよいかと思います。

学習順序はありますか?

HTML → CSS → Javascriptの順に学習していくとスムーズです。

ただし、すべてをマスターしてから次に進もうとはしなくてよいです。

HTMLの基本的なことがわかったらCSSをやってみる。CSSの基礎がわかったらJavascriptをやってみる。

Javascriptを深めていくにはHTMLタグやCSSの理解も必要になってくるので、そこでまたHTML、CSSの学習もしながら進めていく。といった感じで進めていくことをオススメします。

完璧にしてから次に進みたい気持ちもわかりますが、時代の変化につれて構文がまったく変わったり新しい要素が追加され、既存の不要な要素が削除されたりと様変わりします。

完璧主義にならないように気をつけつつ、ある程度理解が深まったら次へ次へと挑戦する学習をしていくと、上達が早いでしょう。

RubyやPHPなどの言語をよく聞くけど、ホームページ作成とは関係ないの?

結論からいうと、「場合によって関係あり」です。

RubyやPHPなどの言語はサーバーサイド言語といいます。

ホームページは、ホームページ情報を持っているコンピュータからその情報をもらうことによってブラウザで表示されます。

その情報を持っているコンピュータ側を「サーバー」と呼びます。(また、情報をもらう側の端末を「クライアント」と呼びます。)

RubyやPHPはサーバー側(サーバーサイド)で活躍する言語となります。

これらの言語を使うと、ユーザー個人の情報を記憶しておいたり、ユーザーがサーバーに保存した情報を別のユーザーと共有したり、サーバー上に保存されている各種情報をもとに複雑な処理をした結果を返すということができるようになります。

要約すると、

ブラウザで表示したい → HTML, CSS, Javascriptを学習しよう。

ユーザーと情報をやりとりしたい → RubyやPHPなどのサーバーサイド言語を学習しよう。

ということになります。

まとめ

この記事では、ホームページを作成するための基本となる言語3つを紹介・解説しました。

ホームページ作成は「ブラウザで表示する」ということがゴールです。

「HTML」「CSS」「Javascript」の学習を深めていくことで、ホームページがスピーディーに差作成できるようになっていくことでしょう。