＊＊＊課題はページ最下段に記載しています。＊＊＊
準備：ファイル「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」でおこないます。
背景模様のもとになる画像には、「back.jpg」というファイル名をつけ、「index.html」などと同じディレクトリに「images」というフォルダを作成して、その中に入れておきます。今後使用する画像も、この「images」フォルダに入れていきます。
背景模様になる画像は，繰り返し表示されるので，パターンの一部だけを作成して画像として保存します。
タイトルまわりに色をつける
「about.html」のタイトルまわりを設定するために，<div>タグを使って<header>という名前のid属性を指定します。
id属性が<header>に指定されている箇所の指示を、「style.css」に書き込みます。
見出しに装飾をする
「about.html」の<h2>見出しと<h3>見出しの設定を、それぞれ「style.css」の中に書き込みます。
<h2>見出しには、左端に■が表示されるようにします。■印の表示には、枠線の左側だけを表示するという方法を使います。
【borderで指定できる線の種類】
solid …実線
double …二重線
dashed …破線
dotted …点線
【borderで指定する線の位置】
border …上下左右を囲む
border-top …上に線を表示する
border-right …右に線を表示する
border-bottom …下に線を表示する
border-left …左に線を表示する
<h3>見出しには，左端に画像のマークをつけ，下線を表示するようにします。マークは，「mark.png」というファイル名で，「images」フォルダの中に入れておきます。
ソースコード：
「index.html」
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
[中略]
</head> <!-- headここまで --> <!-- ここからbody --> <body> <!-- ここからdiv container --> <div id="container"> <!-- サイトの見出しとその説明 --> <h1>見出し</h1> <p>本文</p>
[中略]
<!-- addressには制作者の情報を入れる --> <address>制作者：自分の名前</address> </div> <!-- div containerここまで --> </body> <!-- bodyここまで --> </html>
「about.html」
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
[中略]
</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>
[中略]
<address>制作者：自分の名前</address> </div> <!-- div containerここまで --> </body> <!-- bodyここまで --> </html>
「style.css」ソースコード
@charset "utf-8";
/* ここからスタイルをはじめます */
body {
color: #444444;
background-color: #87cefa;
background-image: url(images/back2.png);
}
/* コンテンツ全体（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: #4169e1;
border-bottom: solid 2px #4169e1;
padding-bottom: 3px;
background-image: url(images/mark.png);
background-repeat: no-repeat;
background-position: 0px 6px;
padding-left: 20px;
}
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;
}
課題６ １）オンデマンド課題 企画書に沿って、画像を収集する。著作権のある画像を使用する場合は引用元を明示できるように 引用元の情報を記録しておく。 画像収集の計画をリストにまとめる。 例） 「企画名」 画像リスト 猫の画像６枚 ・顔を舐めている猫（１枚） ・寝ている猫（２枚） （中略） 犬の画像 ・散歩している犬（２枚） ・走っている犬（１枚） （以下省略） 課題提出方法 CSのレポート掲示板 デジタルコンテンツ実習Ⅴ(ウェブデザイン) 第６回 にPDF形式の文書を提出してください。 A4サイズ 縦位置・横書き 提出締切 11月30日（月）まで ２）対面授業課題 対面授業を受講後、作成したHTMLファイルとCSSファイルを提出する。 課題提出方法 HTMLファイルとCSSファイルを格納した学籍番号フォルダを圧縮（ZIP形式）して提出する。 提出締切 12月7日（月）まで ＊第６回授業用CSレポート掲示板の提出は12月7日（月）まで可能ですが、各締切日をこちらで確認していますので、 締切日を守って提出するようにしてください。（締切日以降の提出は減点となります）