実践演習課題 - Web学習鑑賞ポートフォリオ

[HTML]H01・C01

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>見出しと段落をマークアップする</title>
<style>
body {
   font-size: 14px;
   font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif; 
   color: #333333;
   background-color: #FFFFFF;
   line-height: 1.5;
   margin: 10px;
   padding: 0;
}
h1 {
    color: #0850b2;
    font-size: 150%;
    background-color: #F0f6fd;
    border-top: 7px solid #0850b2;
    border-bottom:3px solid #cccccc;
    margin: 0 0 20px 0;
    padding: 10px;
}
h2 {
    font-size: 117%;
    color: #0850b2;
    background-color: #efefef;
    border-left: 5px solid #0850b2;
    border-bottom: 1px solid #cccccc;
    margin: 10px 0 10px 10px;
    padding: 5px;
}

#content{
 width: 500px;
}

.section{
 margin: 30px 10px;

</style>
</head>
<body>
<div id="content">
<h1>見出しと段落のレイアウト</h1>
<p>同じ内容の文章であっても、その表現の仕方によって読者に与える印象は大きく変化します。文章のレイアウトを考えることはより正確に、より効果的に情報を伝えるためにとても重要なことです。</p>
<div class="section">
<h2>見出しのレイアウト</h2>
<p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。</p>
<p>見出しは、その章・節で述べられる話題を端的に示すものです。見出しにはh1からh6までの、6レベルの見出しが用意されています。ページのなかで最も重要な見出しをh1要素でマークアップし、次に重要な見出しをh2要素として、その次をh3要素で･･･といった具合に、重要なものから順々にマークアップいきます。</p>
</div>
<div class="section">
<h2>段落のレイアウト</h2>
<p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p>
<p>パラグラフとは、内容に関連のあるいくつかの文の集まりのことです。ひとつのパラグラフに複数のトピックを展開するのは、あまり良くありません。逆にトピックが次に展開しているにも関わらず、同じパラグラフの中に収めてしまうのも、あまり良くありません。段落はp要素を用いてマークアップします。</p>
</div>
</div>
</body>
</html>

[HTML]H02・C02

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>石垣島観光ガイド</title>
<style>
body {  
background-color: #b1daf0;
color: #333333;
font-size: 16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
}
body,div,h1,h2,h3,p{
margin: 0;
padding: 0;
}
#container {
width: 900px;
height: auto;
margin: 20px auto;
padding: 30px;
background-color: #ffffff;
}
#header {
width:840px;
height:250px;
margin-bottom:25px;
background-image: url(01.jpg);
background-repeat: no-repeat;
background-position: 0 -50px;
border-radius:10px;
}
h1 {
  color: #FFFFFF;
  padding: 130px 0 0 30px;
  letter-spacing:0.5em;
}
.section{
margin-bottom:25px;
}
p.lead{
margin-bottom:40px;
text-indent: 1em;
}
p.time{
color:#1e90ff;
font-size:17px;
font-weight:bold;
margin-bottom:10px;
}
h2 {
    font-size: 1.9em;
    color: #000080;
    border-left: 8px solid #000080;
    margin-top:30px;
    margin-bottom:30px;
    padding-left: 10px;
}
h3 {
    font-size: 18px;
    color: #191970;
    background-color: #b0e0e6;
    border-top: 2px dotted #0000ff;
    border-bottom: 2px dotted #0000ff;
    margin-bottom:10px;
    padding:8px 0 6px 10px;
}

p time="section"
p {
    font-size: 0.9em;
    line-height: 2.0;
    color: #000000;
}

adress{
margin:28%;
}

#footer{
 margin-top:40px;
 padding-top:15px;
 border-top:1px dotted #999999;
}
#footer p{
 text-align: center;
}
small{
font-size:14px;
}

</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>石垣島観光ガイド</h1>
</div><!--/#header-->

<p class="lead"></p>
<p>　石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。 沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、 1年を通じて平均気温は27度もあります。亜熱帯気候のため、 マングローブの森や色とりどりの南国の花が咲き、赤瓦屋根の民家、 そして何よりも、鮮やかなコバルトブルーの海岸は、多くの観光客をひきつけ、 特にダイバーやシュノーケリングを楽しむ人にとっては格好の場所になっています。</p>

<h2>観光スポット</h2>

<div class="section">
<h3>「 川平（かびら）湾」</h3>
<p class="time">石垣港から車で約20分</p>
<p>石垣を代表する景勝地で、エメラルド色のサンゴ礁と黒真珠の養殖でよく知られています。 潮の流れが早いため、遊泳は禁止されています。</p>
</div><!--/.section-->

<div class="section">
<h3>「宮良川（みやらがわ）のヒルギ林」
</h3>
<p class="time">石垣港からバスで30分宮良橋で下車</p>
<p>巨大なマングローブ林（ヒルギ群落）があり、国の天然記念物に指定されているほど壮大です。</p>
</div><!--/.section-->

<div class="section">
<h3>「底地（すくじ）ビーチ 」</h3>
<p class="time">川平湾から車で約10分</p>
<p>マリンスポーツが楽しめ、マンタが見られることから、ダイバーに人気があります。</p>
</div><!--/.section-->

<div class="section">
<h3>「フサキビーチ」</h3>
<p class="time">石垣港からバスで30分、宮良橋下車</p>
<p>島の西側にあるビーチで、西表（いりおもて）島に沈む美しいサンセットが見られるビーチとして有名です。</p>
</div><!--/.section-->

<div class="section">
<h3>「米原海岸」</h3>
<p class="time">石垣空港より車で約30分</p>
<p>米原キャンプ場が隣接していて、ビーチパーティが楽しめます。潮の流れが早いため、遊泳は禁止されています。</p>
</div><!--/.section-->

<div class="section">
<h3>「マエザトビーチ」</h3>
<p class="time">石垣空港より車で約5分</p>
<p>ホテル内にあるリゾートビーチですが、宿泊者以外でも利用可能です。ファミリー向けリゾート地で、 シュノーケルのレンタルもあります。</p>
</div><!--/.section-->

<div id="footer">
<p><small>(c)2013 石垣島観光協会 All Rights Reserved</small></p>
</div><!--/#footer-->
</div><!--/#container-->
</body>
</html>

[HTML]H03・C03

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ガラスの靴の持ち主を捜しています！</title>
<link rel="stylesheet"href="style.css">
</head>
<body>
<div id="#container">
<div id="#wrapper">
<div id="#header">
<img src="img/main.gif"width="617"heigh="445"alt="">
<div><!--/#header-->
<div id="#content">
<dl>
<dt><img src="img/b_1.gif"width=""></dt>
<dd>　下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</dd>
</dl>
<h1>【応募規約】</h1>
<ul>
<li>○パソコンでのご応募は、お一人様一回限り（複数ご応募いただいた場合は最終応募のみ有効）とさせていただきます。</li>
<li>※但し、郵便ハガキでのご応募は、ハガキ１通を１口として、お一人様何口でもご応募できます。</li>
<li>○商店街で同時期に行われる他のキャンペーンと重複して当選することはできません。</li>
<li>○当選後の権利譲渡、換金はできません。</li>
<li>○応募の際の必要事項に、不備や虚偽があった場合は、無効になります。</li>
<li>○ご応募は日本国内在住の方に限らせていただきます。</li>
<li>○応募受付の確認、抽選結果に関するお問合せには、お受けいたしかねますのでご了承ください。</li>
<li>○景品の"ガラスの靴"は、11月17日から12月25日まで商店街内（サン広場）に展示した靴となりますので、予めご了承ください。また、サイズは23.5ｃｍとなります。</li>
</ul>
<dl>
<h2>【個人情報のお取扱いについて】</h2>
<dd>　ご応募にあたり、ご記入いただいた個人情報（郵便番号、住所、氏名、電話番号、年齢）は、当社にて適切に管理し、ご当選の場合の景品受け渡し、及び個人を識別できない統計情報として、応募状況の傾向把握に利用します。当社は、上記の目的範囲内で、個人情報の取り扱いを外部の第三者に委託することがあります。この場合、個人情報の漏洩等が無いよう、業務委託契約に基づく適切な管理を行います。</dd>
</dl>
<dl>
<h2>【個人情報のお取扱いについて】</h2>
</dl>
<ul id="nav">
<li><a href="#">川崎アゼリアプライバシーポリシー</a></li>
</ul></div><!--/#nav-->
<h3><img src="img/b_2.gif"width="" hspace="10"></h3>
<p>
<img src="img/b_yes.gif"width="">
<img src="img/b_no.gif"width="">
</p>
</div><!--/#content-->
</div><!--/#wrapper-->
</div><!--/#container-->
<div id="footer">
<h3><img src="img/address.gif"width=""></h3>
</div><!--/#footer-->
</body>
</html>

[CSS]H03・C03

@charset "UTF-8";

body,div,h1,h2,h3,p,ul,li,img {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;  
}
body{
  width:600px;
  height:auto;
  font-size: 14px;
  font-family: 
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif; 
  line-height:1.5;
  background-color:#FFF;
  background-image:url(img/bg.gif);
}
img{
vertical-align:bottom;
}
#container {
  padding:50px 200px 0 0;
  width: 700px;
  margin: 20px auto;
}
#header {
  width: 700px;
  height:auto;
  margin-bottom:20px;
  text-align:center;
}
#wrapper {
  width:700px;
  overflow: hidden;
  margin-bottom: 20px;
}
#content {
  width:700px;
  height:auto;
  background-image:url(img/bg_lead.gif);
  margin-left:30px;
}
dd,ul{
  padding:0 50px 0 0;
  text-align:left;
}
p{
  text-align:center;
}
#footer{
  text-align:center;
  width:583px;
  float:right;
}
#nav{
  margin-left:50px;
}
h3{
  text-align:center;
}
h2{
  margin-left:20px;
}
h1{
  margin-left:20px;
}
dt{
  margin-left:65px;
}
li{
  margin-left:40px;
}

[HTML]H04・C04

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>課題４ おいしい卵料理レストラン Cockeyolly</title>
<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="img/logo.gif" width="82" height="78" alt="おいしい卵料理レストラン Cockyolly"></h1>
</div>
<div id="content">
<h2><img src="img/title.gif" width="231" height="49" alt="今月のおすすめ"></h2>
<h3>きのこのオムライス</h3>
<p class="photo"><img src="img/photo01.jpg" width="185" height="129" alt="きのこのオムライス">ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な特選地卵を使って、ほんのり甘く仕上げています。：<span class="price">800円</span></p>
<h3>シーフードスパゲッティシーフードスパゲッティ<br>バルサミコ風味</h3>
<p class="photo"><img src="img/photo02.jpg" width="184" height="130" alt="シーフードスパゲッティシーフードスパゲッティ<br />バルサミコ風味">エビ・イカ・アサリの入ったシェフご自慢のスパゲッティです。バルサミコ酢と生クリームで作ったさっぱりソースをお楽しみください。：<span class="price">900円</span></p>
</div>
<div id="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#" class="this">今月のおすすめ</a></li>
<li><a href="#">オリジナル雑貨</a></li>
<li><a href="#">マップ</a></li>
<li><a href="mailto:xxx@xxxx.com">メール</a></li>
</ul>
</div>
<div id="footer">
<p><small>(c)2013  卵料理カフェ Cockeyolly</small></p>
</div>
</div>
</body>
</html>

[CSS]H04・C04

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

body,h1,h2,h3,div,ul,li,p{
  margin:0;
  padding:0;
}
ul{
  list-style:none;
}
a{
  text-decoration:none;
}
img{
  border:0;
  vertical-align:bottom;
}
body{
  font-size:16px;
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo, 
  sans-serif;
  line-height:1.5;
  background:url(img/bg_img.gif) repeat-y;
  color:#333333;
}

#container{
  overflow:hidden;
  width:640px;
  padding-top:20px;
}
#header{
  text-align:center;
  width:150px;
  margin-bottom:43px;
}
#content{
  float:right;
  width:460px;
  margin:-125px 0 0 30px;
}
#sidebar{
  width:150px;
}
#footer{
  clear:both;
}
h2{
  text-align:center;
  margin-bottom:80px;
}
h3{
  border-left:8px solid #930;
  padding-left:0.5em;
  margin-bottom:10px;
  color:#990000;
  line-height:1.3;
}
p.photo{
  margin-bottom:90px;
  }
p.photo img{
  float:right;
  margin-left:1em;
}
#sidebar ul{
  margin-left:18px;
  line-height:2em;
  font-weight:bold;
}
#sidebar li a{
  color:#FFF;
}
#sidebar ul li .this{
  color:#ffff99;
}
#footer p{
  text-align:center;
  margin-left:180px;
  padding-top:10px;
  border-top:1px solid #999;
}
span.price{
  font-weight:bold;
}

[HTML]H05・C05

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プロヴァンス</title>
<link rel="stylesheet"href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>provence</h1>
</div><!--/#header-->
<div id="wrapper">
<div id="content">
<p><img src="img/illust.gif" width="250" height="196"alt="">　プロヴァンス（la Provence）は、フランス革命以前のフランスに置かれていた州のひとつであり、フランスの南東部に位置する。フランス王国併合前（15世紀末）にあった独立国（プロヴァンス伯爵領）の名前でもある。「プロヴァンス」の名称は、古代ローマ時代の属州（プロウィンキア、Provincia）であったことにちなみ、プロヴァンス語で"Provenco"や"Provenca"などとも呼ぶ。プロヴァンスの名は現在でも特に観光上の観点から親しまれている。<br>
　地域の区分としては、ローヌ川の左岸（東岸）とヴァール川の右岸とデュランス川の南側で区切られた一帯であり、現在の地域圏でいえばプロヴァンス＝アルプ＝コート・ダジュール地域圏の大部分に当たる。</p>
</div><!--/#content-->
<div id="nav">
<ul>
<li id="home"><a href="#"><span>home</span></a></li>
<li id="about"><a href="#"><span>about</span></a></li>
<li id="product"><a href="#"><span>product</span></a></li>
<li id="shop"><a href="#"><span>shop</span></a></li>
<li id="access"><a href="#"><span>access</span></a></li>
<li id="contact"><a href="#"><span>contact</span></a></li>
</ul>
</div><!--/#nav-->
</div><!--/#wrapper-->
<div id="footer">
<p><small>(c)provence</small></p>
</div><!--/#footer-->
</div><!--/#container-->
</body>
</html>

[CSS]H05・C05

@charset"UTF-8";
body,div,h1,p,ul,li,img{
margin:0;
padding:0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
body{
font-size:14px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height:1.5;
color:#666666;
}
#container{
width:700px;
margin:20px auto;
}
#header{
width:700px;
height:120px;
background-image:url(img/header.gif);
margin-bottom:20px;
}
#wrapper{
width:700px;
overflow:hidden;
margin-bottom:20px;
}
#nav{
width:200px;
}
#content{
width:480px;
float:right;
}
#footer{
width:700px;
height:61px;
background-image:url(img/footer.gif);
}
#header h1{
color:#ffffff;
font-family:
Georgia,
"Times New Roman",
Time,
serif;
padding:36px 0 0 20px;
}
#content p img{
float:right;
margin-left:16px;
}
#nav li{
margin-bottom:3px;
}
#nav li a{
display:block;
width:200px;
height:50px;
}
#nav li a span{
visibility:hidden;
}
#nav li#home{
background:url(img/nav_bg001.gif)no-repeat;
}
#nav li#about{
background:url(img/nav_bg002.gif)no-repeat;
}
#nav li#product{
background:url(img/nav_bg003.gif)no-repeat;
}
#nav li#shop{
background:url(img/nav_bg004.gif)no-repeat;
}
#nav li#access{
background:url(img/nav_bg005.gif)no-repeat;
}
#nav li#contact{
background:url(img/nav_bg006.gif)no-repeat;
}
footer p{
color:#ffffff;
text-align:center;
padding-top:24px;
}

[HTML]H06・C06

<!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="content">
<h1>フンデルトヴァッサー・ハウス</h1>
<h2>ウィーンの市営住宅はこんなに元気だ！</h2>
<p class="photo"><img src="img/ph01.jpg" width="180" height="125" alt="建築写真">旅行中に、「フンデルトヴァッサー・ハウス」へ行ってきました。<br><br>ウィーンの旧市街を取り囲むリングシュトラッセ（環状道路）のやや外側、18〜19世紀に建てられた古風で静かな街並の中を歩いて行くと、この建物が現れます。まず目に飛び込んでくるのは、赤・黄・青・白の鮮やかな色で塗り分けられた外壁。その塗り分け方は、子供の落書きのようにぐにゃぐにゃと曲がっています。窓の大きさは不揃いで、しかも屋上には金色のネギ坊主のようなタワーが生えています。
どこから見てもびっくりするような建物ですが、不思議と周囲の街並に溶け込んでいるのは、壁を覆うツタや、建物から直接生え出したように見える樹々のせいかもしれません。呆気に取られ、なんだか楽しくなってくるこの建物、実はウィーンの市営住宅なのです。<br><br>この建物を作ったのは、ウィーンの画家・建築家フンデルト・ヴァッサー（1923-2000）。親日家で、作品に「百水（hudert wasser）」「豊和」と号することもあります。西欧近代の人工的な環境の在り方に疑問を呈し、「自然は全て曲線であり、直線に神は宿らない」と唱えて、建築物や絵画における直線を否定しました。
1986年に完成したフンデルトヴァッサー・ハウスは、その理念を実現させたもので、彼にとっての最初の建築作品です。<br><br>フンデルトヴァッサー・ハウスは市営住宅なので内部の見学はできませんが、向かいのビル内にショップがあります。また、近くには彼の作品などを展示したクンスト・ハウス・ウィーンがあります。
こちらもヴァッサーによって改装された建物です。日本国内では、大阪市扇町公園に隣接するキッズプラザ大阪や、大阪市環境事業局舞洲工場（ゴミ処理場）で彼の建築物を見ることができます。<br></p>
</div>
<div id="sidebar">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">バックナンバー</a></li>
</ul>
</div>
<div id="footer">
<p class="photo"><img src="img/bg-point.jpg" width="123" height="63" alt="ロゴ"><small>©2013 The Architecture</small></p>
</div>
</div>
</body>
</html>

[CSS]H06・C06

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

body,h1,h2,h3,div,ul,li,p{
  margin:0;
  padding:0;
}
ul{
  list-style:none;
}
img{
  border:0;
  vertical-align:bottom;
}
body{
  font-size:16px;
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo, 
  sans-serif;
  line-height:1.5;
  background:url(img/bg-image.jpg) no-repeat;
  color:#333333;
}

#container{
  overflow:hidden;
  width:640px;
  padding-top:20px;
}
#content{
  padding-top:150px;  
  float:right;
  width:460px;
  margin:-125px 0 0 30px;
}
#sidebar{
  width:150px;
}
#footer{
  clear:both;
}
h1{
  text-align:center;
  margin-bottom:10px;
  color:#993300;
}
h2{
  text-align:center;
  margin-bottom:30px;
  color:#C93;
  line-height:1.3;
}
p.photo{
  margin-bottom:20px;
  }
p.photo img{
  float:right;
  margin-left:1em;
}
#sidebar ul{
  margin-left:18px;
  line-height:2em;
  font-weight:bold;
  padding-top:200px;
}
#sidebar li a{
  color: #00F;
}
#sidebar ul li .this{
  color:#ffff99;
}
#footer p{
  text-align:center;
  margin-left:180px;
  border-top:1px solid #999;
}

[HTML]H07・C07

<!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="content">
<h3>薬玉文様（くすだまもんよう）</h3>
<p>薬玉とは、薬・香料を玉にして錦の袋に入れ、造花や蓬・菖蒲などを飾り、五色の糸を長く垂らしたもの。古代中国で端午の節句に薬玉を柱などに掛け、邪気払いや長寿を祈願する風習が、平安時代に日本へ伝わり貴族の間で行われるようになった。江戸初期以後は、薬玉が民間の女児の玩具として流行。小袖や帯に用いられるほか、吉祥柄のため七五三用などの祝着の文様としても好まれる。</p>
</div>
<div id="footer">
<p><small>©2013 Historical Japan</small></p>
</div>
</div>
</body>
</html>

[CSS]H07・C07

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

body,h3,div,p{
  margin:0;
  padding:0;
}
img{
  border:0;
  vertical-align:bottom;
}
body{
  font-size:16px;
  font-family:
  "Hiragino Kaku Gothic ProN",
  Meiryo, 
  sans-serif;
  line-height:1.5;
  background:url(img/bg.gif);
  color:#333333;
}

#container{
  width:620px;
  height:450px;
  padding:10px;
  margin:110px;
  background:#000000 url(img/image.jpg) no-repeat;
  background-position:245pt 5pt;
  position:absolute;
  margin:-220px 0 0 -310px;
  top:50%;
  left:50%;
}
#content{
  padding-top:140px;
  height:420px;
  margin:-145px 0 0 20px;
}
#footer{
  float:left;
}
h3{
  color:#FC0;
  margin:0 0 20px 16px;
  padding-top:15px;
  float:left;
}
#footer p{
  margin-left:140px;
  color:#CCCCCC;
}
p {
  width: 280px;
  color: #FFFFFF;
  margin-left: 16px;
  line-height: 1.8;
}