webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

HTMLの復習

前回作った表組にCSSや他のコンテンツを追加してみましょう。



宿泊料金表
部屋タイプ ツイン シングル
グレード スタンダード エグゼクティブ スイート スタンダード エグゼクティブ
平日 15,800円 20,800円 58,000円 9,800円 14,800円
休前日 19,800円 25,800円 12,800円 17,800円

共通室内設備

Wi-Fi
加湿空気清浄機
液晶テレビ
冷蔵庫


シングル・スタンダードルーム
最上階12階に位置し、「シンプルさの中のさりげない上質感」をコンセプトとした、ゆっくりくつろげるお部屋です。

ツイン・スタンダードルーム
上層階に位置しスタイリッシュな内装とグループやファミリーの滞在に便利なアメニティをそろえています。

間取り図

シングルルーム
f:id:yachin29:20160307135646g:plain
ツインルーム
f:id:yachin29:20160307135652g:plain


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLとCSSの復習</title>
<style>
html,body,header,footer,h1,h2,h3,p,ul,li,dl,dt,dd,small {
margin: 0;
padding: 0;
line-height: 1.0;
}
ul {
list-style: none;
}
img {
vertical-align: bottom;
}
body {
background: #DDDDDD;
}
#container {
width: 960px;
margin: 0 auto;
background: #FFFFFF;
}
header {
width: 960px;
height: 350px;
background: url(img/header.png) no-repeat;
}
table,th,td {
border: 1px solid #000000;
border-collapse: collapse;
}
table {
width: 700px;
margin: 40px auto 60px;
}
th,td {
padding: 10px;
}
th {
background-color:firebrick;
color: white;
}
caption {
margin-bottom: 20px;
}
td.price {
text-align: right;
}
h2 {
margin: 0 0 20px 60px;
}
ul {
margin: 0 0 40px 80px;
}
li {
margin: 10px 0;
}
dl {
margin:0 0 60px 80px; 
}
dt {
margin-bottom: 10px;
font-weight: bold;
font-size: 22px;
}
dd {
line-height: 1.8;
margin-bottom: 60px;
}
h3 {
margin: 0 0 10px 100px;
}
p.photo {
margin: 0 0 40px 100px;
}
footer {
width: 960px;
height: 100px;
background-color:darkkhaki;
}
footer p {
font-size: 28px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>ホテル・フェリカ</h1>
</header>
<div id="content">
<table>
<caption>宿泊料金表</caption>
<tr><th>部屋タイプ</th><th colspan="3">ツイン</th><th colspan="2">シングル</th></tr>

<tr><th>グレード</th><td>スタンダード</td><td>エグゼクティブ</td><td>スイート</td><td>スタンダード</td><td>エグゼクティブ</td></tr>

<tr><th>平日</th><td class="price">15,800円</td><td class="price">20,800円</td><td rowspan="2" class="price">58,000円</td><td class="price">9,800円</td><td class="price">14,800円</td></tr>

<tr><th>休前日</th><td class="price">19,800円</td><td class="price">25,800円</td><td class="price">12,800円</td><td class="price">17,800円</td></tr>
</table>
<h2>共通室内設備</h2>
<ul>
<li>Wi-Fi</li>
<li>加湿空気清浄機</li>
<li>液晶テレビ</li>
<li>冷蔵庫</li>
</ul>
<dl>
<dt>シングル・スタンダードルーム</dt>
<dd>最上階12階に位置し、「シンプルさの中のさりげない上質感」をコンセプトとした、ゆっくりくつろげるお部屋です。</dd>
<dt>ツイン・スタンダードルーム</dt>
<dd>上層階に位置しスタイリッシュな内装とグループやファミリーの滞在に便利なアメニティをそろえています。</dd>
</dl>
<h2>間取り図</h2>
<h3>シングルルーム</h3>
<p class="photo"><img src="img/01.gif" alt="#"></p>
<h3>ツインルーム</h3>
<p class="photo"><img src="img/02.gif" alt="#"></p>
</div>
<footer>
<p><small>copyright 2017 hotel felica</small></p>
</footer>
</div>
</body>
</html>
広告を非表示にする