Webサイトを作るためには、HTMLファイルを作成する必要がありますが、このHTMLファイルを作成するために必要なのがHTML、CSS、JavaScriptに関する知識です。
昔は機能が重複するところもありましたが、今は役割が明確になりつつあり、機能も棲み分けが進んでいます。
Webサイトの製作者が必ず知っておくべき基本的な情報を紹介します。
HTML、CSS、JavaScriptのそれぞれの役割
まず初めに、HTML、CSS、JavaScriptのそれぞれの役割を概説します。
HTML
HTML（HyperText Markup Language）は、HTMLファイルを作る上で最も大切なものです。
HTMLの役割は、Webページの表示の仕方や構造をブラウザに指示することにあります。
たとえば<h1></h1>タグで囲まれた内容は見出しとして大きなテーマとして認識されますし、<p></p>や<div></div>で囲まれた内容はひとつの段落やまとまりとして扱われます。
<strong></strong>で囲まれた内容は太字などで強調表示されます。
インターネット上のWebページから、検索エンジンは構造や重要な内容を読み取って紹介しています。
そのため、HTMLはWebページを作る上でもSEO上でも最も大切な言語です。
【無料あり】エンジニアが解説！プログラミングスクールおすすめ５選CSS
CSS（Cascading Style Sheets）はHTMLの表示の仕方を操作するための言語です。
HTMLファイルにも、最低限のデザインのためのタグが用意されてはいますが、HTMLの本来の目的は文章の表示と構成です。
そのため、デザインの部分は切り離して別途加工できるようにしたのがCSSです。
以前のCSSは文字や背景などの操作が基本でしたが、最近のCSSは機能の拡張によってレイアウトやユーザーインターフェースにも大きく貢献するようになっています。
パソコンやスマホなどデバイスの違いを吸収して使いやすく表示するレスポンシブデザインはCSSによる機能です。
JavaScript
JavaScriptは、Webページの表示に動きをつけるための言語です。
HTMLやCSSと比較して、プログラミング言語としての機能を備えており、関数や配列などを扱うことが可能です。
最大の特徴はブラウザで処理することができることで、オフラインでも動作することです。
文字を動かしたり、色を変化させるなどが主な機能として使われていましたが、今は様々な技術革新により実現できる機能が日々増えています。
再読み込みをせずに画面の表示を変えたり、アコーディオン式やスライド式のメニュー表示、フォームにおける表記チェックなどが代表的ですが、プログラミング言語としてゲームやアプリの作成にも用いられます。
Webコンテンツを作成する際の考え方
Webのコンテンツを作成する際に、上記の言語を上手に使い分けることで制作を効率化することができます。
HTMLを準備する
まず、最初に行うべきはHTMLでページを作成することです。
最初は地味で面白くありませんが、構造がしっかりできているサイトほど検索エンジンの評価も高く読みやすいサイトになります。
その後の作業も楽になりますので、構成がわかりやすいようにHTMLを書きましょう。
CSSとJavaScript
HTMLができたら、次にCSSとJavaScriptを作ります。
CSSから作るのが一般的ですが、JavaScriptの機能によってはどちらを先にしても構いません。
CSSでデザインを定義することで、今後デザインの変更が必要な時もCSSの変更だけで済むので便利です。
JavaScriptは、基本的にWebページを使いやすくしたり、演出を加えるためのものです。
JavaScriptからHTMLやCSSを操作することも可能ですので、どのような機能を加えるかを考えてからプログラムを作成しましょう。
不必要にJavaScriptを増やすとプログラムのミスからページ全体が表示されなくなったり、ページの読み込みが遅くなることがあるので、必要最小限を心がけましょう。
SEOを意識した使い分け方
SEO（検索エンジン最適化）を考えた場合には、次のような形で考えるのがベターです。
HTMLにデザイン要素を入れない
検索エンジンは、ページ内のタグからページの構造を読み込み、その中のテキストの重要度などの情報をもとに順位の評価をしています。
この時、HTMLにデザイン要素を入れても検索エンジンでは評価されることはなく、むしろ余計な情報が付加されていると判定されます。
たとえばHTMLで赤字にしても、検索エンジンはそれが重要だからなのかデザインなのかわかりません。
そのため、デザインに関する要素はCSSに任せてしまうのが一番です。
重要な内容はJavaScriptに入れない
JavaScriptによるDOM機能（Webページの文字などを操作する機能）を使って、様々な表現をすることが可能です。
しかし、SEO上はHTMLの中のテキストが優先され、JavaScriptのコード内のテキストはそれほど評価されません。
たとえばクイズなどで、回答・解説をJavaScriptによって表示すると、その部分のテキストの情報量が多いとしてもさほど評価されないのです。
基本的にはHTMLでテキストを扱う情報は作成し、CSSやJavaScriptで表示状況を操作するのが良いでしょう。
読み込み速度を考えて作成する
最近はネットの速度が高いため、あまり意識されませんが、検索エンジンはページの読み込み速度も大事な項目と考えています。
HTMLはページごとに違っても、CSSやJavaScriptは共通のものを読み込ませていることも多いです。
Webサイトの規模が大きくなるほど１つ１つのページでは不必要な機能を読み込んでしまうことになり、表示速度が遅くなってしまいます。
そのため、CSSやJavaScriptは利便性を考えながら小分けにし、ページに必要なものだけを読み込むようにした方が評価されます。
WebサイトでのHTML、CSS、JavaScriptの使い分けまとめ
HTMLとCSS、JavaScriptは、それぞれ機能や役割が違っています。
それぞれの利用目的や機能をよく考えてWebサイトを制作すると、編集も楽になりますし、検索エンジンからの評価も高まります。
コードの書き方だけでなく、その意味もよく考えてWeb制作を行いましょう。