可変レイアウト+固定レイアウトのソース

授業

≪sample_3.html≫

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>可変レイアウト+固定レイアウト</title>
<link rel="stylesheet" href="style-l.css">
<link rel="stylesheet" href="style-m.css" media="only screen and (min-width:650px) and (max-width:979px)">
<link rel="stylesheet" href="style-s.css" media="only screen and (max-width:649px)">
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:900,400' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- ▼#container -->
<div id="container">
<!-- ▼#header -->
<div id="header">
<!-- ▼#nav -->
<div id="nav">
<ul>
<li><a href="url">HOME</a></li>
<li><a href="url">CATEOGRY</a></li>
<li><a href="url">ABOUT</a></li>
<li><a href="url">CONTACT</a></li>
</ul>
</div>
<!-- ▲#nav -->
<!-- ▼#site -->
<div id="site">
<h1>PICKUP<span>STREAM</span></h1>
<p>Comfort, Delightful, Refreshing Time Produce</p>
</div>
<!-- ▲#site -->
</div>
<!-- ▲#header -->
<!-- ▼#content -->
<div id="content">
<div id="content-inner">
<!-- ▼.post -->
<div class="post">
<a href="url">
<div class="date"><span>1</span> AUG</div>
<h2>風車と風の関係</h2>
<p><img src="img/windmill_thumb.jpg" alt="">
風車は風を受けて回転します。このとき、効率よく風を受けるためには、風上に向かって真正面をむかなければなりません。そのため、風車は首が回るようになっており、常に真正面から風を受けることができるようになっています。この…</p>
<p class="more">READ MORE</p>
</a>
</div>
<!-- ▲.post -->
<!-- ▼.post -->
<div class="post">
<a href="url">
<div class="date"><span>28</span> JUL</div>
<h2>海岸のデコレーション</h2>
<p><img src="img/sand_thumb.jpg" alt="">
海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風、強い日差しなどの影響で、大きく育つものは見当たりません。その多くは小さく、地を這って伸びています。…</p>
<p class="more">READ MORE</p>
</a>
</div>
<!-- ▲.post -->
<!-- ▼.post -->
<div class="post">
<a href="url">
<div class="date"><span>12</span> JUL</div>
<h2>ツルを伸ばしてどこまでも</h2>
<p><img src="img/leaf_thumb.jpg" alt="">
ツル植物は太い木の幹に巻きつき、どんどんとツルを伸ばしていきます。太陽の当たる方向に葉をつけ、枝を伸ばしていくたくましさは見習いたいものです。遠くから見ると細く見えるツルも、近くで見ると意外と太く、簡単に切ることは…</p>
<p class="more">READ MORE</p>
</a>
</div>
<!-- ▲.post -->
<!-- ▼.post -->
<div class="post">
<a href="url">
<div class="date"><span>5</span> JUL</div>
<h2>色とりどりの絨毯</h2>
<p><img src="img/flower_thumb.jpg" alt="">
原生花園では今年も色とりどりの花が咲いています。特に今年は原色の色鮮やかな花がたくさん咲いていますので、週末には多くの人が訪れ、花を楽しんでいます。花の見ごろは来週半ばごろまで続くそうですので、時間を作って行ってみ…</p>
<p class="more">READ MORE</p>
</a>
</div>
<!-- ▲.post -->
</div>
</div>
<!-- ▲#content -->
<!-- ▼#sidebar -->
<div id="sidebar">
<div class="ad">
<img src="img/ad.jpg" alt="広告">
</div>
<!-- ▼.menu -->
<div class="menu">
<h3>CATEGORIES</h3>
<ul>
<li><a href="url">山と森林</a></li>
<li><a href="url">海と海岸と空</a></li>
<li><a href="url">都市と建築</a></li>
<li><a href="url">地下</a></li>
</ul>
</div>
<!-- ▲.menu -->
<!-- ▼.menu -->
<div class="menu">
<h3>RECENT POSTS</h3>
<ul>
<li><a href="url">海岸のデコレーション</a></li>
<li><a href="url">風車と海風の関係</a></li>
<li><a href="url">ツルを伸ばしてどこまでも</a></li>
<li><a href="url">色とりどりの絨毯</a></li>
<li><a href="url">休日に買い物にいくなら</a></li>
<li><a href="url">高層ビルと風の関係</a></li>
</ul>
</div>
<!-- ▲.menu -->
</div>
<!-- ▲#sidebar -->
<!-- ▼#footer -->
<div id="footer">
<p>PICKUP STREAM</p>
<small>Copyright &copy; PICKUP STREAM, all rights reserved.</small>
</div>
<!-- ▲#footer -->
</div>
<!-- ▲#container -->
</body>
</html>

上記のソースで指定している「Web Font」は、
Maven Pro。

<link href='http://fonts.googleapis.com/css?family=Maven+Pro:900,400' rel='stylesheet' type='text/css'>

この中の「900」＝Ultra-Bold 900、「400」＝Normal 400、をそれぞれ指定しているということ。

ユーザー環境次第だったテキストの書体を、これである程度作り手側の自由にできるのかな、と思うと、
やはりwebの根っこには紙媒体がいますね。