<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>cafe</title>
<link href="JOHO.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
<header>
<div id="header_inner">
<div id="header_logo">
<p>情報処理特講a</p>
</div>
</div>
</header>
<div id="main_image">
<div id="main_image_inner">
<h1>カフェめぐり</h1>
</div>
</div>
<main>
<section id="section01">
<div class="scroll">
<h2>酒田の美味しいカフェの特集です</h2>
</div>
<nav>
<ul id="main_nav">
<li><a href="#div01">1.タカミダイ</a></li>
<li><a href="#div02">2.アンデス</a></li>
</ul>
</nav>
<div class="contents" id="div01">
<div class="left" id="photo01">
<img src="Takamidai.JPG" alt="カレー" >
</div>
<div class="right text">
<h4>1.タカミダイ</h4>
<p>テキストテキストテキストテキストテキストテキストテキストテキ
ストテキストテキストテキストテキストテキストテキストテキストテキ
ストテキストテキストテキストテキストテキスト</p>
<div class="contact_right main_contact_inner">
<a href=" PageTAKAMIDAI.html" class="contact_right_inner">
<p>くわしく見る</p>
</a>
</div>
</div>
</div>
<div class="contents padding" id="div02">
<div class="left text">
<h4>2.アンデス</h4>
<p>テキストテキストテキストaaaaaaaaaaaaaaaテキストテキストテキ
ストテキストテキストテキストテキストテキストテキストテキストテキ
ストテキストテキストテキストテキストテキスト</p>
<div class="contact_right main_contact_inner">
<a href="PageANDESU.html" class="contact_right_inner">
<p>くわしく見る</p>
</a>
</div>
</div>
<div class="right" id="photo02">
<img src="kare-doria.JPG" alt="カレードリア">
</div>
</div>
</section>
</main>
<footer>
<p>joho</p>
</footer>
</div>
</body>
</html>
