2021ウェブデザイン第4回

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です