今回の記事ではマーケ担当者が知っておくべき、WEBサイトで使わている開発言語について簡単な説明していきたいと思います。
この言語がどのように記述されているかなどの実践的、技術的な内容ではなく、そもそも何の役割なの？という内容になっております。
まずは、最近のWEBサイトに多く使われている言語は

  • HTML
  • CSS
  • JavaScript

の3種類です。この記事ではそれぞれの言語について説明いたします。

HTML

HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）は、ハイパーテキストを記述するためのマークアップ言語の1つ。略してHTML（エイチティーエムエル）と呼ばれることが多い。

SGMLを元に開発された。World Wide Web (WWW)において、ウェブページ（1990年代後半頃からはコンテンツという語も利用されている。「中身」という意味の語であり、大層な意味は無い）を表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。

参照：https://ja.wikipedia.org/wiki/HyperText_Markup_Language

いろいろ書いておりますが、つまり、HTMLは

  • このページには何が書かれている？
  • タイトルは？
  • どこの文章に確認する？
  • どこから画像や動画を引っ張ってくる？
  • どこに移動する？

などが記述されております。Webサイトを表示させるための設計図や土台となるマークアップ言語です。

技術的には、ソースコードの保守性やSEOの知識が求められます。

CSS

Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カスケード・スタイル・シート、日: 段階スタイルシート[1]）は、HTML や XML の要素をどのように修飾（表示）するかを指示する仕様の一つで、World Wide Web Consortium (W3C) がとりまとめ勧告する。文書の構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートの具体的な仕様の一つ。


参照：https://ja.wikipedia.org/wiki/Cascading_Style_Sheets

CSSは土台や本文といったコピーに対して、飾り付けするための言語です。
HTMLで直接、色を付けたりすることもできますが、個別で作業を行うと、どうしてもミスなどが起こりやすいため、CSSとして別に記述することが多くなります。多くのサイトで使用されているCSS3は、複雑なアニメーションまで表現できます。
昨今のWEBサイトはレイアウトやアニメーションなどが複雑化し、CSSのソースコードが膨大かつ難解になってしまう場合が増えています。大規模なサイトでは、CSSをより簡素化して見通しの良いソースコードにする必要があります。

JavaScript

JavaScript（ジャバスクリプト）とは、プログラミング言語のひとつである。JavaScriptはプロトタイプベースのオブジェクト指向スクリプト言語であるが、クラスなどのクラスベースに見られる機能も取り込んでいる。

利用される場面はWebサイト・Webアプリ・バックエンド・デスクトップアプリ・モバイルアプリなど、ブラウザからサーバー、デスクトップからスマートフォンまで多岐にわたっている。

参照：https://ja.wikipedia.org/wiki/JavaScript

Wikiペディアを参照してみましたが、正直難しいと思います。 JavaScriptはHTMLを動的に書きかえたり、アニメーションやスライドショーを作ったりするために使用します。 少し曲解にはなりますが、リッチな今どきのWEBサイトを作るときにはJavaScriptが必須と覚えてください。

WEBサイトはHTMLとCSSのみで作成して公開することは可能なのですが、2つの言語だけで作成してしまうと、ページを移動したりするタイミングで、ページ全体を 1から再読込みすることになります。そこに、JavaScriptを加えることで、一部の読込データのみを読み込むなどの動きができます。そのため、通信データを削減することなどができます。

例えば…

FACEBOOKで　いいね！を押した時にいいねの数と色が変わると思います。この作業の時に、HTMLとCSSのみで記述してしまうと、サイト全体をいちいち読込ますが、JavaScriptがあるおかげで、いいねの数と色など変更がある部分の情報だけ読込み、変更を表示します。

また、最近ではJavaScriptの利用範囲が広く、ブラウザ上で動くだけでなく、サーバーサイドで動くNode.jsというJavaScript環境もあります。つまり、サーバー同士の通信を行う言語として、JavaScriptが利用されることもあります。
エンジニアやデザイナーでなければ、JavaScriptは何か行動を行うときに使われる仕組みと覚えていただければと思います。

まとめ

HTML WEBサイトでどこに何を置くかという設計図
CSS 彩りなどのデザインをきれいにする
JavaScript プログラムで動きなどリッチにするために使う

　簡易的にブラウザに表示させるためにHTMLを記述し、デザイン統一を図るためにCSSで彩り、動きやプログラムを走らせるためにJavaScriptを使うとなります。通信環境が整って来たことで、WEBページなどの制作はよりリッチに動きのあるものになっています。ただ、ユーザー側からすると容量をたくさん読込むサイトはあまり好まれないため、できる限り容量を減らすことも考えないといけません。

HPを作成する場合やリニューアルする場合はこちらをご参照ください。

他のWEB施策について知りたい方はこちら 

【最新の記事】