文字の表示について
前回までに作成したファイル「index.html」と「style.css」を，メモ帳で開きます。
ソースコード01_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>
ソースコード01_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;
サイズの値はピクセルです。数値を変えてサイズを変更してみましょう。
②文字の書体
font-family: font-familyの種類;
文字の書体を他の種類に変更してみましょう。
【font-familyの種類】
sans-serif…ゴシック系のフォント
serif…明朝系のフォント
cursive…筆記体・草書体のフォント
fantasy…装飾的なフォント
monospace…等幅フォント
③文字の太さ
font-weight: font-weightの種類;
文字の太さを他の種類に変更してみましょう。
【font-weightの種類】※コンピュータ環境によって反映されない場合があります。
normal…標準の太さ
bold…一般的な太字
lighter…相対的に一段階細く
bolder…相対的に一段階太く
④文字のスタイル
font-style: font-styleの種類;
【font-styleの種類】
normal…標準フォントで表示
italic…イタリック体フォントで表示
oblique…斜体フォントで表示
⑤文字の行間隔
line-height: 数値;
文字の行間隔を、数値を変えて変更してみましょう。
リンクの設定
リンク（クリックすると他のページに移動する）を作成します。
<a href="リンク先のページ.html">リンクを設定したい文字列</a>
上のように記述することで，そのリンクをクリックしたときにどのウェブページを表示するのかを指定します。
記載例）
<a href="about.html">このサイトについて</a>
リストの設定
今回のウェブサイトでは，リンクをリスト形式で記述し、リンクを４つ用意することにします。
リスト形式にしたい部分は以下のタグで囲みます。
<ul>〜</ul>
リストのひとつひとつの要素は以下のタグで囲みます。
<li>〜</li>
リスト形式の記述例は以下のようになります。
<ul> <li>〜</li> <li>〜</li> <li>〜</li> </ul>
リンク先のウェブページを作成する
「index.html」をフォルダ内で複製します。複製して増やした方のファイルを，「about.html」というファイル名に変更します。
※名前を付けて保存しなおす場合は，文字コードの指定（「UTF-8」）を忘れないようにしましょう。
リンクの記述
以下のようにソースコード内にメニュー（リンク）のリストを挿入しましょう。
ソースコード02_01
ファイル名：「index.html」
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <!-- ページのタイトルをここに入れる --> <title>タイトル</title> <!-- スタイルシートの場所を指定している --> <link rel="stylesheet" href="style.css" type="text/css"> </head> <!-- headここまで --> <!-- ここからbody --> <body> <!-- サイトの見出しとその説明 --> <h1>見出し</h1> <p>説明文</p> <!-- メニューのリスト --> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="about.html">このページについて</a></li> <li><a href="campus.html">コンテンツ１</a></li> <li><a href="class.html">コンテンツ２</a></li> </ul> <p>本文</p> <!-- addressには制作者の情報を入れる --> <address>制作者：自分の名前（愛知淑徳大学創造表現学部）</address> </body> <!-- bodyここまで --> </html>
ソースコード02_02
ファイル名：「about.html」 ※「index.html」を複製し，必要な部分だけ書き換えます。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <!-- ページのタイトルをここに入れる --> <title>タイトル</title> <!-- スタイルシートの場所を指定している --> <link rel="stylesheet" href="style.css" type="text/css"> </head> <!-- headここまで --> <!-- ここからbody --> <body> <!-- サイトの見出しとその説明 --> <h1>見出し</h1> <p>解説</p> <!-- メニューのリスト --> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="about.html">このページについて</a></li> <li><a href="campus.html">コンテンツ１</a></li> <li><a href="class.html">コンテンツ２</a></li> </ul> <h2>中見出し</h2> <p>説明</p> <h3>小見出し</h3> <p>説明<br> 説明</p> <h3>小見出し</h3> <p>説明<br> 説明</p> <!-- addressには制作者の情報を入れる --> <address>制作者：自分の名前（愛知淑徳大学創造表現学部）</address> </body> <!-- bodyここまで --> </html>
完成したら、リンクを設定した文字列をクリックして動作を確認してみましょう。