実践演習課題H08C08

HTML

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>H08C08</title>
<linkrel="stylesheet"href="css/H08C08.css">
</head>
<body>
<divid="container">
<divid="header">
<h1><span>今月の本棚</span><br>
推理小説</h1>
<divid="header-nav">
<ul>
<li><ahref="#"><span>ホーム</span></a></li>
<li><ahref="#"><span>バックナンバー</span></a></li>
</ul>
</div>
</div>
<divid="content">
<divclass="section-top">
<h2>『鋼鉄都市』</h2>
<p>（1953・米）</p>
<p>アイザック・アシモフ</p>
<p>ハヤカワ文庫SF</p>
</div>
<divclass="section">
<p>
今回はちょっと目先を変えた作品をご紹介。アシモフの推理小説といえば『黒後家蜘蛛の会』が有名だが、こちらも立派な推理物だ。水色背表紙だからといって、避けて通るのは勿体無い！
</p>
<br>
<span>■　■　■</span>
<br>
<br>
<p>
宇宙移民者達がそれぞれに宇宙国家を建設し、"宇宙人"と呼ばれるようになって久しい未来。人口増加による食糧危機に喘ぐ地球では、宇宙国家群の支配の下、鋼鉄のドーム"シティ"の中で厳しい管理社会が成立している。洗練された宇宙人へのコンプレックスや、作業ロボットの開発による人員整理の不安が、地球人の閉塞的な生活に更なる圧迫感を与えている。
</p>
</div>
<divclass="section">
<p>
そんな中、厳重に警備された宇宙人居住区で宇宙人VIPが惨殺された。政治的問題に発展しかねない状況に際し、NYシティの私服刑事ベイリは、宇宙人側のロボット刑事R.ダニール・オリヴォーと共に、事件の捜査にあたることになる…。</p>
<p>
単に「未来社会を舞台にした推理物」というだけなら他にも多くの小説がある。この作品が異色なのは、未来社会・SFであればこそ起こり得る事象を使って、魅力的な謎と論理的推理を提示している点だ。閉鎖的な社会が形成されるに至る経緯、その社会の特性、住人の感情などが、作中で上手く利用されている。またアシモフ自身が作った「ロボット工学三原則」も、推理の鍵のひとつ。
</p>
</div>
<divclass="section">
<p>
「不可能犯罪」と「未知の世界」という推理・SFの王道たる物語の一方では、「異文化との融和」も大きなテーマとなっている。文化も種も立場も異なるR.ダニールを、反発しつつも徐々に受け入れていくベイリの葛藤と変化があればこそ、小説のジャンルを越えた名作となっているのだろう。</p>
<p>
本作の続編として『はだかの太陽』『夜明けのロボット』がある。アシモフのSF作品は、ベイリ＆R.ダニールのシリーズを含む「ロボットもの」と、「ファウンデーションもの」の二系統に大別できるが、晩年のアシモフは2つの未来史の融合に力を注いだ。未完に終わったことが惜しまれる。
</p>
</div>
</div>
<divid="footer">
<small>&copy;2013 BOOKWORMS</small>
</div>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

body , div, h1, h2, p, ul, li {
  margin:0;
  padding: 0;
}
ul{
  list-style-type: none;
}
li a{
  text-decoration: none;
  color: #ffffff;
}

body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
    color: #ffffff;
}

#container{
  width: 960px;
  margin: 0 auto;
}
#header{
  width: 960px;
  height: 102px;
  background: url(../img/08/p_mystery.jpg) #A11067 no-repeat top left;
  position: relative;
}
#header-nav{
  width: 210px;
  position: absolute;
  top: 50px;
  right: 50px;
}
#content{
  height: 550px;
  background: #708B9D url(../img/08/bg_line.gif) repeat-x top left;
  padding: 10px 10px 10px 20px;
  overflow: hidden;
}
.section-top{
  width: 180px;
  padding: 15px 10px 10px 10px;
  float: left;
  font-size: 15px;
}
.section{
  width: 220px;
  padding: 15px 10px 10px 10px;
  float: left;
  font-size: 15px;
}
#footer{
  height: 50px;
  background: #c71585 url(../img/08/bg_line.gif) repeat-x top left;
  padding-top: 10px;
  text-align:center;
  clear: both;
  color:#CBC8C7;
}
h1 {
  font-family:
    "ヒラギノ明朝 ProN", "HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝", serif;
    margin: 8px 0 0 200px;
    line-height: 1.3em;
}
h1 span{
  font-size: 20px;
  line-height: 1.5em;
}
h2 {
  margin: 20px 0 20px 10px;
}
li{
  display: inline;
  margin: 10px;
}
.section span{
  display: block;
  text-align:center;
  font-size: 14px;
  line-height: 0.1em;
  color:#CBC8C7;
}

96's blog

WEBサイト制作科　６ヶ月コース

実践演習課題H08C08