WEBサイトの作り方！HTMLとCSSとJavascriptって、結局なんなの？

01そもそも、WEBページってどうやって表示しているの？

WEBページは「コンピューター言語」でできている！

WEBページは、実は「コンピューター言語」で出来ています。コンピューター言語とはなんぞや？と思いますよね。たとえば、このサイトのトップページは、こんな「ソースコード」でできています。

「ソースコード」とはプログラムやソフトウェアのもとになる文字列のこと。このサイトも、HTMLという言語で記述されています。

WEBサイトを構築する代表的な言語とは

それでは、WEBページは具体的にどんなコンピューター言語で構築しているのでしょうか。ざっくり説明すると、以下の言語で作ることができます。

この3つの言語は、それぞれ役割が全く異なります。WEBサイト制作の勉強を始めるにあたり、まずはどの言語がどんな役割を果たすのかをきちんと学びましょう。

02HTMLってなに？

基本のマークアップ言語

HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略です。マークアップランゲージ、つまり、マークアップ言語とは、文章を構造化するための言語のことを言います。

マークアップ言語にはHTML以外にも、XMLなど、いろいろな種類がありますが、WEBサイトを形作る最も基本的なマークアップ言語といえば、これです。

文章の構造化とは

マークアップ言語の具体的な役割とは何でしょう。文章を構造化するとは、いったいどういうことなのでしょうか。

例えば、上の画像のようなWEBページがあったとします。

人の目で見れば、文字の大きさや情報の配置から、どれがサイトのタイトルにあたり、記事のタイトルにあたり、本文にあたるのかを理解することができます。

しかし、コンピューターは大きさや配置などから情報を識別し、理解することはできません。コンピューターがこのページの内容を理解するためには、この文章のどの部分がサイトのタイトルであり、記事のタイトルであり、本文であるのかを、パーツごとに切り分けて構造を示す必要があるのです。つまり、マークアップ言語とは、コンピューターがWEBページの内容を読み解くことができるようにするための言語と言えますね。

文章の構造化はなぜ必要？

ところで、WEBサイトは本来人の手で作り、人が見るものですよね。なぜわざわざマークアップ言語を使い、コンピューターに内容を理解させる必要があるのでしょうか。

理由はいくつかあると思いますが、よく言われるのは、Googleなどの検索エンジンが正しく内容を読み取り、検索結果に適切に表示されるようにするため。何か調べたいものがあるとき、キーワードで検索エンジンからWEBページを探しますよね。検索エンジンはユーザーのリクエストしたキーワードごとに適切な検索結果を表示するため、あらゆるサイトを巡回し、サイト内の情報を分析し、所有しています。それは、人力で行われているわけでは当然なくて、クローラーというロボットが自動で行っているのです。だから、人ではなく、コンピューターに情報を理解させることはとても重要なんですね。

また、検索エンジン対策以外にも、「アクセシビリティ」という観点からも構造化はとても重要です。アクセシビリティとは、Webサイト上における、情報やサービスへのアクセスのしやすさのことで、高齢者や障害者なども含めたあらゆる人が、どのような環境（うるさい場所や、暗い場所、逆に明るい場所など）においても柔軟にWebサイトを利用できるように構築することを考慮しています。目の見えない人が音声読み上げソフトでWEBサイトを閲覧するとき、手を怪我したり障害のある人がマウスを使わずにキーボードだけでWEBサイトを閲覧するときにも、文章の構造化は重要になるのです。

HTMLってどんなもの？

HTMLとは、最も基本的なマークアップ言語である、と言っても、実際にどんなものか、見てみないといまいちわかりませんよね。ということで簡単なHTMLのサンプルを用意しました！

<h2>MTDDC Meetup Tokyo 2019に参加します</h2>
<p>2019年11月16日、17日に行われるMTDDC Meetup Tokyo 2019に、今年もスタッフとして参加します！<br>
セッションの司会も担当するのでぜひご参加ください！</p>
<p><a href="https://mtddc2019.mt-tokyo.net/" target="_blank">公式サイトはこちら</a></p>

これをこのページで表示させると下記のような感じになります。

HTMLは、タグと呼ばれる<>で囲まれた記号を使って文章の構造を示します。例えば、ここでは、下記のタグを使用しています。

このようなタグで囲むことによって、文章を構造化しているのです。

03CSSってなに？

WEBページにデザインを適用するCSS

CSSとは、Cascading Style Sheet（カスケ―ディング・スタイル・シート）の略です。文書のスタイルを指定する技術をスタイルシートと言い、HTMLなどで作成されたWEBページにスタイルを適用する場合に、CSSを使います。

文書のスタイルを指定する、とは、いったいどういうことでしょうか。例えば、先ほど紹介したHTMLは、文章を構造化する役割がありましたが、文字のレイアウトや大きさ、色までは定義されていないので、そのままでは上のように、ごくごくシンプルな見た目でしたね。

では、先ほどのHTMLに、スタイルをつけるとどうなるでしょうか。

<h2 style="font-size: 24px; color: #28536B; border-bottom: 2px solid #C2948A; line-height: 1.2; padding-bottom: .5em; margin-bottom: .5em;">MTDDC Meetup Tokyo 2019に参加します</h2>
<p>2019年11月16日、17日に行われるMTDDC Meetup Tokyo 2019に、今年もスタッフとして参加します！<br>
セッションの司会も担当するのでぜひご参加ください！</p>
<p><a href="https://mtddc2019.mt-tokyo.net/" target="_blank">公式サイトはこちら</a></p>

style=""の部分で、見出しの部分にスタイルをつけてみました。文字サイズを大きくし、色を付け、下線を引いています。他にもスタイルを適用すれば、要素を左寄せや右寄せにするといったレイアウトをしたり、背景色や背景画像などをつけることもできます。これが文書にスタイルを適用する、ということです。

このように、HTMLにstyle属性(style=""の部分)を追加して直接指定したスタイルを、インラインスタイルといいます。

CSSとHTMLを分離して、サイト管理を効率化

上の例ではHTMLにインラインスタイルを指定していますが、CSSをHTMLと分離して、個別のファイルにして管理することで、WEBページの表現はますます柔軟に、効率的になります。

HTMLタグでCSSファイルを読み込み

<link  rel="stylesheet" href="style.css">

HTMLで文書を記述

<h2>MTDDC Meetup Tokyo 2019に参加します</h2>
<p>2019年11月16日、17日に行われるMTDDC Meetup Tokyo 2019に、今年もスタッフとして参加します！<br>
セッションの司会も担当するのでぜひご参加ください！</p>
<p><a href="https://mtddc2019.mt-tokyo.net/" target="_blank">公式サイトはこちら</a></p>
<h2>今年のMTDDCはなんと2日間開催！</h2>
<p>なんと今年はMTDDCの日程を2日に分け、セッションDAYとワークショップDAYがあります。<br>
ワークショップには私も参加予定！一緒にCMSとIoTの未来を考えませんか？</p>
<p><a href="https://mtddc2019.mt-tokyo.net/" target="_blank">公式サイトはこちら</a></p>

CSSファイルの中身

h2 {
	font-size: 24px;
	color: #28536B;
	border-bottom: 2px solid #C2948A;
	line-height: 1.2;
	margin-bottom: .5em;
}
h2:nth-child(n+2){
	margin-top: 1em;
}

出力結果

上のサンプルのように、CSSを個別のファイルとしてHTMLと切り離すことにより、ページ内で同じスタイルを使いまわしたり、ほかのページでも同じスタイルを使いまわすことができるのです。

04JavaScriptってなに？

WEBページに動きを追加するJavaScript

HTMLは文章を構造化するマークアップ言語、CSSは文書のスタイルを定義するスタイルシート、それでは、JavaScriptはいったい何をする言語でしょうか。

JavaScriptとは、簡単に言うとWEBページに動きをつけるプログラミング言語です。JavaScriptを使うことによって、ユーザーのアクションに応じたコンテンツを表示することができます。

ちなみに、よくJavaScriptと混同されがちなのがJAVAです。JavaScriptは開発当初、LiveScriptという名前でしたが、当時人気だったプログラミング言語のJAVAにあやかって「JavaScript」という名前に変更されました。名前は似ていますが、この二つは全く別の言語です。

具体的にJavaScriptってどんなことができるの？

JavaScriptでできることは多岐にわたります。全部を紹介することは難しいですが、少し例をお見せすることでざっくりイメージをつかんでもらえればと思います。

アラート表示の例

<button  onclick="alert('ボタンをクリックしました');"></button>

まずは特にシンプルなJavaScriptの例、アラート表示の見本をお見せしました。クリックすると「ボタンをクリックしました」というアラートが表示されますね。この例では、HTMLタグにonclick属性を追加してJavaScriptを指定しています。

コンテンツを切り替える例

<script>
function sample01(){
	document.getElementById("txt01").innerText = "変わりました";
}
</script>
<button onclick="sample01();">クリックしてください</button>
<p id="txt01">この文字が変わります。</p>

こちらの例ではクリックした際にボタンの下の文字を切り替えています。

また、JavaScriptはCSSと同様、外部ファイルにすることでHTMLと切り離し、より柔軟で効率の良い管理ができます。

このように、JavaScriptはユーザーの動作（ボタンクリック）に対してアラートを返す、コンテンツを切り替える、など、インタラクティブな動きを加えることができます。このサイトでも、いろいろなところにJavaScriptを使っていて、例えば、ヘッダーのハンバーガーメニューボタンをクリックして、サイトのグローバルメニューを表示させたり、スクロールしたときにヘッダーの表示を切り替えたり、ブログ記事のスクロール位置によって、右側にあるエレベーターメニューの表示を切り替えたりしています。

05まとめ

WEBページを構築するコンピューター言語、HTML、CSS、JavaScriptの役割の違いを簡単に説明しました。最後に改めてそれぞれのできることを通しで振り返ってみたいと思います。

HTMLで文章を構造化する

HTML

<p>HTML、CSS、JavaScriptの<br>役割がわかりましたか？</p>
<ul>
    <li><button>Yes</button></li>
    <li><button>No</button></li>
</ul>

出力結果

CSSでスタイルをつける

上で作ったHTMLにスタイルを追加します。

HTML

<p class="sampleTit01">HTML、CSS、JavaScriptの<br>役割がわかりましたか？</p>
<ul class="sampleList01">
    <li><button>Yes</button></li>
    <li><button>No</button></li>
</ul>

CSS

.sampleTit01 {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	color: #28536B;
	text-align: center;
	margin-bottom: 10px;
}
.sampleList01 {
	text-align: center;
}
.sampleList01 > li {
	display: inline;
}
.sampleList01 > li:nth-child(n+2){
	margin-left: 10px;
}

出力結果

JavaScriptでインタラクションをつける

最後に、ボタンを押したときの動きを追加します。

HTML

<p class="sampleTit01">HTML、CSS、JavaScriptの<br>役割がわかりましたか？</p>
<ul class="sampleList01">
    <li><button onclick="alert('やったね！');">Yes</button></li>
    <li><button onclick="alert('これから覚えよう！');">No</button></li>
</ul>

サンプルのボタンを押してみてください。それぞれ別のアラートがあがりましたね！

このように、HTML、CSS、JavaScriptの3つを使って、WEBページを作ることができます。中でも基本となるのは、HTMLとCSS、この2つですね！！次回以降、これから始める初心者のみなさんに向けて、HTMLとCSSの基礎について記事を書いていきたいと思います。