準備：ファイル「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;
}