よく聞く「HTML」って一体何!? Webページの裏側の技術

「HTMLってよく聞くけど、そもそもこれって何？」そんな疑問を持つ方も多いのではないだろうか。

HTMLは、Webページの作成するのに必要となる言語で、数多くのコンピュータ言語の中でもベーシックなもの。

習得難易度も低く、プログラミング初心者にオススメされている。

今日はHTMLを筆頭に、Webページ制作に必要な技術、仕組みを紹介したい。

HTMLとは

まずはじめにHTMLとは、「Hyper Text Markup Language」の略。

なんのこっちゃ？と思うかもしれないが、Webページ作成のために開発された言語だ。

ほとんどのWebページにHTMLが使用されており、Web開発において重要な役割を担っている。

「Hyper Text」とは、ハイパーリンクを埋め込めるテキストのこと。

ハイパーリンクとは、別のページに移動できる通称「リンク」と呼ばれているもの。

「Markup」とは、「見出し」や「強調」などの印づけ(マークアップ)ができることを指している。

Webページは、元をただせば、ただの文章の羅列にすぎない。

そこにHTMLのタグをつかってマークアップすることで、見やすいサイトになるようにブラウザに指示が出すことができる。

ゆえにHTMLは、コンピュータ言語の中でも「マークアップ言語」というカテゴリーに分類されている。

HTMLの書き方だが、文書を「開始タグ」と「/終了タグ」で囲むことで行う。

たとえば、見出しだったら、<h2>と</h2>で囲ってあげる。

HTMLでできること

HTMLでできることの1つ目は、「静的Webサイト」の制作。

「静的」なWebサイトとは、誰がいつ表示しても同じ様に表示されるサイトを指している。

ユーザーがどんな操作をしても、Webサイトの表示に変化はない。

たとえば、ショッピングカートの更新といったことも行うことはできない。

そういった変化を加えたいのであれば、「動的Webサイト」を作成する必要があり、HTMLに加えてJavaScriptを使用する必要がある。

HTMLでできること2つ目は、「HTMLメール」の作成。

HTMLメールは、画像やリンクなどを組み込んだメールのこと。

単純な文字列が並ぶメールよりも見やすいことが特徴だ。

HTMLメールは、企業のダイレクトネールや、メールマガジンに利用されることが多い。

HTMLでできること3つ目は、「Webアプリの基本コーディング」。

Webアプリとは、Webブラウザ上で動作するアプリケーションを指し、GmailやYouTubeも、Webアプリ。

こういった世界的に有名なWebアプリも、HTMLによって作成されている。

HTMLを学ぶには

ひろゆきさんもオススメしているのが「とほほのWWW入門」で、無料で学ぶことができる。

とほほのＷＷＷ入門

さて、そんなHTMLだが、綺麗で見やすいWebサイトを作るためには、CSSというものがかかせない。

CSSとはどんなもので、何が作れるのかを紹介したい。

CSSとは何か

Webサイトの構築において、HTMLと並んで重要なのが「CSS」。

CSSとは「Cascading Style Sheets」の略称で、後半の文字をとって「スタイルシート」とも呼ばれている。

HTMLはマークアップすることでコンピュータに指示を出している。

一方のCSSは、HTMLで作られたWebサイトに対して文字のデザインを整えるといった「スタイル」をつけることができる。

CSSはHTMLを装飾するためのものなので、HTMLとセットで用いるのが一般的だ。

CSSを活用することで、文字の大きさや色の変更、配置の変更も行うことができ、より見やすいWebページを作成することができる。

そしてCSSは、プログラミング言語のなかで、「スタイルシート言語」に分類されている。

CSSでできること

CSSでできること1つ目は、「Webページの装飾」。

HTMLだけで作成したWebページは、ただ単にテキストや画像が並んだ素っ気ないもの。

そんなWebページをCSSで装飾をすることで、メリハリのある読みやすいWebページに変えることができる。

たとえば、以下のような装飾機能がある。

・文字を太字にする
・文字の色を指定する
・文字のフォントを指定する
・背景色を指定する
・ボタンを配置する
・グラデーション背景
・カードのようなデザイン

CSSでできること2つ目は、「アニメーション」の作成。

文字が遅れて表示されたり、マウスオーバーすると画像が動いたりといった、簡単なアニメーションをつけることができる。

複雑なアニメーションを作りたい場合は、後述するJavaScript（またはPHP）を組み合わせる必要がある。

CSSでできること3つ目は、「共通パーツ」の制作。

Webサイトの統一感を出すには、全てのWebページに同じスタイルを適用する必要がある。

1ページずつにスタイルを適用していくのは時間がかかり大変だ。

そこで活躍するのが「共通パーツ」で、一度作っておくと、それぞれのHTMLから呼び出すことで、簡単に同じスタイルを適用することができる。

共通パーツのCSSを変えるだけで、そのCSSを適応している全てのWebページに対して変更を加えることもできるので、のちのちのメンテナンスも楽になる。

つぎに、これまでに何度かでてきたJavaScriptについて紹介したい。

JavaScriptとは

JavaScript（ジャバスクリプト）とは、主にWebサイトに動きをつけるプログラミング言語。

動的にコンテンツを更新したり、マルチメディアを管理したり、その他にも多くのことができる。

ぼくたちが普段使っているスマホやパソコンで見る多くのサイトに、このJavaScriptが使われている。

プログラミング言語のなかでも「スクリプト言語」に属し、「スクリプト言語」とはアプリケーションソフトウェアを作成するための簡易的なプログラミング言語のこと。

ブラウザーによって「HTML」や「CSS」が翻訳されたあとで、「JavaScript」が実行される。

JavaScriptでできること

JavaScriptを使って、具体的に何ができるかというと、以下のようのことを実装することができる。

・動きのあるWebサイトの作成
・ポップアップの表示
・スプレッドシートと連携した業務効率化
・シンプルなチャット
・チャットボットの作成
・送信フォームの入力チェック
・非同期通信機能の作成
・ブックマークレットの作成
・Chrome/Firefoxにおける拡張機能の作成（プラグイン）
・スマホゲームの動的機能
・Webアプリにおける動的機能の実装
・スマホアプリにおける動的機能の実装
・カレンダー
・電卓
・ビンゴマシン
・パズルゲーム

おわりに

いままでなんとなく理解していた「HTML」や「CSS」だが、あらためてまとめると、それぞれの違いが明確になった。

現在はシンプルなチャット作りをしており、JavaScripにも入門しているのでJavaScripもとりあげた。

これら3つはWebページ作りの基礎となるものなので、しっかりとマスターしたい。