<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="css/h10.css">
</head>
<body>
<div id="container">
<h1>Typograpy.<span id="number">71</span></h1>
<div id="nav">
<ul>
<li class="current"><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 end-->
<div id="content">
<div class="section" id="left_side">
<h2>文字の役割</h2>
<p>文字は、「言葉」を視覚的に伝える手段としての重要な役割を担っています。Webサイトにおいても、情報を発信する側の言葉は、文字という記号に置き換わりユーザーに届けられます。ですが、単なる論理的な情報としての文字をそこに置いただけでは、発信者の伝えたいメッセージの背景や意思を、十分に受け手に届けることは難しいでしょう。言葉がイントネーションで変化をつけるように、文字もその表現方法ひとつで伝わり方が大きく変化します。</p></div><!--.left_side end-->
<div class="section" id="right_sideup">
<h2>タイポグラフィとは</h2>
<p>タイポグラフィとは、一般に、活字を情報の目的や意図に合わせて適切に配置、構成することで、印刷物の文字の可読性や美しさを引き出すデザイン技法のことを指します。</p></div><!--.right_sideup end-->
<div class="section" id="right_sidedown">
<h2>Webのタイポグラフィ</h2>
<p>印刷業界が、技術のシフトに合わせてそれまでのタイポグラフィの根底は残したままその技法を成長させてきたように、Webというメディアにおいても、タイポグラフィの基本的な考え方は十分に適用することができます。</p></div><!--.right_sidedown end-->
</div><!--#content end-->
<div id="footer">
<p><small>Copyright© 2013 Typography.71 All Rights Reserved.</small></p>
</div><!--footer end-->
</div><!--container end-->
</body>
</html>
@charset "utf-8";
body,div,h1,h2,h3,p,ul,li,a,img {
margin: 0;
padding: 0;
}
body {
color:#333;
font-size:14px;
font-family:
Helvetica,
Arial,
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.7;
background: #D2D0B9 url(../img/body_bg.jpg) no-repeat;
}
ul {
list-style:none;
}
a {
text-decoration: none;
}
#container {
width: 700px;
padding:20px 0 30px 50px;
}
#nav {
font-size:60px;
letter-spacing:-5px;
line-height:0.76;
word-spacing:-12px;
text-transform: uppercase;
margin-bottom: 50px;
}
#nav li.current a{
color: #663;
}
#nav li a {
color: #ffffff;
}
#nav li a:hover {
color: #9CF;
}
#content {
overflow: hidden;
}
#content h2 {
margin-bottom: 5px;
font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","MS Pm明朝", serif;
font-size: 20px;
}
#content p {
line-height:1.8;
margin-bottom: 30px;
}
h1 {
color: #663;
font-size: 20px;
letter-spacing:-1px;
margin-bottom: 50px;
}
h1 span#number {
color:#333;
font-size: 40px;
font-family:Georgia,"Times New Roman",times,serif;
letter-spacing:-3px;
}
#left_side {
width:330px;
float: left;
}
#right_sideup {
float:right;
width:330px;
}
#right_sidedown {
float: right;
width:330px;
}
#footer {
clear: both;
}
