第3回で制作したファイル「index.html」「about.html」「style.css」を、メモ帳で開く。
■メニューの設定
スタイルシートに、以下のように記述を加える。
1)リンクの文字に表示される下線を消すために、「text-decoration: none」を指定します。
2)リンクの文字(メニュー)が一行に表示されるように、「display: inline」などを指定します。
3)リンクの文字の色を変えるには、「a(リンクがある文字)」 「a:visited(訪れたことがあるリンクの文字)」「a:hover(カーソルが乗っている状態のリンクの文字)」をスタイルシートに記入します。 ここでは、「a(リンクがある文字)」を濃い青(#0000cd)に、 「a:visited(訪れたことがあるリンクの文字)」を水色(#6495ed)に 指定します。「a:hover(カーソルが乗っている状態のリンクの文字)」 は、背景に青い色がつくようにbackground-colorを使って指定します。
a …リンクの文字
a:visited …訪れたことがあるリンクの文字
a:hover …カーソルが乗っている状態のリンクの文字
■ページ全体を罫線で囲み背景に色をつける
ページ全体の見え方の指定をするために、指定したい部分に目印をつけます。
ここでは、「index.html」の中に<div>タグを使って<container>というid属性の目印をつけます。その部分の見え方の指定は、「style.css」でおこないます。（参照：テキストp.92-93）
border
・solid:：1本線で表示
・dotted：点線
・dashed：破線
padding：要素の内側の余白
margin：要素の外側の余白
■背景に画像を表示する
＊テキストp.144~145
背景模様のもとになる画像には、「back.jpg」というファイル名をつけ、「index.html」などと同じディレクトリに「images」というフォルダを作成して、その中に入れておきます。
今後使用する画像も、この「images」フォルダに入れていきます。
初期設定では、画像は繰り返し表示される。
背景の画像を繰り返したくない場合は、次のコードを書く。
background-repeat: no-repeat;
画像サイズの指定方法
1.サイズ変更なしで表示
background-size: auto;
2.px指定
background-size: 200px 100px;
3.%指定
background-size: 50%;
4.配置する画像の縦横比は崩さず背景の幅に合わせる
（一枚の画像を画面全体に表示したい場合に）
background-size: cover;
5.配置する画像の全体を表示する（背景色が見えることもある）
background-size: contain;
画像を配置するではなく背景に色を付ける場合、「background-color: #色の値;」で色を指定します。
ソースコード：「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>
<!– ここからdiv container –>
<div id=”container”>
<!– サイトの見出しとその説明 –>
<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>
<!– addressには制作者の情報を入れる –>
<address>制作者：自分の名前（愛知淑徳大学創造表現学部メディアプロデュース専攻）</address>
</div>
<!– div containerここまで –>
</body>
<!– bodyここまで –>
</html>
ソースコード：「style.css」
@charset “UTF-8”;
/* ここからスタイルをはじめます */
body {
color: #444444;
background-color: #87cefa;
background-image: url(images/back.jpg);
/* 画像を繰り返したくない場合は、下記のとおり指定 */
background-repeat: no-repeat;
background-size: cover;
}
/* コンテンツ全体（id属性=container）の指定 */
div#container {
border: solid 2px #6495ed;
padding: 20px;
background-color: #ffffff;
width: 800px;
margin-left: auto;
margin-right: auto;
}
h1 {
font-size: 36px;
font-family: 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;
}
/* メニューのリンクの文字色の設定 */
a {
color: #0000cd;
}
a:visited {
color: #6495ed;
}
a:hover {
color: #ffffe0;
background-color: #4169e1;
}
/* リスト（メニュー）関係の設定 */
li a {
text-decoration: none;
}
li {
display: inline;
padding-right: 10px;
font-size: 16px;
font-family: Verdana, Helvetica, sans-serif;
}
ul {
list-style-type: none;
margin-left: 0;
padding-left: 0;
background-color: #ffefd5;
padding: 3px 20px;
}
■タイトルまわりに色をつける
「about.html」のタイトルまわりを設定するために、<div>タグを使って<header>という名前のid属性を指定します。
id属性が<header>に指定されている箇所の指示を、「style.css」に書き込みます。
■見出しに装飾をする
「about.html」の<h2>中見出しと<h3>小見出しの設定を、それぞれ「style.css」の中に書き込みます。
<h2>中見出しには、左端に■が表示されるようにします。■印の表示には、枠線の左側だけを表示するという方法を使います。（border-leftの部分）
borderで指定する線の位置
・border …上下左右を囲む
・border-top …上に線を表示する
・border-right …右に線を表示する
・border-bottom …下に線を表示する
・border-left …左に線を表示する
<h3>小見出しには、左端に画像のマークをつけ、下線を表示するようにします。マークは、「mark.jpg」というファイル名で、「images」フォルダの中に入れておきます。
ソースコード：「about.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>
<!– ここからdiv container –>
<div id=”container”>
<!– ここからdiv header –>
<div id=”header”>
<!– サイトの見出しとその説明 –>
<h1>サイトの見出し</h1>
<p>これが解説です。</p>
</div>
<!– div headerここまで –>
<!– メニューのリスト –>
<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>
</div>
<!– div containerここまで –>
</body>
<!– bodyここまで –>
</html>
ソースコード：「style.css」
@charset “UTF-8”;
/* ここからスタイルをはじめます */
body {
color: #444444;
background-color: #87cefa;
background-image: url(images/back.jpg);
/* 画像を繰り返したくない場合は、下記のとおり指定 */
background-repeat: no-repeat;
background-size: cover;
}
/* コンテンツ全体（id属性=container）の指定 */
div#container {
border: solid 2px #6495ed;
padding: 20px;
background-color: #ffffff;
width: 800px;
margin-left: auto;
margin-right: auto;
}
/* タイトルまわり（id属性=header）の指定 */
div#header {
background-color: #87cefa;
padding: 5px 20px;
}
h1 {
font-size: 36px;
font-family: sans-serif;
color: #191970;
font-weight: normal;
}
h2 {
font-size: 22px;
font-family: sans-serif;
color: #191970;
font-weight: normal;
border-left: solid 14px #87cefa;
padding-left: 5px;
}
h3 {
font-size: 18px;
font-family: sans-serif;
color: #191970;
border-bottom: solid 2px #4169e1;
padding-bottom: 3px;
background-image: url(images/mark.png);
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left: 36px;
}
p {
font-size: 16px;
line-height: 1.8;
font-family: Verdana, Helvetica, sans-serif;
}
–以下同じ
KOTERA Ryo 