おさらい
前回の授業では、かんたんなソースコードを自分で書いてコンピュータ上に保存し，それをWebブラウザで開いて，Webページとして表示しました。ここまでの作業手順をもう一度、確認しておきましょう。
作業手順
① PCを起動し，デスクトップに新しいフォルダをひとつ作成する。
② 作成したフォルダの名前を，自分の学籍番号にする。
③ 「スタートメニュー」>「すべてのプログラム」>「アクセサリ」>「メモ帳」を起動する。
④ 下記のソースコード01を見ながら，書いてあるコードをそのままメモ帳に記入する。
⑤ 書けたら，「ファイル」>「名前を付けて保存」で，「学籍番号」フォルダ内に保存する。
・ファイル名：学籍番号.html←学籍番号を「半角英数」で入力してファイル名にする
・文字コード：UTF-8
・保存先：「デスクトップ」＞「学籍番号」フォルダ
⑥ 保存したファイル「学籍番号.html」が，「デスクトップ」>「学籍番号」フォルダ内にあるかどうかを確認する。
⑦ 保存したファイル「学籍番号.html」を右クリックし，「プログラムから開く」>「Internet Explorer」を選択する。
⑧ Internet Explorer（Webブラウザ）が起動し，今作成したファイルがウェブページとして表示されれば成功です。
ソースコード01
ファイル名：「学籍番号.html」
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのページ</title> </head> <body> こんにちは！ </body> </html>
ウェブサイトの制作
ソースコードを元に，新しい行を追加していきます。
作業手順
① 作成したファイル「学籍番号.html」を複製して，別のファイルをつくる。複製したファイルの名称を，「index.html」に変更する。
② 「index.html」を，メモ帳で開く。
③ どの行になにが書いてあるのかを自分で覚えておくために，コメントを記入する。
・タグの構造やページ構成をわかりやすくするため，ソースコードの中に覚え書きとして書いておくテキストを，「コメント」と呼んでいます。
・HTMLファイルにコメントを記入するときは， <!– と –> で囲います。
・<!– と –> で囲われた中身は，ブラウザで開いたときには表示されません。
④ 新しく制作するWebページの見出しと本文を記入する。
・ここでは，<h1> 〜 </h1>，<p> 〜 </p>というタグで中身を区切ります。
・このタグは，後で文字のサイズなどを指定するときに，目印として必要になります。
⑤ このWebページの制作者の情報を，ページの末尾に記入する。
・制作者情報は，<address> 〜 </address>というタグで区切るという決まりがあります。
ソースコード02_01
ファイル名：「index.html」
<!DOCTYPE html> <html lang="ja"> <!-- ここからhead --> <head> <meta charset="UTF-8"> <!-- ページのタイトルをここに入れる --> <title>タイトルを記述しましょう</title> <!-- スタイルシートの場所を指定している --> <link rel="stylesheet" href="style.css" type="text/css"> </head> <!-- headここまで --> <!-- ここからbody --> <body> <!-- サイトの見出しとその説明 --> <h1>サイトの見出し</h1> <p>本文を記述します。</p> <!-- addressには制作者の情報を入れる --> <address>制作者：自分の名前（愛知淑徳大学創造表現学部メディアプロデュース専攻）</address> </body> <!-- bodyここまで --> </html>
⑥ 文字の大きさや色を指定するため，スタイルシートを作成し，HTMLファイルを関連づける。
・メモ帳で新規ファイルを作成し，そのファイルの中にスタイルを記述します。
・スタイルシートには，「style.css」というファイル名をつけて，「index.html」と同じフォルダに入れておきます。
・「index.html」のファイルとスタイルシート「style.css」を関連づけるためには，<link>というタグを<head>の中に記入します。
⑦ 作成したスタイルシートの中に，スタイルを書き込む。
・スタイルは，CSSというスタイル言語を使って指定します。
・スタイルシートでの色の指定は，「#○○○○○○」という英数字でおこないます。この英数字は，RGBの数値を16進数であらわしたものです。
・「#000000」は，赤・緑・青すべてが0（点灯しない）なので，画面の表示色は黒になります。「#ffffff」は，赤・緑・青すべてがf（もっとも明るい）なので，画面の表示色は白になります。
・どのような色になるのかを調べたい場合は，http://www.colordic.org/ などを参照。
ソースコード02_02
ファイル名：「style.css」
@charset "utf-8";
/* ここからスタイルをはじめます */
body {
color: #444444;
}
h1 {
font-size: 36px;
font-family: Verdana, Helvetica, sans-serif;
color: #191970;
font-weight: normal;
}
p {
font-size: 16px;
line-height: 1.8;
font-family: Verdana, Helvetica, sans-serif;
}
address {
font-size: 14px;
font-style: normal;
}
【font-weightの種類】
normal…標準の太さ
bold…一般的な太字
lighter…相対的に一段階細く
bolder…相対的に一段階太く
【font-familyの種類】
sans-serif…ゴシック系のフォント
serif…明朝系のフォント
cursive…筆記体・草書体のフォント
fantasy…装飾的なフォント
monospace…等幅フォント
【font-styleの種類】
normal…標準フォントで表示
italic…イタリック体フォントで表示
oblique…斜体フォントで表示
⑧ 以上の変更が反映されているかどうか，Webブラウザで開いて確認する。