読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科1月クラス

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科1月クラスの授業解説ブログです。

HTMLの復習

CSS基礎 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>
広告を非表示にする