HTML・CSS・JavaScript

HTML・CSS・JavaScript

Webページの基本要素(HTML・CSS・JavaScript)

サイト(ホームページ・Webページ)を作るにあたって、いろいろな基本事項や技術がありますが、これだけは押さえておきたいという基本要素があります。
それが、次の3つです。

 

  • HTML(構造)
  • CSS(デザイン)
  • JavaScript(動き)

HTMLとは

HTML(HyperText Markup Language)は、サイトの文書を記述するために開発されたマークアップ言語の1つで、文書の構成をわかりやすくするものです。
インターネット上で情報を共有するために、個々のコンピューター環境に依存しない統一的な規格となっています。

 

HyperText

HyperText(ハイパーテキスト)とは、情報同士を結び付けるハイパーリンク機能を持ったテキスト文書のことです。
テキストというと、テキストファイルがありますが、普通のテキストファイルと違い、文書からリンクによって他の文書に移動して情報をたぐることができたり、画像や動画をある文書に埋め込んだりすることができます。
これらの機能は、テキストファイルにはないことから、ハイパーテキスト(テキストを超えたテキストファイル)という意味で使われています。

 

Markup

Markup(マークアップ)とは、文書に「しるし」をつけることです。
なぜ「しるし」をつけるのかというと、
これは章のタイトルですよ
これは段落ですよ
ここで改行ですよ
これはリストですよ
ここは表ですよ
ここは画像になっていますよ
ここは動画が埋め込まれていますよ

といったことを示すためです。
こうすることによって、その部分が文書全体の中で、どんな役割や意味合いをもっているのかがわかるようにしてあるのです。

 

そのために該当する部分の始めと終わりに「タグ」と呼ばれる「しるし」をつけて、意味付けをします。

 

たとえば、

<p>本日は、晴天なり。</p>

 

これは、開始タグ(start tag)<p>終了タグ(end tag)</p>に挟まれた部分に「段落」という意味を持たせている例になります。
そして、このタグに囲まれた部分を要素内容(コンテンツ・content)と言い、開始タグ(start tag)・終了タグ(end tag)・要素内容(コンテンツ・content)を合わせた全体が要素(Element)と呼ばれます。

 

つまり、例示の場合だと

<p>本日は、晴天なり。</p>

で一つの要素(Element)になります。

 

Language

Language(言語)は、文法、つまり決まりごとということになります。
つまり、HyperTextの文書の中で、どこがタイトルで、どこが段落でといった構造がどうなっているのかを明確にするために、要素の前後にタグをつけて Markup つまり「しるし」をつけますが、その「しるし」をつけるルールLanguage(言語)になります。

CSSとは

CSS(Cascading Style Sheet)は、HTML文書をレイアウトしたり修飾を施したりするための言語です。
CSSはひと言で言ってしまえば、文書の見栄え(レイアウトやデザイン)に関する情報を定義するものです。

 

もし、HTMLだけでサイトを作ろうと思えば、作れなくはありません。しかしそれでは、何のレイアウトも修飾もないサイト(Webページ)になってしまいます。
テキストファイルを思い浮かべればわかりやすいかと思います。テキストファイルはただ最初から文字が打ち込んであるだけで、文字色の変化も太字や下線もありません。
しかし、そんなサイト(Webページ)はほとんどなく、クールなデザインが施されていたり、強調したいところの文字は大きくなっていたり色が変わっていたりします。
これを実現させているのが、CSSになります。

 

骨組みのHTML、外装内装のCSS

HTMLとCSSは、建築物で喩えるなら、構造を表す骨組みのHTMLと、デザインを表す外装内装のCSSと言えます。
もし、HTMLだけのサイト(Webページ)であれば、ちょうど鉄骨鉄筋で骨組みを組んで、コンクリートをはめ込んだだけの打ちっぱなしの建物のような感じといっても良いでしょう。

 

CSSのセレクタ・プロパティ・値

CSSは、基本的には、”セレクタ””プロパティ””値”にするというように書かれます。

 

簡単な事例を1つあげてみると次のようになります。

 

h1 { color : green ; }

 

h1 の部分は、セレクタと呼ばれ、スタイルを適用する対象となっています。
color の部分は、プロパティと呼ばれ、指定するスタイルの性質(色や大きさなど)になります。
green の部分は、で、プロパティごとに決められている値になります。

 

例示では、h1要素の文字を対象にして、文字の色というスタイルを、緑色にするということになります。

JavaScriptとは

JavaScriptは、主にWebブラウザ上で動作するプログラミング言語です。
HTMLとCSSで作られたサイト(Webページ)で、静的な表現のサイト(Webページ)は作成することができますが、例えば、現在時刻を表示させたり、クリックしたときにアラートを表示させたり、メールフォームから入力した内容を送信させたりといった動的な表現が入ったサイト(Webページ)を作成するには、JavaScriptが利用されます。

 

JavaScriptを使うと、目立たせたいボタンやメニューに「アニメーション」や「効果」を追加したりできるので、利便性を上げることができます。
JavaScriptは、マウスの動作やクリックされたという動作を「イベント」として取得します。

 

JavaScriptでできることの一例
JavaScriptのプログラムでできる動的操作はいっぱいありますが、例えば例を示すと次のようなものがあります。

 

  • メニューのボタンを押すと滑るように該当箇所へ移動する。
  • 複数枚の画像がスライドして表示する
  • フォームの入力項目などを「追加する」ボタンで増やす
  • メニュー等をボタンで出し入れする
  • 買い物サイトで料金を試算する

 

これらはほんの一例で、さまざまな動的動作ができるようになります。
JavaScriptを利用することで、HTMLの要素や属性値を変更したり、CSSのプロパティを変えたり、条件に合わせて処理を行ったり行なわなかったりすることが決めれます。