【Webページ作成の基本】フロントエンド言語ってどんなもの？

はじめに

あなたはフロントエンド言語をご存知でしょうか。

フロントエンド言語とはWebページの見た目を整えたり、加工したりすることが出来る言語です。
フロントエンド言語はHTML、CSS、そしてJavaScriptの3つしかありません。

今回は、

それぞれのフロントエンド言語とはどのようなものなのか。
実際にフロントエンド言語を使ってページを表示させる。

この2つを行っていきたいと思います。

フロントエンド言語ってなんだろう？

先にも説明したようにフロントエンド言語には全部で3種類存在します。
ではそれぞれどういったものなのか解説していきます。

HTMLとは

HTMLとは”Hyper Text Markup Language”(ハイパー・テキスト・マークアップ・ランゲージ)の頭文字です。

主にWebにおいての骨格の役割を果たします。
タグと呼ばれるマークを使い、文章の構造を指定したり、文字の大きさや色やリンク、または画像を張り付けることが出来ます。

あなたが今のページをパソコンのGoogle Chromeで見ているのなら、右クリックを押して一番下の”検証”を押してみてください。
すると右側に、<>で囲まれたものや英語がたくさん表視されている画面が出てくると思います。
それがHTMLです。

CSSとは

CSSとは “Cascading Style Sheets”(カスケーディング・スタイル・シート)の頭文字です。

この言語はHTMLと組み合わせて使用します。
CSSはフォントを変えたり、テキストに下線や色を加えたり、大きさを変えたりすることが出来ます。

静的なWebページを作成したいのであれば、HTMLとCSSだけで作ることが可能ですが、サイトに動きを加えたい場合は次で紹介するJavaScriptが必要になってきます。

JavaScriptとは

JavaScript(ジャバスクリプト)はHTMLに埋め込んで、画面表示に動きを付けることが出来る言語です。

これによって、より見栄えのする動的なサイトを作ることが出来ます。

以下のサイトでもJavaScriptが使用されています。
株式会社ウィモーション: https://wemotion.co.jp/

他には、ページ上のスライドが自動で切り替わったり、クリックするとポップアップ表示をするものを作ることが出来ます。

また、JavaScriptは他の機能にも使われています。
例えば、Google mapのようなページ遷移をせずに新しいものアップロードするAsjaxと呼ばれる機能や、適切な形式でメールアドレスが入力できているか確認するバリデーションも行うことが出来ます。

ちなみに、もしかしたらJavaという言語の親戚？と思われた方がいらっしゃるかもしれませんが、これらは全く違う言語です。
例えるなら、インドとインドネシアぐらい違うものです。

それぞれの言語のまとめ

言語	役割
HTML	サイトの骨格を作る
CSS	サイトを装飾する
JavaScript	サイトに動きを付ける

実際にそれぞれの言語を使ってページを表示させてみよう

それぞれの言語の役割についてはご理解いただけたでしょうか。

ここからはこれらの言語を使って、ブラウザ上で実際にページを表示させたいと思います。
皆さんも是非手を動かしてページを表示させてみてください。

まずはHTMLだけで表示させる

HTMLは<head></head>などのタグよばれるものでコンテンツを囲むことで記述していきます。

試しに一つ表示させてみたいと思います。
以下のようにメモ帳で記述してみてください。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset=UTF-8 />
    <title>これはHTMLです</title>
</head>

<body>
    <h1>HTMLとは</h1>
    <p>Hyper Text Markup Languageと言います</p>
</body>

</html>

こちらはHTMLです。

最初に<!DOCTYPE html>でHTMLを適用することを宣言します。
また、言語を日本語に選択したり、文字コードと呼ばれるものを指定します。
難しければ、そういう書き方があるという事だけ認識しておいてくだされば結構です。

そしてメモ帳に保存して、拡張子を.htmlに変更します(例: sample.html)。
これでブラウザ上に表示できるようになります。
ファイルを右クリックして、”プログラムから開く”から好きなブラウザで内容を確認してみてください。
またはファイルのフルパスをブラウザのURLに直接入れても表示できます。

下記のように<body>タグに挟まれている文章が表示されていれば成功です。

これがWebページを作る際の骨格になります。
ここから様々な装飾をしてみたいと思います。

HTMLにCSSを適用する

“HTMLとは”という文字を赤へ変更してみたいと思います。
さきほどのHTMLに適用していきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset=UTF-8/>
    <title>これはHTMLです</title>
    <!--以下を追加します--> 
    <style type="text/css">
            h1 {
                color:red;
            }
    </style>
  </head>
  <body>
    <h1>HTMLとは</h1>
    <p>Hyper Text Markup Languageと言います</p>
  </body>
</html>これをまたブラウザ上に表示させます。

今回はh1にcolor: red;と指定することで<h1>で囲まれた部分の色を赤に適用するように書きました。
これもHTMLの時に行った方法で実際に表示してみてください。
上のように”HTMLとは”という文字が赤く染まれば成功です。

さらにJavaScriptを適用する

今まで作った画面にJavaScriptを適用してみます。
具体的には、画面を開いたときにポップアップで文章を表示される機能を追加してみたいと思います。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset=UTF-8/>
    <title>これはHTMLです</title>
    <style type="text/css">
            h1 {
                color:red;
            }
    </style>
    <!--以下を追加します-->
    <script>
            window.alert("JavaScriptの機能です！");
    </script>
  </head>
  <body>
    <h1>HTMLとは</h1>
    <p>Hyper Text Markup Languageと言います</p>
  </body>
</html>

今回はページを表示させた時に”JavaScriptの機能です！”と表示されていれば成功です。