目標

ここでは、Webの3大重要要素であるHTML、CSSそしてJavaScriptの概要と関係について学習する。
それぞれの役割、上手に使うための作法等について理解する。

HTMLとは何かを理解する。HTMLでできることとできないこと、やるべきことやるべきではないことを理解する。また、構造化された文書とはどういうものかを理解する。
簡単なHTMLを書けるようになる。
SFC-CNSにおいて、HTML文書をWebで公開できるようになる。
CSSとは何かを理解する。CSSでできることとできないことを理解する。
JavaScriptとは何かを理解する。HTML+CSSでできないことで、JavaScriptでできることを理解する。

HTMLとCSSとJavaScriptの関係

文書の構造を表すHTML

HyperText Markup Language (HTML)は、World Wide Web (以下、Web)で使われる、コンテンツを表現するためのマークアップ言語である。
HTMLは文書の構造を記述するためのものであり、基本的にその表現方法（文字を大きくする、色を変えるなど）については規定していない。
Webでは「ハイパーリンク」を使ってWeb上のコンテンツをリンクしていくが、HTMLはこのための機能を有している。

HTMLはStandard Generalized Markup Language (SGML)の流れを組んでおり、1989年のTim Berners-Lee卿による Webの開発時期には曖昧な仕様のままリリースされた。
その後、1993年にInternet Engineering Task Force (IETF)によって標準化され、HTML1.0が策定された。
ただし、この仕様はインターネットドラフトのままで、RFCとして発行されることはなかった。
初めてきちんとした仕様として策定されたのは、1995年にHTML2.0として発行されたRFC1866である。
HTML2.0はIETFにおいて標準化が行われたが、その後は新しく発足した World Wide Web Consortium (W3C)がHTMLの標準化を担当することとなった。
HTMLはW3Cによって、HTML3.2、HTML4.0、HTML4.01と改版を重ね、2016年11月に勧告されたHTML5.1が最新のバージョンとなっている。
また、その間、HTML4.01をベースとし、XMLに沿った仕様としたXHTML1.0も開発されている。
XHTMLはその後、開発打ち切りとなっている。

文書を装飾するCSS

Cascading Style Sheets (CSS)は、HTMLによって記述された文書を表示（印刷、読み上げ、点字表現などを含む）する際、それぞれの要素をどの様に装飾するかを指示するための仕様である。
例えば、タイトル文字を大きくしたり、重要な単語に色をつけるよう指定することができる。

CSSは、Level 1からLevel 4まで存在しており、レベルが高いものは低いものの上位互換となっている。
それぞれ、CSS1, CSS2, CSS3, CSS4と呼ばれたりする。
CSS1は1996年に策定された。
現在、最も使われているのは CSS3 であるが、CSS 2.1をベースに機能をモジュール化して標準化されているため、いわゆる「CSS3の標準」を記述した単一の文書は存在しない。

文書に動きをつけるJavaScript

HTMLとCSSだけでは、基本的にユーザのクリック等のイベントに対して反応するような動きがあるページを作成することはできない。
このようなページを作成するためには、JavaScriptと呼ばれるプログラミング言語でプログラムを作成する必要がある。
JavaScriptは現在のところブラウザで動作することを前提に設計された唯一のプログラミング言語である。

JavaScriptは、Netscape社によって開発されたWebブラウザであるNetscape Navigator 2.0に1995年に初めて実装された。
その後、1997年に電気通信分野の標準化団体であるECMAインターナショナルによってECMAScriptとして標準化された。

先にも述べたとおり、JavaScriptはブラウザで動作することを想定したほぼ唯一のプログラミング言語である。
殆どのメジャーなWebブラウザがJavaScriptのインタプリタを実装しており、WebサーバからJavaScriptのプログラムを取得して実行する仕組みとなっている。
また、様々なApplication Programing Interface (API)がWebブラウザとの間で規定されており、Webブラウザを介してユーザによるクリックなどのイベントに反応したり、センサー情報を取得したりすることができるようになっている。

HTMLの基本

HTMLの構造

HTMLの文書は次のような構造をしている。
ここで1行目の「<!DOCTYPE html>」の部分は、この文書がHTML文書であることを示しており、2行目以降が文書の本体である。

HTML文書の例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>ここにタイトル</title>
  </head>
  <body>
    ここに本文
  </body>
</html>

HTMLでは、このように「<」と「>」で囲むことによってタグを記述する。
タグには一部の開始タグしか持たないものを除き、開始タグと終了タグが存在する。
例えば、下の例では3行目の「<head>」と6行目の「</head>」が組になっており、前者が開始タグ、後者が終了タグである。
開始タグは「<」で始まり、終了タグは「</」で始まるという決まりがある。

開始タグから終了タグまでを、HTMLでは要素と呼ぶ。
例えば3行目から6行目まではhead要素と呼ばれる。
開始タグしか持たないものは空要素と呼ばれ、それだけで要素として扱われる。
上記の例では、4行目の「<meta charset="UTF-8">」の部分は空要素で、それだけで要素となる。

要素の開始タグは、属性（プロパティ）を持つことがある。
上記の例の2行目の「lang="ja"」や、4行目の「charset="UTF-8"」が属性である。
それぞれ、lang属性、charset属性の様に呼ばれる。
等号(=)の右側の値は、属性の値と呼ばれる。
これらの属性は、開始タグに対して付加情報を与える時に使われる。

上記の例のように、HTML文書は「<!DOCTYPE html>」を除く全体がhtmlタグで囲まれていなければならない。
また、htmlタグの中にはhead要素とbody要素の2つの要素が存在しなけばならない。
2つの要素はそれぞれ、HTML文書のヘッダ情報（HTML文書自体を説明する情報）とHTML文書の本体部分となる。

head要素の中には、必ず1つのtitle要素がなければならない。
それ以外にmeta要素やbase要素などを含むことができる。

HTMLでは、要素は必ず入れ子構造になっていなければならない。
下記の良い例ではtag1の開始タグと終了タグがtag2要素を囲んでいるので問題ない。
しかし、悪い例ではtag1とtag2が互い違いになっているため要素が重なる形になっており、このような記述はHTMLではできない。

良い例

<tag1>
<tag2>
</tag2>
</tag1>

悪い例

<tag1>
<tag2>
</tag1>
</tag2>

様々なHTMLの要素

HTMLでは様々な要素が定義されている。
ここではそれらの要素について説明する。
ここで紹介する要素はほんの一部であり、それ以外にも沢山のタグが定義されている。
詳しくはHTML5のドキュメントなどを参照のこと。

見出し

見出しをつけるための要素は、h1〜h6要素である。
一番大きい見出しにh1要素を、一番小さい見出しにh6要素を使う。
例えばこの教材では、「HTMLとCSSとJavaScript」のところがh1要素、「1.目的」のところがh2要素で構成されている。

箇条書き

箇条書きには、ul要素やol要素を使う。
ul要素は番号無し箇条書き、ol要素は番号あり箇条書きである。
箇条書きの１つ１つの項目には、li要素を使う。

番号付き箇条書き

<ol>
  <li>１つ目の項目</li>
  <li>２つ目の項目</li>
</ol>

出力結果



１つ目の項目
２つ目の項目

番号無し箇条書き

<ul>
  <li>１つ目の項目</li>
  <li>２つ目の項目</li>
</ul>

出力結果



１つ目の項目
２つ目の項目

段落

段落を分けるためには、p要素を使う。
開始タグ「<p>」および終了タグ「</p>」によって括られた部分が１つの段落となる。

リンク

HTMLはその名のとおりHyperTextを作成するためのものであり、ある文書から別の文書を参照(リンク)することができる。
ある文書から別の文書を参照するためには、a要素を使う。
a要素には、href属性を指定する。
href属性の値にリンク先のURLを指定する。
次に例を示す。

次回の内容は<a href="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/ja/javascript_basics_and_event_model/">JavaScriptの基本とイベントモデル</a>です。

HTMLと文書構造

上でみてきたように、HTML文書は要素の組み合わせによって構成されている。
また、HTMLはその仕様の中で様々な要素が用意されている。
これらの要素を適切に使用することにより、文書の中身を、見出し、段落、箇条書き、ヘッダー、記事、フッター、補足情報などのように構造化することができる。

構造化された文書は、コンピュータにとって扱いやすい。
どの部分が見出しで、どの部分が一般的な記事なのかが要素によってわかるため、重要な部分を機械的に判断することができる。
また、画像などを入れる場合には代替属性を使うことにより、読み上げなどに対応することもできる。

HTML文書を作成する場合は、文書の構造に常に気を配っておくべきである。

Webページの公開とURL

Webページは、URLによって指定される。
URLは大きく、スキーム名、ホスト名、パス名で構成されている。
例えば「https://www.sfc.keio.ac.jp/about_sfc/」というURLでは、「https」がスキーム名、「www.sfc.keio.ac.jp」がホスト名、「/about_sfc/」がパス名となる。
ここで、「https」はWebサーバにアクセスするためのプロトコルを、「www.sfc.keio.ac.jp」はWebサーバのホスト名を表している。
「https」はHyperText Transfer Protocol Secure (HTTPS)と呼ばれるもので、正確にはHyperText Transfer Protocol (HTTP)をTransport Layer Security (TLS)と呼ばれるプロトコルの上で動作させる方法を示している。
また、「/about_sfc/」はWebサーバの中でのページの場所を示している。

SFC-CNSにおいては、「/home/ログイン名/public_html」に配置されたファイルが、Webサーバによって全世界に公開されるように設定されている。
例えば、「/home/ログイン名/public_html/hoge.html」というファイルは、「http://web.sfc.keio.ac.jp/~ログイン名/hoge.html」というURLで公開される。

CSSの基本

スタイルの指定とセレクタ

スタイルの指定

スタイルを指定するためには、スタイルのプロパティに値を設定する。
例えば、文字のサイズを示すスタイルのプロパティ名は「font-size」であり、これに対して文字の大きさとして「14px」のように指定をする。
具体的には次のように記述する。

font-size: 14px

また、複数のスタイルを指定する場合にはセミコロン（;）で区切って一度に指定することができる。
また、最後にセミコロンがあっても問題ない。

font-size: 24px; font-weight: bold;

セレクタ

スタイルをまとめて指定する際には、どの要素に対してスタイルを指定するのかを明確にする必要がある。
このために使われるのがセレクタである。
セレクタは複雑な指定をすることも可能であるが、基本となるのは要素名を指定するものである。
例えば、h5要素に対してスタイルを指定する場合は次のように記述する。

h5 {font-size: 24px}

ここで頭の「h5」の部分がセレクタで、この例ではh5要素に対してスタイルを指定していることを示している。
また、「{」から「}」までが、そのセレクタで指定された部分に適用するスタイルである。
ここでは、フォントサイズを14pxに指定している。
次のように、１つのセレクタに対して複数のスタイルを指定することも可能である。

h5 {font-size: 24px; font-weight: bold;}

また、同じスタイルを複数の要素に対して指定する場合はカンマ（,）でつなげることによって、一度に指定することが可能である。

ol, ul {font-size: 14px;}

クラスとセレクタ

先の例では、要素の種類によってスタイルを指定する方法を説明した。
それ以外にも、要素のclass属性によってスタイルを指定することもできる。

例えば、h5要素のうちclass属性に「important」が指定されているもののみ文字を赤くしたいとする。
この場合、次のように指定すればよい。
ここで、CSSの「.important」がクラスの値を示している。

HTML部

<h5>ここは普通の見出し</h5>
<p>文章</p>
<h5 class="important">ここは特に重要な見出し</h5>
<p>文章</p>

CSS部

h5.important {color: red;}

出力結果



ここは普通の見出し
文章
ここは特に重要な見出し
文章

また、要素名を省略して次のように書くこともできる。
この場合は、class属性に「important」が指定されていれば、h5要素以外の要素でも指定が反映される。

HTML部

<h5>ここは普通の見出し</h5>
<p>文章</p>
<h5 class="important">ここは重要な見出し</h5>
<p class="important">重要な文章</p>

CSS部

.important {color: red;}

出力結果



ここは普通の見出し
文章
ここは重要な見出し
重要な文章

IDとセレクタ

ある要素のみに対してスタイルを指定したい場合、id属性を使うことができる。
id属性はclass属性とはことなり、1つのHTML文書のなかで同じid属性を持つ要素が存在してはならない。

例えば、入賞者のリストのうち、最優秀賞1チームだけ文字を赤くしたいような場合は次のように指定することができる。
この場合、次のように指定すればよい。
ここで、CSSの「#mostexcellent」がidの値を示している。

HTML部

<dl>
<dt id="mostexcellent">最優秀賞</dt>
<dd>チームA</dd>
<dt>優秀賞</dt>
<dd>チームB</dd>
<dt>優秀賞</dt>
<dd>チームC</dd>
</dl>

CSS部

#mostexcellent {color: red;}

出力結果

最優秀賞: チームA
優秀賞: チームB
優秀賞: チームC

CSSの指定の仕方

CSSは先に述べた通り、HTMLで書かれた文書を装飾するためのものである。
このためHTMLとCSSは主従関係にあり、HTML側でどのCSSを使うかを指定しなければならない。
HTMLでCSSを指定する方法には、次の３つがある。
このうち、前者２つはセレクタとスタイルの両方を指定する必要があり、３つ目の「HTMLの要素にstyle属性を使って指定する方法」ではセレクタを使わずスタイルのみ指定をする。

CSSを別ファイルで用意し、そのファイルをHTMLから参照する方法

この方法はCSSを独立した１つのファイルとして用意し、そのファイルをHTMLからlink要素を使って参照する方法である。
CSSが独立したファイルとして存在するため、複数のHTMLファイルから同じCSSを参照することができる。
このことにより、複数のHTML文書ファイルから成るWebコンテンツでも、１つのCSSファイルを変更することによって全てのページの装飾方法を一度に変えることができる。
CSSファイルの中では、セレクタとスタイルを組みでを記述する。

HTML文書からCSSファイルを参照するためには、head要素の中で次のように指定する。
ここで「hoge.css」がCSSファイルのファイル名である。

HTML内でのCSSファイルの参照

...
<head>
  ...
  <link rel="stylesheet" type="text/css" href="hoge.css">
  ...
</head>
...

CSSファイル(hoge.css)の例

h5 {
  font-size: 24px;
  font-weight: bold;
}
p {font-size: 14px;}

CSSをHTML内に記述する方法

HTML文書の中にCSSを記述するためには、head要素の中でstyle要素を利用する。
style要素の中には、セレクタとスタイルを組みでを記述する。
このため、複数のファイルにまたがるスタイルの指定はできないが、同じタイプの要素や同じクラスの要素に対しては一度にスタイルを指定することができる。

実際の記述例を次に示す。

style要素によるCSSの指定

...
<head>
  ...
  <style>
    h5 {font-size: 24px; font-weight: bold;}
    p {font-size: 14px;};
  </style>
  ...
</head>
...

HTMLの要素にstyle属性を使って指定する方法

HTMLの要素毎にstyle属性を使ってスタイルを指定することができる。
この方法では要素ごとにスタイルを指定するため、同じタイプの要素や同じクラスの要素であっても、それぞれ個別にスタイルを指定する必要がある。

style属性によるスタイルの指定

...
<body>
  ...
  <h5 style="font-size: 24px; font-weight: bold;">見出し</h5>
  <p style="font-size: 14px;">段落1</p>
  <p style="font-size: 14px;">段落2</p>
  <p style="font-size: 14px;">段落3</p>
  ...
</body>
...

練習問題1-

html要素、head要素、body要素、table要素などを使ってHTMLで自分の時間割（予定）を作り、公開しなさい。
DOCTYPEの指定も忘れないこと。

また、W3CのMarkup Validation Serviceを使って、正しいHTMLが書けていることを確認しなさい。

練習問題1-

上記の練習問題で作成した時間割をCSSを用いて装飾しなさい。

また、W3CのCSS Validation Serviceを使って、正しいCSSが書けていることを確認しなさい。

情報基礎2

Fundamentals of Information Technology 2

HTMLとCSSとJavaScript

目標

HTMLとCSSとJavaScriptの関係

文書の構造を表すHTML

文書を装飾するCSS

文書に動きをつけるJavaScript

HTMLの基本

HTMLの構造

様々なHTMLの要素

見出し

箇条書き

段落

リンク

HTMLと文書構造

Webページの公開とURL

CSSの基本

スタイルの指定とセレクタ

スタイルの指定

セレクタ

クラスとセレクタ

ここは普通の見出し

ここは特に重要な見出し

ここは普通の見出し

ここは重要な見出し

IDとセレクタ

CSSの指定の仕方

CSSを別ファイルで用意し、そのファイルをHTMLから参照する方法

CSSをHTML内に記述する方法

HTMLの要素にstyle属性を使って指定する方法

練習問題1-

練習問題1-