　実践演習課題10 - イチから学ぶWeb制作

演習課題H10
HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイポグラフィ</title>
<link rel="stylesheet" href="H10.css">
</head>

<body>
<div id="container">
<div id="header">
<h1><span>Typograpy.</span>71</h1>
<div id="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">PHOTOGRAPH</a></li>
<li><a href="#">GUESTBOOK</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div><!--/ nav-->
</div><!--/ header-->
<div id="wrapper">
<div id="content">
<h2>文字の役割</h2>
<p>文字は、「言葉」を視覚的に伝える手段としての重要な役割を担っています。Webサイトにおいても、情報を発信する側の言葉は、文字という記号に置き換わりユーザーに届けられます。ですが、単なる論理的な情報としての文字をそこに置いただけでは、発信者の伝えたいメッセージの背景や意思を、十分に受け手に届けることは難しいでしょう。言葉がイントネーションで変化をつけるように、文字もその表現方法ひとつで伝わり方が大きく変化します。</p>
</div><!--/content-->
<div id="sidebar">
<h2>タイポグラフィとは</h2>
<p>タイポグラフィとは、一般に、活字を情報の目的や意図に合わせて適切に配置、構成することで、印刷物の文字の可読性や美しさを引き出すデザイン技法のことを指します。</p>
<br>
<h2>Webのタイポグラフィ</h2>
<p>印刷業界が、技術のシフトに合わせてそれまでのタイポグラフィの根底は残したままその技法を成長させてきたように、Webというメディアにおいても、タイポグラフィの基本的な考え方は十分に適用することができます。</p>
</div><!--sidebar-->
</div><!--wrapper-->
<div id="footer">
<p><small>Copyright &copy; 2013 Typography.71 All Rights Reserved.</small></p>
</div><!--/ footer-->
</div><!--/ container-->
</body>
</html>

CSS

@charset "utf-8";


/* リセット */
body,ul,li,p,h,div{
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
ul{
  list-style: none;
}

/*全体*/
body{
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
  line-height: 1.5;
  font-size: 15px;
}

#container{
  margin: 0 auto;
  width: 780px;
  height:800px;
  background: url(./img/body_bg.jpg)no-repeat;

}

/*ヘッダー*/
#header h1{
  font-size: 50px;
  margin: 20px 0 40px 0;
  padding-left: 30px;
  font-family: 'Georgia';
  font-weight: 500;
}
#header span{
font-size: 30px;
  color: #009966;
  font-family: 'arial';
  font-weight: 500;
  letter-spacing: -2px;
}
#nav{
  width: 450px;
  height: 250px;
  padding:0 0 20px 30px;
}

#nav li{
  font-family: 'Mangal';
  font-weight: 500;
  line-height: 0.75;
  font-size: 60px;
  letter-spacing:-5px
}
#nav a{
  color: #FFFFFF;
}

#nav a:hover,#nav a:active{
  color: #009966;
}
/*コンテンツ*/
#wrapper{
  overflow: hidden;
  width: 780px;
  height: 370px;
}

#wrapper h2{
  font-family: serif;
}
#content{
  float: left;
  width: 340px;
  padding-left: 30px;
  color: #333333;
}
#sidebar{
  float: right;
  width: 340px;
  padding-right: 30px;
  color: #333333;
}

/*フッター*/
#footer{
  clear: both;
  padding:15px 0 0 30px;
}

↓