157ページまで

February 04 [Fri], 2011, 23:59
今日は「第6章 リンクの利用」を学習しました。
次回は7章からです。

「XHTMLとCSSによるWebサイト作成\完成版\6章完成」フォルダの内容全部を
「hiiragi」フォルダへコピーすると一番らくですよ♪

でも。どこが変更されたのか知りたい方のために。
変更箇所がで表示されています。

編集したファイル
・index.html
・point.html
・lent.html
・mystyle.css(cssフォルダ内)

---- inde.xtml ----
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="css/mystyle.css" type="text/css" />
<title>ひいらぎ不動産:トップページ</title>
</head>
<body>
<div class="page">
<p class="logo"><img src="image/logo.gif" width="300" height="56" alt="ひいらぎ不動産" /></p>
<h1>ひいらぎ不動産へようこそ</h1>
<p><em>ひいらぎ不動産</em>は、この街であなたの理想の部屋をお探しいたします。</p>
<p><img src="image/fuukei.jpg" width="525" height="131" alt="風景写真" /></p>
<h2>キャンペーン情報</h2>
<p>2006年1月20日〜2006年2月10日の間にご契約いただいた方は、仲介手数料を半額キャンペーン中。<br />
2006年4月末完成予定のマンション「アイビーハイム青島」の入居者募集中。<br />
詳しくはお電話にてお問い合わせください。</p>
<ul>
<li>TOP</li>
<li><a href="point.html">物件選びのポイント</a></li>
<li><a href="rent.html">おすすめ賃貸物件</a></li>
<li><a href="contact.html">お問い合わせ先</a></li>
</ul>

<address>
Copyright © 2006 Hiiragi Real Estate. All Rights Reserved.<br />
2006年1月20日更新
</address>
</div>
</body>
</html>


----point.html -----
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="css/mystyle.css" type="text/css" />
<title>ひいらぎ不動産:物件選びのポイント</title>
</head>
<body>
<div class="page">
<p class="logo"><a href="index.html"><img src="image/logo.gif" width="300" height="56" alt="ひいらぎ不動産" /></a></p>
<h1><a id="pagetop" name="pagetop">物件選びのポイント</a></h1>
<ul class="point">
<li><a href="#point1">日当たりや風通し</a></li>
<li><a href="#point2">水まわり</a></li>
<li><a href="#point3">セキュリティ</a></li>
<li><a href="#point4">収納</a></li>
<li><a href="#point5">コンセント</a></li>
<li><a href="#point6">その他</a></li>
</ul>

<h2><a id="point1" name="point1">日当たりや風通し</a></h2>
<p><img src="image/hiatari.jpg" width="250" height="187" alt="窓の写真" class="photo" />冷暖房費に影響するため、非常に重要です。日当たりが悪いと湿気が多く、カビなどの原因になります。</p>
<p class="top"><a href="#pagetop">このページの先頭へ</a></p>
<h2><a id="point2" name="point2">水まわり</a></h2>
<p><img src="image/mizuma.jpg" width="250" height="187" alt="洗面所の写真" class="photo" />使い勝手の良し悪しを確認します。実際に水を流して、状態を見ます。洗濯機置き場も忘れずに確認しましょう。</p>
<p class="top"><a href="#pagetop">このページの先頭へ</a></p>
<h2><a id="point3" name="point3">セキュリティ</a></h2>
<p><img src="image/security.jpg" width="250" height="187" alt="防犯窓の写真" class="photo" />ピッキングなどの犯罪を考慮して、鍵の状態を確認します。また、室内を覗かれることがないよう、窓の位置やサイズもチェックしましょう。管理人が常駐しているかどうかも確認しておくとよいでしょう。</p>
<p class="top"><a href="#pagetop">このページの先頭へ</a></p>
<h2><a id="point4" name="point4">収納</a></h2>
<p><img src="image/syuuno.jpg" width="250" height="187" alt="収納の写真" class="photo" />収納量、使い勝手を確認します。幅や高さ、奥行きなども採寸しておくと、何をどこに収納するかを検討する際に役立ちます。</p>
<p class="top"><a href="#pagetop">このページの先頭へ</a></p>
<h2><a id="point5" name="point5">コンセント</a></h2>
<p><img src="image/konsent.jpg" width="250" height="187" alt="コンセントの写真" class="photo" />実際に使用する家具や家電製品の配置を想定し、コンセントの場所や数を確認します。あらかじめ間取り図に書き込んでおくとよいでしょう。</p>
<p class="top"><a href="#pagetop">このページの先頭へ</a></p>
<h2><a id="point6" name="point6">その他</a></h2>
<p><img src="image/kuucho.jpg" width="250" height="187" alt="エアコンの写真" class="photo" />防音や雨戸の状態、エアコンや給湯器の設置場所、使用するガスの種別(都市ガスかプロパンか)などを確認します。ベランダに洗濯物が干せるかどうかも重要なポイントです。室内の汚れや破損もきちんとチェックしておきましょう。また、物件周辺の状況もしっかり把握しておく必要があります。</p>
<p class="top"><a href="#pagetop">このページの先頭へ</a></p>
<ul>
<li><a href="index.html">TOP</a></li>
<li>物件選びのポイント</li>
<li><a href="rent.html">おすすめ賃貸物件</a></li>
<li><a href="contact.html">お問い合わせ先</a></li>
</ul>

<address>
Copyright © 2006 Hiiragi Real Estate. All Rights Reserved.<br />
2006年1月20日更新
</address>
</div>
</body>
</html>

---- rent.html ----
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="css/mystyle.css" type="text/css" />
<title>ひいらぎ不動産:おすすめ賃貸物件</title>
</head>
<body>
<div class="page">
<p class="logo"><a href="index.html"><img src="image/logo.gif" width="300" height="56" alt="ひいらぎ不動産" /></a></p>
<h1>おすすめ賃貸物件</h1>
<p>今月のおすすめ物件です。</p>
<table border="1" summary="おすすめ物件の最寄駅、間取り、賃料を示した表">
<caption>物件一覧表</caption>
<tr>
<th>物件番号</th>
<th>最寄駅</th>
<th>間取り</th>
<th>賃料</th>
<th>物件詳細</th>
</tr>
<tr>
<th class="rowitem">01</th>
<td>東浜崎駅</td>
<td>1LDK</td>
<td>10万2,000円</td>
<td><a href="bukken01.html">物件詳細01</a></td>
</tr>
<tr>
<th class="rowitem">02</th>
<td>東浜崎駅</td>
<td>2LDK</td>
<td>10万5,000円</td>
<td><a href="bukken02.html">物件詳細02</a></td>
</tr>
<tr>
<th class="rowitem">03</th>
<td>青島駅</td>
<td>1LDK</td>
<td>10万8,000円</td>
<td><a href="bukken03.html">物件詳細03</a></td>
</tr>
<tr>
<th class="rowitem">04</th>
<td>青島駅</td>
<td>2LDK</td>
<td>12万9,000円</td>
<td><a href="bukken04.html">物件詳細04</a></td>
</tr>
<tr>
<th class="rowitem">05</th>
<td>河口駅</td>
<td>2DK</td>
<td>9万5,000円</td>
<td><a href="bukken05.html">物件詳細05</a></td>
</tr>
</table>
<ul>
<li><a href="index.html">TOP</a></li>
<li><a href="point.html">物件選びのポイント</a></li>
<li>おすすめ賃貸物件</li>
<li><a href="contact.html">お問い合わせ先</a></li>
</ul>

<address>
Copyright © 2006 Hiiragi Real Estate. All Rights Reserved.<br />
2006年1月20日更新
</address>
</div>
</body>
</html>


---- contact.html ----
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="css/mystyle.css" type="text/css" />
<title>ひいらぎ不動産:お問い合わせ先</title>
</head>
<body>
<div class="page">
<p class="logo"><a href="index.html"><img src="image/logo.gif" width="300" height="56" alt="ひいらぎ不動産" /></a></p>
<h1>お問い合わせ先</h1>
<h2>本店</h2>
<p>住所:〒133-0057 東京都江戸川区西小岩X-X-X<br />
電話:03-XXXX-XXXX<br />
FAX:03-XXXX-XXXX<br />
電子メール:<a href="mailto:abc12345@hiiragi.xx.jp">abc12345@hiiragi.xx.jp</a></p>
<h2>新宿店</h2>
<p>住所:〒160-0005 東京都新宿区愛住町X-X-X<br />
電話:03-XXXX-XXXX<br />
FAX:03-XXXX-XXXX<br />
電子メール:<a href="mailto:def12345@hiiragi.xx.jp">def12345@hiiragi.xx.jp</a></p>
<ul>
<li><a href="index.html">TOP</a></li>
<li><a href="point.html">物件選びのポイント</a></li>
<li><a href="rent.html">おすすめ賃貸物件</a></li>
<li>お問い合わせ先</li>
</ul>

<address>
Copyright © 2006 Hiiragi Real Estate. All Rights Reserved.<br />
2006年1月20日更新
</address>
</div>
</body>
</html>

---- css/mystyle.css ----
h2{
color:#003366;
font-size:120%;
border-left:10px solid #003366;
border-bottom:1px solid #003366;
padding-left:5px
}
address{
color:#003366;
font-weight:bold;
font-size:70%;
text-align:right;
border-top:5px solid #003366
}
h1{
background-image:url(../image/line.gif);
background-repeat:repeat-x;
color:#333333;
font-size:150%;
padding:5px;
margin-top:0
}
p{
font-size:90%;
line-height:140%
}
body{
margin:0;
padding:0;
background-color:#ffffff;
color:#333333
}
.logo{
background-color:#003366;
margin:0
}
.page{
width:700px
}
.photo{
float:right;
margin-left:10px
}
.top{
clear:both;
text-align:right
}
ul li{
list-style-image:url(../image/list.gif);
font-weight:bold;
margin-left:10px;
margin-bottom:10px
}
table{
border-collapse:collapse;
border:1px solid #003366;
width:525px;
font-size:90%;
color:#003366
}
th{
background-color:#9999ff;
border:1px solid #003366;
padding:10px
}
.rowitem{
background-color:#ccccff
}
td{
border:1px solid #003366;
padding:10px
}
caption{
font-weight:bold
}
.point a:link{
color:#336699
}
.point a:visited{
color:#666666
}
.point a:hover{
color:#cc6699
}
a img{
border:0
}


P R
2011年02月
« 前の月  |  次の月 »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28
最新コメント