HubSpot Marketing Blog

2017年05月11日

Webデザインの基礎: HTML、CSS、JavaScriptの仕組みについて

執筆者: | @

Coding.pngウェブサイトって、どうやって動いているのだろう、と不思議に思うこともあるけれど、Facebookに写真をアップするよりも難しいことはやらない...

という人も、決して少なくないと思います。

プログラミングの経験がない人にとって、ウェブサイトのレイアウトやデザインなどをすべて自分で作成することは、恐ろしくややこしいことのように思えるはずです。2010年のアメリカ映画、「ソーシャルネットワーク」をご覧になりましたか?

ハーバード大学の学生が大きなヘッドフォンを付けて、コンピュータに向かってキーボードを叩いている。あれを想像しただけで「自分にはムリ」と思ってしまうかもしれません。

ですが、意外なことに無理じゃないんです。

プログラミングは、外国の言葉を学ぶのと同じように誰でも学習できます。実際、外国語を話すのとよく似ていることから「プログラミング言語」と呼ばれています。プログラミング言語のそれぞれに規則や構文があり、それらを1つずつ理解していく必要があります。

この規則を利用して、コンピューターに実行させたい動作を伝えるのですが、Webプログラミングの場合なら、ブラウザに実行させたい動作を伝えるために、この規則が必要になります。

マーケティング担当者が知っておくべきHTML編集のコツ

今回の記事の目的は、HTML、CSS、そして最も主要なプログラミング言語であるJavaScriptの基本的な知識についてわかりやすく解説することです。ですがその前に、プログラミング言語とは何かについて、もう少し詳しく説明したいと思います。

また、Tech 2 Goさんのこちら「HTML初心者必見!Webページの仕組みをわかりやすく説明!」でHTMLの仕組みを解説されています。

プログラミング言語の簡単な説明

プログラミング(コーディングとも言います)は、パズルを解くのと似ています。フランス語やアラビア語などの言語を使用して、文章を完璧に翻訳するというパズルを解くとすれば、プログラミング言語の場合は、ウェブページを思いどおりに作成したり、ページを移動するためのオブジェクトを作成するというパズルを解くことになります。

ですから、たとえば「ユーザーがこのボタンをクリックすると、ユニコーンが画面をアニメーションで移動するウェブページを、このヘッダーとフォントと、これらの色と画像を使用して作ってください」と依頼されれば、Webデザイナーはその内容を部分ごとに細かく分割し、それぞれをコンピュータに理解できる「命令」に変換して、規則に従い正しい順序で命令を並べていきます。

画面に表示されるウェブページはすべて、このように命令を正しい順序で並べて作成されています。その命令を理解し、画面に何かを表示したり、ユーザーが何かを操作したりできるように変換するのが、Chrome、Firefox、Safariをはじめとするブラウザーの役目です。

ブラウザー無しでは、プログラムはただのテキストファイルに過ぎません。ブラウザーにテキストファイルを渡して初めて、その魔法を目にすることができるのです。ウェブページを開くと、ブラウザーはHTMLとそれに必要な他のプログラミング言語を読み込み、変換を開始します。

HTMLとCSSは、実際にはページの構造やスタイルを記述したデータですので、厳密に言えばプログラミング言語には含まれません。

ですが、ウェブページやアプリケーションの画面で私たちが実際に目にするのはHTMLとCSSですので、その基礎を理解してからJavaScriptやその他の言語に進む方がわかりやすいと思います。

1990年の初めごろまで、ウェブサイトではHTMLしか使用できませんでした。そのため、ウェブ開発者は大変な苦労をして、ウェブページを1つずつコーディングしていました。

その後、状況は大きく変化し、今では数多くのコンピュータ言語を選んでプログラミングに使用することができます。この記事ではHTML、CSS、そして最も主要なプログラミング言語であるJavaScriptについて解説します。

HTML、CSS、そしてJavaScriptとは

まずは概要から:

  • HTMLにはサイトの基本的な構造を記述します。この記述をCSSやJavaScriptなどのテクノロジーによって拡張および変更することができます。
  • CSSは表示やフォーマットやレイアウトを制御するために使用します。
  • JavaScriptはさまざまな要素の動作を制御するために使用します。

それでは、この3つについて詳しく説明していきましょう。それぞれがウェブサイトでどのような役割を持ち、互いにどう連携するかを理解してください。まずはHTMLからです。

HTML

どれほど複雑であろうと、どれほど多くのテクノロジーが取り入れられていようと、ウェブサイトは必ずHTMLを中心に作成されます。ウェブコンテンツの作成方法を学ぶすべての人が、まずはHTMLを理解することから始めます。そしてありがたいことに、HTMLは驚くほど簡単に習得することが可能です。

HTMLはHyperText Markup Languageの略です。「マークアップ言語」とあるように、HTMLでは、プログラミング言語を使用して関数を実行するというよりも、タグを使用してコンテンツの識別を行います。

わかりやすく説明するために、下の画像をご覧ください。仮に、このページの各コンテンツに、種類を識別するためのラベルを付けるように言われたとすると、皆さんは「一番上にあるのがタイトルで、次にサブタイトルがきて本文が続き、その下に画像が並んで、最後にもう少しだけテキストが表示される」と簡単に答えられると思います。

magazine-page-example

これとまったく同じことを、コードを使用して行うのがマークアップ言語です。コーディングにはHTMLタグを使用します(「要素」とも呼ばれます)。HTMLタグにはヘッダータグ、段落タグ、画像タグなど、非常にわかりやすい名前が付けられています。

ウェブページを作成する際には莫大な数のHTMLタグを使用し、ページに含まれるコンテンツの種類を記述していきます。ページ内のコンテンツの種類は、HTMLタグで「入れ子」を作成しながら(つまり外側のHTMLタグの内部に)記述します。

たとえば、皆さんが今読んでいるのは段落(パラグラフ)の一部ですが、仮にこのウェブページを自分で(HubSpotのCOSに含まれるWYSIWG形式のエディタを使わずに)コーディングするなら、この段落の先頭には

という段落開始タグを入れる必要があります。この大なり小なりの括弧がタグであることを表し、「p」の文字によって、これから(他の種類のコンテンツではなく)段落が始まることを、コンピューターに伝えることができます。

開始タグを置いたら、終了タグを入れるまで、それに続くコンテンツはすべてそのタグの一部として認識されます。段落を終了するには、段落終了タグである

<p>This is a paragraph.</p>

を追加します。終了タグは、小なり括弧の後にスラッシュがあることを除けば、開始タグとまったく同じです。下の例をご覧ください。

これは段落です。

HTMLを使用すると、タイトルの追加や段落の書式設定、改行の追加、リストの作成、テキストの強調表示、特殊文字の作成、画像の追加、リンクの作成、テーブルの作成、スタイルの制御など、さまざまな処理を行うことができます。

HTMLのコーディングを習得したい方には、HubSpot(ハブスポット)によるこちらの記事(英語)、および無料で利用できるcodecademyのクラスと教材をお勧めします。ですがその前に、CSSの説明をご覧ください。

CSS

HTMLではウェブサイトの基本構造を定義しますが、CSSではウェブサイトの全体的なスタイルを定義します。ウェブサイトの滑らかな色彩や面白いフォント、背景の画像などを、すべてCSSで指定することができます。

ウェブページ全体の雰囲気や印象を変えることができる、非常にパワフルなツールですので、ウェブ開発者には必須のスキルと言えます。また、ウェブサイトをサイズの異なる画面や、さまざまな種類のデバイスで使用する際にも、CSSを使用して表示を調整することができます。

CSSの役割をわかりやすく説明するために、スクリーンショットを2つお見せしたいと思います。最初の画像は同僚のブログ記事をHTMLの基本機能だけで表示したものです。2つ目の画像は、同じブログ記事をHTMLとCSSを使用して表示しています。

HTMLだけを使用:

Basic-HTML-1

コンテンツはすべて表示されますが、スタイルが壊れていることがわかります。ウェブサイトにスタイルシートが読み込まれていなければ、理由はともかくこのように表示されます。次は、同じウェブページをCSSを使用して表示した画面です。

HTMLとCSSを使用:

CSS-1

こちらは綺麗に表示されています。

要するに、CSSはHTMLタグにさまざまな特性を指定するための規則を集めたものと理解してください。特性は1つのタグにも、複数のタグにも、ドキュメント全体にも、あるいは複数のドキュメントにでも指定することが可能です。

CSSが開発された背景には、フォントや色などのデザイン要素が登場した際、WebデザイナーがHTMLにそれらを採用するのに非常に苦労したという事情があります。

HTMLが開発されたのは1990年のことですが、当時は現在のようにフォーマットを指定することはなく、HTMLはヘッダーと段落を区別するなど、コンテンツの構造を定義する目的で作られていました。

そのため、新しく登場したデザイン要素をHTMLで処理するのに非常に手間がかかり、それを解決するために、CSSが1996年に開発および発表されました。要するに、HTMLドキュメントからすべてのフォーマット情報を取り除き、それをCSS(.css)ファイルに入れたというわけです。

CSSはCascading Style Sheetの略ですが、なぜそのような名前が付けられたのでしょうか。この「スタイルシート」はCSSのドキュメントそのものを指します。ウェブブラウザーには必ずデフォルトのスタイルシートが用意されるため、ウェブページには少なくとも1つのスタイルシートが使用されることになります。

つまり、ウェブページの作成者がスタイルシートを適用するかどうかに関係なく、ページの訪問者が使用するブラウザーのデフォルトのスタイルシートは必ず使用されます。

たとえば、私のブラウザーのデフォルトのフォントスタイルは、サイズが12のTimes New Romanですので、私が訪問するウェブページで作成者がスタイルシートを何も適用していなければ、そのページはサイズ12のTimes New Romanで表示されます。

ウェブページがサイズ12のTimes New Romanで表示されることはほとんどありません。その理由は、ウェブページの作成者たちが、デフォルトのスタイルシートのほかに自作のCSSを作成して適用し、ブラウザーのデフォルト指定をオーバーライドしているからです。

Cascading Style Sheetsの「カスケード(階段状に連続する滝)」 は、この仕組みを表しています。つまり、滝の水が途中の岩にぶつかりながら落ちていき、最後の岩によって方向を決めて川を流れていくのと同じように、最後に定義されたスタイルシートが優先されて、ブラウザーがウェブページをどのように表示するかが決まるというわけです。

CSSのコーディング方法を習得したい方にも、先ほどのcodecademyによる無料のクラスや教材をお勧めします。ですがその前に、JavaScriptについて少し説明しますので引き続きご覧ください。

JavaScript

JavaScriptはHTMLやCSSよりも複雑です。ベータ版がリリースされたのも、1995年になってからのことですが、現在では、すべてのウェブブラウザーがJavaScriptをサポートしており、ほぼすべてのウェブサイトで、パワフルまたは複雑な機能を追加するために使用されています。

簡単に言えば、JavaScriptはインタラクティブなウェブサイトを開発するためのプログラミング言語です。ウェブページで実行されるダイナミックな動作のほとんどは、JavaScriptを使用し、ブラウザーによるデフォルトのコントロール機能や動作を拡張して作られています。

たとえば、画面に小さいウィンドウがポップアップ表示されるのも、JavaScriptの機能の1つです。オンラインフォームに情報を入力すると、確認画面がポップアップ表示され、「OK」または「キャンセル」のボタンをクリックするよう要求されますが、これはJavaScriptのコードで「if ... else ...」の構文を使用して、ユーザーが「OK」をクリックすれば何らかの処理を実行し、「キャンセル」をクリックすれば別の処理を実行するよう、コンピューターに命令しているからです。

もう1つ、JavaScriptによるアクションの例として、このブログ記事でも使用しているスライドインCTAを紹介します。スライドインCTAは、ユーザーが画面を、最後のサイドバーが表示されるまでスクロールした後に、画面の右下に表示されます。そのようすを下の動画でご覧ください。

JavaScript-SlideIn

ほかにもセキュリティパスワードの作成や、フォームの入力内容のチェック、インタラクティブなゲームや特殊効果の作成を、JavaScriptを使用して行うことができます。また、モバイルアプリやサーバーベースのアプリを作成するためにも使用されます。

JavaScriptをHTMLドキュメントに追加するには、JavaScriptのコードで作成した「スクリプト」を、ドキュメントのヘッダーまたはボディに挿入します。

JavaScriptについて詳しく理解したい方は、codecademyにJavaScriptの無料コースも用意されていますので、利用してみてください。

プログラミングの習得で最も大変なのは、手始めの部分だと思います。基本さえ理解してしまえば、より複雑なプログラミング言語でも簡単に使えるようになるでしょう。もし途中で嫌になってしまったら、hackertyper.netに移動して、キーボードをとにかく叩いてみてください。きっと気分が楽になるはずです。

またHubSpot(ハブスポット)のようなツールでは、HTMLの専門的な知識がなくともレイアウトの調整が可能な機能を持ち合わせています。ご興味のある方はお試しください。

マーケティング担当者が知っておくべきHTMLの編集のコツについてはこちらからダウンロードできます。

マーケティング担当者が知っておくべきHTML編集のコツ

画像クレジット: Mark Monckton Photography

編集メモ:この記事は、2014年10月に投稿した内容に加筆・訂正したものです。Lindsay Kolowichによる元の記事はこちらからご覧いただけます。

トピック: デザイン

メルマガ登録

コメント

申し訳ありません。過去のコメント履歴が削除されてしまいました。何か疑問やご質問がある方はこちららどうぞ。疑問や質問をツイートするにはこちら。

コメント
X

全世界で30万人のマーケターが購読中

マーケティングの最新情報をメルマガで配信します