昆虫図鑑のHTMLとCSS（完成）
昆虫図鑑のHTMLは完成しました。まとめておきましょう。
昆虫図鑑HTMLとCSSの全ソースコード
昆虫図鑑の基本ができあがりました。
pb_insects.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>トップページ - 昆虫図鑑</title>
<link rel="stylesheet" href="../../css/base.css" />
<link rel="stylesheet" href="css/class.css" />
</head>
<body>
<div id="page">
<header>
<img id="logo" src="images/logo.jpg" alt="昆虫図鑑" />
<ul id="topicPath">
<li>トップページ</li>
</ul>
</header>
<div id="content">
<h1>昆虫の仲間</h1>
<p>
私たちの身の周りには、いろいろな昆虫が暮らしています。
その姿形は多種多様で、かたい前ばねを持つものもいれば、
鱗粉（りんぷん）で覆われた大きなはねを持つものもいます。
身を守る方法も様々で、植物の枝や強い生物に擬態（ぎたい）するものもいます。
昆虫たちは、進化の過程で驚くべき知恵を身につけていったのです。
</p>
<p>
昆虫は知れば知るほど不思議な魅力にあふれています。<br />そんな昆虫たちの秘密を
探っていきましょう。
</p>
<ul id="orders">
<li>チョウの仲間（チョウ目）</li>
<li><a href="beetles/beetles.html">カブトムシの仲間（コウチュウ目）</a></li>
<li>ハチの仲間（ハチ目）</li>
<li>トンボの仲間（トンボ目）</li>
<li>セミ・カメムシの仲間（カメムシ目）</li>
<li>バッタの仲間（バッタ目）</li>
<li>ハエ・アブの仲間（ハエ目）</li>
</ul>
</div>
</div>
</body>
</html>
beetles.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>コウチュウ目 - 昆虫図鑑</title>
<link rel="stylesheet" href="../../../css/base.css" />
<link rel="stylesheet" href="../css/order.css" />
</head>
<body>
<div id="page">
<header>
<img id="logo" src="../images/logo.jpg" alt="昆虫図鑑" />
<ul id="topicPath">
<li><a href="../pb_insects.html">トップページ</a> >></li>
<li>コウチュウ目</li>
</ul>
</header>
<div id="content">
<h2>カブトムシの仲間（コウチュウ目）</h2>
<p>
カブトムシの仲間は、からだ全体がかたい前ばねや皮ふでおおわれているので、
コウチュウ（甲虫）目と呼ばれます。
コウチュウ目には<span class="speciesName">クワガタムシ</span>や
<span class="speciesName">コガネムシ</span>も含まれます。
</p>
<ul id="species" class="clearfix">
<li>
<a href="kabutomushi/kabutomushi.html">
<img src="kabutomushi/images/160_120.jpg" alt="カブトムシ" /><br />
カブトムシ
</a>
</li>
<li>
<a href="ookuwagata/ookuwagata.html">
<img src="ookuwagata/images/160_120.jpg" alt="オオクワガタ" /><br />
オオクワガタ
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
kabutomushi.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>カブトムシ - 昆虫図鑑</title>
<link rel="stylesheet" href="../../../../css/base.css" />
<link rel="stylesheet" href="../../css/species.css" />
</head>
<body>
<div id="page">
<header>
<img id="logo" src="../../images/logo.jpg" alt="昆虫図鑑" />
<ul id="topicPath">
<li><a href="../../pb_insects.html">トップページ</a> >></li>
<li><a href="../beetles.html">コウチュウ目</a> >></li>
<li>カブトムシ</li>
</ul>
</header>
<div id="content">
<h3>カブトムシ</h3>
<p id="pict">
<img src="images/640_480.jpg" alt="カブトムシ" />
</p>
<div id="profile" class="clearfix">
<div id="data">
<h4>昆虫データ</h4>
<table id="dataTable">
<colgroup class="tableHead"></colgroup>
<colgroup class="tableBody"></colgroup>
<tr>
<th>分類</th><td>コウチュウ目コガネムシ科</td>
</tr>
<tr>
<th>体長</th><td>全長40〜70mm</td>
</tr>
<tr>
<th>発生時期</th><td>7〜8月</td>
</tr>
<tr>
<th>分布</th><td>本州・四国・九州・沖縄</td>
</tr>
<tr>
<th>食べ物</th><td>幼虫は腐った植物、成虫はクヌギなどの樹液。</td>
</tr>
</table>
</div>
<div id="explanation">
<h4>解説</h4>
<p>
昆虫界の人気者。自分の体重の20倍のものを引っ張ることができる。
大きな角はけんかをするときの武器になる。
昼間は土の中にもぐったり、木の根元にじっとしていて、
夜にはクヌギなどの樹液に集まってくる。
かたい前ばねの下に隠されている後ばねを開いて飛ぶ。
</p>
</div>
</div>
</div>
</div>
</body>
</html>
ookuwagata.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>オオクワガタ - 昆虫図鑑</title>
<link rel="stylesheet" href="../../../../css/base.css" />
<link rel="stylesheet" href="../../css/species.css" />
</head>
<body>
<div id="page">
<header>
<img id="logo" src="../../images/logo.jpg" alt="昆虫図鑑" />
<ul id="topicPath">
<li><a href="../../pb_insects.html">トップページ</a> >></li>
<li><a href="../beetles.html">コウチュウ目</a> >></li>
<li>オオクワガタ</li>
</ul>
</header>
<div id="content">
<h3>オオクワガタ</h3>
<p id="pict">
<img src="images/640_480.jpg" alt="オオクワガタ" />
</p>
<div id="profile" class="clearfix">
<div id="data">
<h4>昆虫データ</h4>
<table id="dataTable">
<colgroup class="tableHead"></colgroup>
<colgroup class="tableBody"></colgroup>
<tr>
<th>分類</th><td>コウチュウ目クワガタムシ科</td>
</tr>
<tr>
<th>体長</th><td>おす32〜76mm めす30〜41mm</td>
</tr>
<tr>
<th>発生時期</th><td>6〜9月</td>
</tr>
<tr>
<th>分布</th><td>北海道・本州・四国・九州</td>
</tr>
<tr>
<th>食べ物</th><td>幼虫は広葉樹のかれ木、成虫はクヌギなどの樹液。</td>
</tr>
</table>
</div>
<div id="explanation">
<h4>解説</h4>
<p>
カブトムシのライバル、クワガタムシの仲間。
がっしりしたフォルムの大きな体が特徴。
性格はおとなしく、危険を感じるとすぐに身を隠す。
昼間は木の穴や倒れた木の下にひそんでいて、
夜になるとクヌギなどの樹液を求めて動き回る。
幼虫で約2年間を過ごし、3年目の夏に羽化する。
</p>
</div>
</div>
</div>
</div>
</body>
</html>