<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カフェレストラン オ・しゃれ</title>
<style>
/* 見出し */
h1{
margin:0.5em 1.5em;
}
/* 記事article */
section{
margin:0 1em;
}
p{
margin-top:0;
font-size:1.1rem;
line-height:1.4rem;
}
/* conceptクラス内の設定 */
.concept{
margin:0 0 0 3em;
}
.concept dd{
margin-left:0;
}
/* 画像に余白を持たせる */
figure{
margin:0 2em 0 1em;
}
/* 補足aside */
aside.info{
margin:2em 0 0 3em;
padding:0;
}
aside th{
vertical-align:top;
text-align:left;
}
/* フッター */
footer{
border-top:1px black solid;
padding-top:0.5em;
text-align:center;
font-size:0.8em;
}
</style>
</head>
<body>
<header>
<h1>Cafe Restaurant O・Share</h1>
<nav>
<ul>
<li><a href="#">Top</a></li>
<li>Concept</li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Concept</h2>
<div>
<dl class="concept">
<dt>豊かな食を贅沢な空間の中でいただく</dt>
<dd>
<p>京都御所正倉院地下3階にある超絶オシャレなレストラン「オ・しゃれ」。</p>
<p>京都市内で取れる地元の山海の珍味をアジアンテイストに調理してお届けします。</p>
</dd>
<dt>歴史あるたたずまい</dt>
<dd><p>794年の開店当初より変わらない落ち着いたたたずまい。悠久の流れを感じる豊かなひとときを。</p>
</dd>
<dt>1000年の時を超えて変わらない味</dt>
<dd><p>創業シェフ秘伝のレシピを守り続け、いつも変わらない安心の味をご提供いたします。</p>
</dd>
</dl>
<figure>
<img src="image/room.jpg" alt="部屋の写真">
</figure>
</div>
</article>
</main>
<aside class="info">
<table>
<tr>
<th>住所</th><td> 〒602-0881<br>京都府京都市上京区京都御苑3<br>京都御所正倉院地下3階</td>
</tr>
<tr>
<th>Tel</th><td>075-211-0000</td>
</tr>
<tr>
<th>FAX</th><td>075-211-0001</td>
</tr>
<tr>
<th>定休日</th><td>年中休</td>
</tr>
</table>
</aside>
<footer>
©794-2016 カフェレストラン オ・しゃれ<br>学習用素材サイト
写真はすべて<a href="https://www.pakutaso.com/" target="_blank">ぱたくそ―フリー写真素材・無料ダウンロード―さんのサイト</a>からいただいたものです。
</footer>
</body>
</html>