●HTMLとCSSの基礎１：タグとは
＊テキストp.64-65
タグは、テキスト文書の個々の内容に、適切な意味を与える役割を持つ。
<head>、<body>、<p>、<h1>、<img> etc…
開始タグ・内容・終了タグの3点で構成されたものが「要素」である。
i.e.) <h1>はじめてのページ</h1>
タグは下図のような入れ子構造になっている。
前回の復習
1. PCを起動し，デスクトップに新しいフォルダをひとつ作成する。
2. 作成したフォルダの名前を，自分の学籍番号にする。
3. 「スタートメニュー」>「すべてのプログラム」>「アクセサリ」>「メモ帳」を起動する。
4. 下記のソースコード01を見ながら，書いてあるコードをそのままメモ帳に記入する。
5. 書けたら，「ファイル」>「名前を付けて保存」で，「学籍番号」フォルダ内に保存する。
・ファイル名：学籍番号.html←学籍番号を「半角英数」で入力してファイル名にする
・文字コード：UTF-8
・保存先：「デスクトップ」＞「学籍番号」フォルダ
6. 保存したファイル「学籍番号.html」が，「デスクトップ」>「学籍番号」フォルダ内にあるかどうかを確認する。
7. 保存したファイル「学籍番号.html」を右クリックし，「プログラムから開く」>「Google Chrome」などWebブラウザを選択する。
8. Google ChromeなどWebブラウザが起動し，作成したファイルがウェブページとして表示されれば成功です。
ソースコード01
ファイル名「学籍番号.html」
（＊＊＊の部分は各自で変えてください）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>はじめてのページ</title> </head> <body> <h1>はじめてのページ</h1> <p>名前：＊＊＊</p> <p>年齢：＊＊＊</p> <p>学年：＊＊＊</p> </body> </html>
●スタイルシート（CSS）について
＊テキストp.48-49、p.120-123
スタイルシート（CSS：Cascading Style Sheet）は、Webページのレイアウトや装飾を行うためのファイルである。CSSは、背景色の変更や画像の配置、文字のフォントや色などの幅広いデザインを定義するために使われる。
HTMLはWebページの文書構造を表し、CSSはページの外見をデザインするという、役割分担が行われている。HTMLでもレイアウトや装飾について記述することは出来るが、HTMLの主目的は文書内の情報に意味づけをすることである。
CSSを用いることで、HTMLの中身（文書構造）はそのままに、レイアウトなど外見を簡単に変えることができ、サイト制作を効率化できる。
ーーウェブサイト制作（続き）ーー
ソースコードを元に、新しい行を追加していきます。
制作手順
1.作成したファイル「学籍番号.html」を複製して、別のファイルをつくる。
複製したファイルの名称を、「index.html」に変更する。
2.「index.html」を、メモ帳で開く。
3.どの行になにが書いてあるのかを自分で覚えておくために、コメントを記入する。
・タグの構造やページ構成をわかりやすくするため、ソースコードの中に覚え書きとして書いておくテキストを、「コメント」と呼んでいます。
・HTMLファイルにコメントを記入するときは、 <!– と –> で囲います。
・<!– と–> で囲われた中身は、ブラウザで開いたときには表示されません。
4. 新しく制作するWebページの見出しと本文を記入する。
・ここでは、<h1> 〜 </h1>、<p> 〜 </p>というタグで中身を区切ります。
・このタグは、後で文字のサイズなどを指定するときに、目印として必要になります。
5. このWebページの制作者の情報を、ページの末尾に記入する。
・制作者情報は、<address> 〜 </address>というタグで区切るという決まりがあります。
＊注意事項
スタイルシートに記述した内容がHTMLに反映されない場合、 “（ダブルクオーテーションマーク）が半角になっているかを確認してください。全角になっているとリンクがつながりません。
英数字や記号（< > ; # など）は全て半角で記述します。
HTML文書はメモ帳・ブラウザの両方で開けますが、スタイルシートはメモ帳でしか開けません。
ソースコード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>
6.文字の大きさや色を指定するため、スタイルシートを作成し、HTMLファイルを関連づける。
・メモ帳で新規ファイルを作成し、そのファイルの中にスタイルを記述します。
・スタイルシートには、「style.css」というファイル名をつけて、「index.html」と同じフォルダに入れておきます。
・「index.html」のファイルとスタイルシート「style.css」を関連づけるためには、<link>というタグを<head>の中に記入します。
7. 作成したスタイルシートの中に、スタイルを書き込む。
・スタイルは、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-sizeについて】
ウェブ制作では、文字の単位は「px（ピクセル）」がよく使われます。
本文は16px、見出しは32px、中見出しは24pxが目安になります。注釈などの小さい文字も最低12px。
【font-weightの種類】
normal…標準の太さ
bold…一般的な太字
lighter…相対的に一段階細く
bolder…相対的に一段階太く
【font-familyの種類】
sans-serif…ゴシック系のフォント
serif…明朝系のフォント
cursive…筆記体・草書体のフォント
fantasy…装飾的なフォント
monospace…等幅フォント
【font-styleの種類】
normal…標準フォントで表示
italic…イタリック体フォントで表示
oblique…斜体フォントで表示
8. 以上の変更が反映されているかどうか、Webブラウザで開いて確認する。
KOTERA Ryo 