練習したコーディングを載せていきます。
目次
東京にある結婚式場のwebサイト
トップページのHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>HOTEL IMPERIAL RESORT TOKYO</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css" media="screen and (max-width: 480px)">
</head>
<body>
<header id="top">
<h1><a href="index.html"><img src="images/logo.png" alt="HOTEL IMPERIAL RESORT TOKYO"></a></h1>
</header>
<nav>
<ul>
<li id="nav_concept"><a href="concept.html">結婚式場のコンセプト</a></li>
<li id="nav_plan"><a href="plan.html">プランのご案内</a></li>
<li id="nav_fair"><a href="fair.html">ブライダルフェア</a></li>
<li id="nav_contact"><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
<div id="graphic">
<ul>
<li class="now"><img class="image1" src="images/slide1.jpg" alt="こだわりの空間で心地よいひとときを"></li>
<li><img class="image2" src="images/slide2.jpg" alt="幸福に満ちた神聖なチャペル"></li>
<li><img class="image3" src="images/slide3.jpg" alt="「ありがとう」の気持ちが伝わるウェディング"></li>
</ul>
</div>
<div id="contents">
<div id="main">
<section id="news">
<h2>お知らせ</h2>
<ul>
<li><time datetime="2014-04-25">2014年04月25日</time>ランチ・ディナーのテイスティングフェア開催決定。ただいまご予約受付中です。</li>
<li><time datetime="2014-03-03">2014年03月03日</time>春の特別見学会</li>
<li><time datetime="2014-02-20">2014年02月20日</time>期間限定の割引プラン</li>
<li><time datetime="2014-02-14">2014年02月14日</time>バレンタインフェア</li>
</ul>
</section>
</div>
<div id="sub">
<aside>
<div class="bnr_inner">
<a href="plan.html">
<dl>
<dt><img src="images/bnr_plan.jpg" alt="プランのご案内"></dt>
<dd>標準のプランをご紹介いたします。</dd>
</dl>
</a>
</div>
<div class="bnr_inner">
<a href="contact.html">
<p><img src="images/bnr_contact.png" alt="お問い合わせ"></p>
</a>
</div>
</aside>
</div>
</div>
<footer>
<p id="pagetop"><a href="#top">ページの先頭へ戻る</a></p>
<address>東京都千代田区X-X-X 電話 0120-000-XXX 営業時間 11:00～20:00(水曜日定休)</address>
<p id="copyright"><small>Copyright ©2014 HOTEL IMPERIAL RESORT TOKYO All rights reserved.</small></p>
</footer>
<script src="js/slideshow.js"></script>
</body>
</html>style.CSS
@charset "utf-8";
/* 基本レイアウト ここから↓ */
@import url(common.css);
html {
scroll-behavior: smooth;
}
body {
background-color: #f3f2e9;
color: #5f5039;
font-size: 87.5%;
line-height: 1.5;
}
header, nav, #breadcrumb, #contents, footer {
margin: 0 auto 0 auto;
width: 840px;
}
header h1 {
margin: 0 0 26px 0;
padding-top: 28px;
text-align: center;
}
nav ul {
overflow: hidden;
margin: 0 0 20px 0;
padding: 0;
list-style-type: none;
}
nav ul li {
float: left;
width: 210px;
}
nav ul li a {
overflow: hidden;
display: block;
padding-top: 44px;
height: 0;
}
nav ul li#nav_concept a {
background-image: url(../images/nav1.png);
}
nav ul li#nav_plan a {
background-image: url(../images/nav2.png);
}
nav ul li#nav_fair a {
background-image: url(../images/nav3.png);
}
nav ul li#nav_contact a {
background-image: url(../images/nav4.png);
}
#contents {
overflow: hidden;
}
.clearfix::after {
content: " ";
display: block;
clear: both;
font-size: 0;
}
#main {
float: left;
width: 570px;
}
#sub {
float: right;
width: 230px;
}
footer {
clear: both;
padding-top: 70px;
}
#main h1 {
margin: 0 0 30px 0;
padding: 35px 0 35px 65px;
font-size: 156.25%;
background-image: url(../images/bg_h1_head.png), url(../images/bg_h1_bottom.png);
background-repeat: no-repeat, no-repeat;
background-position: left top, left bottom;
}
.bnr_inner a p img:hover {
opacity: 0.8;
}
#concept #nav_concept a,
#plan #nav_plan a,
#fair #nav_fair a,
#contact #nav_contact a,
nav ul li a:hover {
background-position: 0 -45px;
}
/* 基本レイアウト ここまで↑ */
/* トップページ ここから↓ */
#news ul {
list-style-type: none;
padding-left: 0;
}
#news ul li {
padding: 20px 0 20px 175px;
border-bottom: 1px dotted #6c5f45;
color: #342300;
text-indent: -175px;
}
#news ul li time {
display: inline-block;
width: 175px;
font-weight: bold;
color: #6c5f45;
text-indent: 0;
}
/* トップページ ここまで↑ */
/* 「結婚式場のコンセプト」ページ ここから↓ */
.concept_box {
overflow: hidden;
margin-bottom: 30px;
}
.image_right {
float: right;
margin-left: 25px;
}
.image_left {
float: left;
margin-right: 25px;
}
.concept_box:last-child,
.concept_box p:last-child {
margin-bottom: 0;
}
/* 「結婚式場のコンセプト」ページ ここまで↑ */
/* 「プランのご案内」ページ ここから↓ */
table {
border-collapse: collapse;
}
caption {
text-align: left;
margin-bottom: 30px;
}
caption p {
margin-top: 0;
margin-bottom: 0;
}
table th, table td {
padding: 15px;
border: 1px solid #6c5f45;
}
table tr th:first-child {
width: 70px;
}
table tbody th,
table tbody td {
vertical-align: top;
}
table thead tr th {
background-color: #eee8cc;
}
table tbody tr:nth-child(odd) {
background-color: #ffffff;
}
table tbody tr:nth-child(even) {
background-color: #f4f2f0;
}
/* 「プランのご案内」ページ ここまで↑ */
/* 「ブライダルフェア」ページ ここから↓ */
.gallery_box {
overflow: hidden;
}
.gallery_box figure {
margin: 0 0 15px 15px;
width: 180px;
float: left;
}
.gallery_box figure:first-child {
margin-left: 0;
}
.gallery_box:first-of-type {
margin-top: 30px;
}
/* 「ブライダルフェア」ページ ここまで↑ */
/* 「お問い合わせ」ページ ここから↓ */
form p {
margin-top: 0;
margin-bottom: 30px;
}
form p:nth-last-child(2) {
margin-bottom: 7px;
}
form p:last-child {
margin-bottom: 0;
}
input[type="text"] {
width: 200px;
}
input[type="email"] {
width: 300px;
}
textarea {
width: 420px;
height: 115px;
overflow-y: scroll;
}
/* 「お問い合わせ」ページ ここまで↑ */
