実践演習課題その2
[HTML]H08/span>
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>今月の本棚</title> <link rel="stylesheet"href="style.css" media="all"> </head> <body> <div id="container"> <div id="header"> <h1><span>今月の本棚</span><br>推理小説</h1> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">バックナンバー</a></li> </ul> </div><!--/#header--> <div id="wrapper"> <div class="info"> <h2>『鋼鉄都市』</h2> <ul> <li>（1953・米）</li> <li>アイザック・アシモフ</li> <li>ハヤカワ文庫SF</li> </ul> </div> <div class="section"> <p>今回はちょっと目先を変えた作品をご紹介。アシモフの推理小説といえば『黒後家蜘蛛の会』が有名だが、こちらも立派な推理物だ。水色背表紙だからといって、避けて通るのは勿体無い！<br> <span>■ ■ ■</span> 宇宙移民者達がそれぞれに宇宙国家を建設し、"宇宙人"と呼ばれるようになって久しい未来。人口増加による食糧危機に喘ぐ地球では、宇宙国家群の支配の下、鋼鉄のドーム"シティ"の中で厳しい管理社会が成立している。洗練された宇宙人へのコンプレックスや、作業ロボットの開発による人員整理の不安が、地球人の閉塞的な生活に更なる圧迫感を与えている。</p> </div> <div class="section"> <p>そんな中、厳重に警備された宇宙人居住区で宇宙人VIPが惨殺された。政治的問題に発展しかねない状況に際し、NYシティの私服刑事ベイリは、宇宙人側のロボット刑事R.ダニール・オリヴォーと共に、事件の捜査にあたることになる…。</p> <p>単に「未来社会を舞台にした推理物」というだけなら他にも多くの小説がある。この作品が異色なのは、未来社会・SFであればこそ起こり得る事象を使って、魅力的な謎と論理的推理を提示している点だ。閉鎖的な社会が形成されるに至る経緯、その社会の特性、住人の感情などが、作中で上手く利用されている。またアシモフ自身が作った「ロボット工学三原則」も、推理の鍵のひとつ。</p> </div> <div class="section"> <p>「不可能犯罪」と「未知の世界」という推理・SFの王道たる物語の一方では、「異文化との融和」も大きなテーマとなっている。文化も種も立場も異なるR.ダニールを、反発しつつも徐々に受け入れていくベイリの葛藤と変化があればこそ、小説のジャンルを越えた名作となっているのだろう。</p> <p>本作の続編として『はだかの太陽』『夜明けのロボット』がある。アシモフのSF作品は、ベイリ＆R.ダニールのシリーズを含む「ロボットもの」と、「ファウンデーションもの」の二系統に大別できるが、晩年のアシモフは2つの未来史の融合に力を注いだ。未完に終わったことが惜しまれる。</p> </div> <div><!--/#wrapper--> <div id="footer"> <p><small>©2013 BOOKWORMS</small></p> </div><!--/#footer--> </div><!--/#container--> </body> </html>
[CSS]H08
@charset"UTF-8";
body,div,h1,p,ul,li{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
body{
font-size:16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.7;
}
#container{
width:100%;
position:relative;
background-color:#999999;
}
#header{
height:110px;
background:url(img/bg_line.gif) repeat-x left bottom;
}
#wrapper{
width:100%;
height:auto;
overflow:hidden;
padding:20px 20px 30px 20px;
background:#74899a url(img/bg_line.gif) repeat-x left bottom;
}
h1{
width:100%;
height:102px;
padding-left:195px;
background:#980266 url(img/p_mystery.jpg) no-repeat left top;
font-weight:bold;
line-height:1.2em;
color:#FFFFFF;
}
h1 span{
font-size:18px;
}
#header ul{
float:left;
width:200px;
position:absolute;
left:730px;
top:50px;
}
#header li{
display:inline;
margin-right:16px;
width:100%;
}
li a:hover{
text-decoration:underline;
}
.info{
width:180px;
float:left;
margin:0 20px;
color:#FFFFFF;
}
.section{
width:220px;
float:left;
margin-right:25px;
color:#FFFFFF;
}
p span{
display:block;
font-size:12px;
color:#cccccc;
margin:31px 0;
text-align:center;
}
#footer{
clear:both;
position:relative;
background-color:#906;
height:50px;
}
#footer p{
color:#cccccc;
position:absolute;
left:400px;
top:10px;
}
[HTML]09
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Computer Technology Groups</title> <link rel="stylesheet"href="style.css" media="all"> </head> <body> <div id="container"> <div id="header"> <h3 lang="en">Computer Technology Groups</h3> <ul> <li><a href="#">エコロジー</a></li> <li><a href="#">コンピューター</a></li> <li><a href="#">モバイル</a></li> <li><a href="#">ショッピング</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div><!--/#header--> <div id="content"> <h1><img src="img/ecology.gif" width="201" height="24" alt="#"></h1> <br> <div class="section"> <h2>エコロジーへの取り組み</h2> <br> <p> Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p> <p>地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。</p> </div> <div class="section"> <br> <h2>商品のラインナップ</h2> <br> <p> 紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。 </p> </div> </div> <div id="footer"> <p><small>(C) Computer Technology Groups. All rights reserved.</small></p> </div><!--/#footer--> </div><!--/#container--> </body> </html>
[CSS]09
@charset"UTF-8";
body,div,h1,h2,h3,p,ul,li,img{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
img{
vertical-align:bottom;
border:0;
}
body{
font-size:16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.7;
color:#555555;
}
#container{
width:800px;
background-color:#CCFFFF;
}
#header{
height:110px;
background:url(img/logo.gif) no-repeat left top;
}
h1{
width:100%;
height:70px;
padding-left:-15px;
padding-top:20px;
background:#063 no-repeat ;
text-align:center;
font-weight:bold;
line-height:1.2em;
color:#FFFFFF;
}
h3{
color:#006633;
margin-left:60px;
}
h2{
color:#063;
list-style-image:url(img/mark.gif);
}
#header ul{
float:left;
width:550px;
position:absolute;
left:80px;
top:70px;
border-top:solid #063;
border-bottom:solid #063;
margin: 0 8px;
}
#header li{
display:inline;
margin-right:16px;
width:100%;
}
#header li a{
color:#006633
}
li a:hover{
text-decoration:underline;
}
#footer{
clear:both;
position:relative;
border-top:solid #063;
height:50px;
}
#footer p{
color:#063;
position:absolute;
left:200px;
top:10px;
}
[HTML]10
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Typograpy.71</title> <link rel="stylesheet"href="style.css" media="all"> </head> <body> <div id="container"> <div id="header"> <h1 lang="en">Typograpy.71</h1> <ul> <li><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><!--/#header--> <div id="content"> <br> <div class="section" id="section01"> <h2>文字の役割</h2> <p> 文字は、「言葉」を視覚的に伝える手段としての重要な役割を担っています。Webサイトにおいても、情報を発信する側の言葉は、文字という記号に置き換わりユーザーに届けられます。ですが、単なる論理的な情報としての文字をそこに置いただけでは、発信者の伝えたいメッセージの背景や意思を、十分に受け手に届けることは難しいでしょう。言葉がイントネーションで変化をつけるように、文字もその表現方法ひとつで伝わり方が大きく変化します。</p> </div> <div class="section" id="section02"> <br> <h2>タイポグラフィとは</h2> <p> タイポグラフィとは、一般に、活字を情報の目的や意図に合わせて適切に配置、構成することで、印刷物の文字の可読性や美しさを引き出すデザイン技法のことを指します。 </p> </div> <div class="section" id="section03"> <br> <h2>Webのタイポグラフィ</h2> <p> 印刷業界が、技術のシフトに合わせてそれまでのタイポグラフィの根底は残したままその技法を成長させてきたように、Webというメディアにおいても、タイポグラフィの基本的な考え方は十分に適用することができます。 </p> </div> </div> <div id="footer"> <p><small>© 2013 Typography.71 All Rights Reserved.</small></p> </div><!--/#footer--> </div><!--/#container--> </body> </html>
[CSS]10
@charset"UTF-8";
body,div,h1,h2,p,ul,li,img{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
img{
vertical-align:bottom;
border:0;
}
body{
font-size:16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.7;
background:url(img/body_bg.jpg) no-repeat;
}
#container{
width:780px;
height:800px;
}
#header{
height:210px;
}
h1{
padding-left:40px;
padding-top:20px;
font-weight:bold;
line-height:1.2em;
color:#330;
font-size:18px;
}
h2{
color:#330;
}
#header{
margin-bottom:50px;
}
#header ul{
margin-top:30px;
float:left;
width:200px;
position:absolute;
left:30px;
top:70px;
margin-left:10px;
text-transform: uppercase;
}
#header li{
display:inline;
}
#header li a{
color:#ffffff;
font-size:42px;
line-height:0.5em;
font-weight:normal;
}
#header li a:hover{
margin:0 0 15px 0;
color:#330;
}
#content{
margin-top:160px;
}
#content p{
line-height:1.6em;
text-align: justify;
text-justify: inter-ideograph;
}
.section{
padding-left:40px;
width:340px;
}
#content #section01{
float:left;
}
#content #section02,#content #section03{
float:right;
}
#footer{
clear:both;
position:relative;
height:20px;
}
#footer p{
color:#000;
position:absolute;
left:20px;
top:10px;
}
[HTML]11
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Café de la plante</title> <link rel="stylesheet"href="style.css" media="all"> </head> <body> <div id="container"> <div id="header"> <h1 lang="en">Café de la plante</h1> <h2>サブタイトルサブタイトルサブタイトル</h2> </div><!--/#header--> <div id="nav"> <ul> <li><a href="#">トップページ</a></li> <li><a href="#">カフェについて</a></li> <li><a href="#">本日のおすすめ</a></li> <li><a href="#">ブログ</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> <div id="content"> <br> <h3>コンテンツのタイトル</h3> <p> コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p> <br> <p> コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。 </p> </div> <div id="sidebar"> <p><img src="img/photo200.jpg" width="200" height="400"></p> </div> <div id="footer"> <p><small>Copyright ©2013 AUTHOR NAME, All Rights Reserved.</small></p> </div><!--/#footer--> </div><!--/#container--> </body> </html>
[CSS]11
@charset"UTF-8";
body,div,h1,h2,h3,p,ul,li,img{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
img{
vertical-align:bottom;
border:0;
}
body{
font-size:16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
}
#container{
width:860px;
height:auto;
background:url(img/plant_middle.jpg);
}
#header{
width:860px;
height:300px;
background:url(img/plant_top.jpg) no-repeat;
background-position:left bottom;
}
h1{
padding-left:40px;
padding-top:20px;
font-weight:bold;
line-height:1.2em;
color:#ffffff;
font-size:30px;
}
h2{
color:#ffffff;
padding-top:5px;
padding-left:20px;
margin-left:20px;
margin-bottom:20px;
font-size:18px;
}
#content h3{
color:#ffffff;
padding-top:5px;
padding-left:10px;
margin-bottom:20px;
font-size:18px;
background-color:#000000;
}
#header{
margin-bottom:50px;
}
#nav ul{
margin-top:30px;
float:left;
width:600px;
position:absolute;
right:620px;
top:290px;
word-spacing:1em;
}
#nav li{
display:inline;
}
#nav li a{
color:#000;
}
#nav li a:hover{
margin:0 0 15px 0;
color:#C60;
}
#content{
margin-top:20px;
float:left;
width:480px;
margin-right:30px;
margin-left:60px;
}
#content h2{
background:#000000;
}
#content p{
line-height:1.6em;
}
#sidebar{
position:relative;
}
#sidebar p{
position:absolute;
right:110px;
top:45px;
}
#footer{
clear:both;
position:relative;
height:320px;
background:url(img/plant_bottom.jpg) no-repeat left bottom;
}
#footer p{
color:#fff;
position:absolute;
left:200px;
top:298px;
}
[HTML]12
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプルスタイルシートカンパニー</title> <link rel="stylesheet" href="style.css" media="all"> </head> <body> <div id="container"> <div id="header"> <h1></h1> <div id="nav"> <ul> <li id="t"><a href="#"><em>トップページ</em></a></li> <li id="s"><a href="#"><em>ソリューション</em></a></li> <li id="w"><a href="#"><em>実績紹介</em></a></li> <li id="p"><a href="#"><em>パートナー</em></a></li> <li id="k"><a href="#"><em>カスタマー</em></a></li> <li id="g"><a href="#"><em>会社概要</em></a></li> <li id="o"><a href="#"><em>お問い合わせ</em></a></li> </ul> </div> <!--/#nav--> </div> <!--/#header--> <div id="billboard"> <h2></h2> </div> <!--/#billboard--> <div id="content"> <div id="border"> <h4><img src="img/title_about.gif" width="107" height="42" alt="t"></h4> </div> <!--/#border--> <h3><img src="img/section_01.gif" width="292" height="38" alt="s"></h3> <p> サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p> <ul> <li class="up"><a href="#">ソリューションへ</a></li> </ul> <hr> <h3><img src="img/section_02.gif" width="297" height="38" alt="w"></h3> <p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p> <ul> <li class="up"><a href="#">実績紹介へ</a></li> </ul> <hr> </div> <!--/#content--> <div id="news"> <div id="border"> <h4><img src="img/title_news.gif" width="119" height="42" alt="n"></h4> </div> <!--/#border--> <dl> <dt>2013年7月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2013年7月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2013年7月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2013年7月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2013年7月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> </dl> </div> <!--/#news--> <div id="footer"> <p><small><img src="img/copyright.gif" width="319" height="33" alt="c"></small></p> </div> <!--/#footer--> </div> <!--/#container--> </body> </html>
[CSS]12
@charset"UTF-8";
body, div, h1, h2, h3, h4, h5, p, ul, li, img, header, small {
margin:0;
padding:0;
}
ul {
list-style:none;
}
.up {
list-style:none;
}
img {
vertical-align:bottom;
border:0;
}
em {
visibility: hidden;
}
body {
font-size:16px;
font-family:
"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
line-height:1.0;
background:url(img/body_bg.gif);
background-repeat:repeat-x;
}
#container {
width:740px;
height:auto;
}
#header {
width:740px;
height:50px;
background:url(img/logo.gif) no-repeat;
background-position:left bottom;
margin-bottom:50px;
}
#nav ul {
overflow:hidden;
padding-top:50px;
}
#nav li {
float:left;
}
#nav li a {
background:url(img/global_nav_bg.gif) repeat-x;
background-image: url(img/global_nav.gif);
display:block;
width:94px;
height:33px;
}
#nav li#t a:link, #nav li #top a:visited {
background-position: left top;
}
#nav li#t a:hover {
background-position: left -33px;
}
#nav li#t a:active {
background-position: left -66px;
}
#nav li#s a:link, #nav li #s a:visited {
background-position: -94px top;
}
#nav li#s a:hover {
background-position: -94px -33px;
}
#nav li#s a:active {
background-position: -94px -66px;
}
#nav li#w a:link, #nav li #w a:visited {
background-position: -188px top;
}
#nav li#w a:hover {
background-position: -188px -33px;
}
#nav li#w a:active {
background-position: -188px -66px;
}
#nav li#p a:link, #nav li #p a:visited {
background-position: -282px top;
}
#nav li#p a:hover {
background-position: -282px -33px;
}
#nav li#p a:active {
background-position: -282px -66px;
}
#nav li#k a:link, #nav li #k a:visited {
background-position: -376px top;
}
#nav li#k a:hover {
background-position: -376px -33px;
}
#nav li#k a:active {
background-position: -376px -66px;
}
#nav li#g a:link, #nav li #g a:visited {
background-position: -470px top;
}
#nav li#g a:hover {
background-position: -470px -33px;
}
#nav li#g a:active {
background-position: -470px -66px;
}
#nav li#o a:link, #nav li #o a:visited {
background-position: -564px top;
}
#nav li#o a:hover {
background-position: -564px -33px;
}
#nav li#o a:active {
background-position: -564px -66px;
}
#nav ul li a em {
visibility:hidden;
}
#billboard {
height:272px;
background:url(img/main_copy.jpg) no-repeat left top;
}
#border {
background:url(img/title_bg.gif);
}
#news {
float:right;
}
#content h3 {
color:#000000;
padding-top:15px;
padding-left:1px;
margin-bottom:20px;
font-size:18px;
}
#content {
float:left;
width:400px;
background:url(img/content_bg.gif);
}
#content h3 {
margin-left:10px;
}
#content p {
margin-left:10px;
line-height:1.6em;
}
#news {
width:340px;
}
dd {
margin-left:50px;
line-height:1.6em;
}
dt {
margin-top:20px;
margin-left:40px;
color:#999999;
}
#content ul {
background-image:url(img/arrow.gif);
background-repeat:no-repeat;
background-position:left top;
}
#content ul li a {
margin-left:16px;
}
#sidebar {
position:relative;
}
#sidebar p {
position:absolute;
right:110px;
top:45px;
}
#footer {
clear:both;
background:#333;
}
