Webデザインスキル強化計画 【 演習課題8 】
***** 演習課題-8 *****
《html》
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>課題-8</title>
<link rel="stylesheet" href="kadai-8.css" madia="all">
</head>
<body>
<div id="container">
<div id="header">
<img src="images-8/p_mystery.jpg" alt="メインロゴ" width="195" height="102">
<div id="main-title">
<h1>今月の本棚</h1>
<h2>推理小説</h2>
</div>
<div id="nav">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">バックナンバー</a></li>
</ul>
</div><!--*********** nav おわり *************-->
</div><!--********* header おわり ********-->
<div id="line"></div>
<div id="content-1">
<dl>
<dt> 『鋼鉄都市』</dt>
<dd>（1953・米）</dd>
<dd>アイザック・アシモフ</dd>
<dd>ハヤカワ文庫SF</dd>
</dl>
</div><!--******content-1 おわり ********-->
<div id="content-2">
<div class="sub-content">
<p>今回はちょっと目先を変えた作品をご紹介。アシモフの推理小説といえば『黒後家蜘蛛の会』が有名だが、こちらも立派な推理物だ。水色背表紙だからといって、避けて通るのは勿体無い！</p>
<span>■ ■ ■</span>
<p>宇宙移民者達がそれぞれに宇宙国家を建設し、"宇宙人"と呼ばれるようになって久しい未来。人口増加による食糧危機に喘ぐ地球では、宇宙国家群の支配の下、鋼鉄のドーム"シティ"の中で厳しい管理社会が成立している。洗練された宇宙人へのコンプレックスや、作業ロボットの開発による人員整理の不安が、地球人の閉塞的な生活に更なる圧迫感を与えている。</p>
</div><!--********* sub-content おわり **********-->
<div class="sub-content">
<p>そんな中、厳重に警備された宇宙人居住区で宇宙人VIPが惨殺された。政治的問題に発展しかねない状況に際し、NYシティの私服刑事ベイリは、宇宙人側のロボット刑事R.ダニール・オリヴォーと共に、事件の捜査にあたることになる…。
単に「未来社会を舞台にした推理物」というだけなら他にも多くの小説がある。この作品が異色なのは、未来社会・SFであればこそ起こり得る事象を使って、魅力的な謎と論理的推理を提示している点だ。閉鎖的な社会が形成されるに至る経緯、その社会の特性、住人の感情などが、作中で上手く利用されている。またアシモフ自身が作った「ロボット工学三原則」も、推理の鍵のひとつ。</p>
</div><!--******* sub-content おわり *********-->
<div class="sub-content">
<p>「不可能犯罪」と「未知の世界」という推理・SFの王道たる物語の一方では、「異文化との融和」も大きなテーマとなっている。文化も種も立場も異なるR.ダニールを、反発しつつも徐々に受け入れていくベイリの葛藤と変化があればこそ、小説のジャンルを越えた名作となっているのだろう。</p>
<p>本作の続編として『はだかの太陽』『夜明けのロボット』がある。アシモフのSF作品は、ベイリ＆R.ダニールのシリーズを含む「ロボットもの」と、「ファウンデーションもの」の二系統に大別できるが、晩年のアシモフは2つの未来史の融合に力を注いだ。未完に終わったことが惜しまれる。</p>
</div><!--******** sub-content おわり **********-->
</div><!--******** content-2 おわり *******-->
<div id="line-2"></div>
<div id="footer">
<address>c2013 BOOKWORMS</address>
</div>
</div><!--*******container おわり ********-->
</body>
</html>
《css》
@charset "utf-8";
/* CSS Document */
/* css reset */
/* ///// IE6対策です //// */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
}
body {
font-family:"メイリオ","ＭＳ Ｐゴシック", Tahoma, Arial, sans-serif;
line-height: 1.7;
color: #333;
font-size: 14px;
text-align: left;
}
#container{
width:950px;
height:800px;
background-color:#FFF;
margin:0 auto;
border:solid 2px #E4E4E4;
}
#header{
width:950px;
height:102px;
background-color:#980266;
background-image:images-8/bg_line.gif;
}
img{
float:left;
}
#main-title{
float:left;
color:#FFF;
}
h1{
margin-top:15px;
}
h2{
font-size:27px;
font-weight:bold;
}
#nav{
float:right;
margin-right:50px;
}
li{
float:left;
margin-left:20px;
color:#FFF;
margin-top:50px;
font-weight:600;
}
a{
color:#FFF;
text-decoration:none;
}
#line{
width:950px;
height:8px;
background-image:url("images-8/bg_line.gif");
}
dt{
color:#FFF;
}
dd{
color:#FFF;
}
#content-1{
background-color:#C39;
float:left;
width:207px;
height:570px;
text-align:center;
}
dt{
margin-top:30px;
font-size:18px;
font-weight:bold;
}
#content-2{
width:743px;
height:570px;
float:right;
background-color:#C39;
}
.sub-content{
width:197px;
height:500px;
float:left;
margin-left:20px;
margin-top:20px;
margin-right:20px;
}
p{
color:#FFF;
font-weight:600;
}
span{
color:#FFF;
margin-left:70px;
}
#line-2{
width:950px;
height:8px;
background-image:url("images-8/bg_line.gif");
clear:both;
}
#footer{
width:950px;
height:100px;
background-color:#980266;
}
address{
text-align:center;
color:#FFF;
padding-top:20px;
}
