このページは、オンライン講座「Web開発入門完全攻略コース」のサポートサイトです。
完成版のHTMLとCSSを掲載します。
エラーが発生した時に見比べたり、動作するコードをコピー＆ペースとして実行したいときなど、個人の学習用にご利用ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS Cafe</title>
<meta name="description" content="かわいい猫のフォトギャラリーです">
<meta name="keywords" content="猫, フォトギャラリー">
<link rel="stylesheet" href="css/html5reset-1.6.1.css">
<link rel="stylesheet" href="css/base.css">
</head>
<body id="home">
<!-- header begin -->
<header id="top">
<h1>CSS Cafe</h1>
<nav>
<ul class="clearfix">
<li class="current"><a href="index.html">ホーム</a></li>
<li><a href="#">商品情報</a></li>
<li><a href="#">店舗紹介</a></li>
<li><a href="#">アクセス</a></li>
<li><a href="#">会社情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<!-- header end -->
<!-- main begin -->
<main class="clearfix">
<div id="main_image">
<img src="images/cafe.jpg" alt="CSS Cafe">
</div>
<!-- main_content begin -->
<div id="main_content">
<section id="info">
<h2>お知らせ</h2>
<dl>
<dt>2018年3月10日</dt>
<dd>リニューアルオープンしました。</dd>
<dt>2018年4月15日</dt>
<dd>4/27（金）は設備メンテナンスのため休業いたします。</dd>
<dt>2018年4月20日</dt>
<dd>ゴールデンウィークは休まず営業いたします</dd>
</dl>
</section>
<section id="campaign">
<h2>キャンペーン情報</h2>
<ul>
<li>日頃の感謝を込めて、パスタ全品がいつもよりお得に！</li>
<li>平日11時から14時までお得なランチタイムを実施中。</li>
<li>バイオリン演奏付きのスペシャルディナーイベントの早期予約受付中。</li>
</ul>
</section>
</div>
<!-- main_content end -->
<!-- sidebar begin -->
<aside id="sidebar">
<ul>
<li>
<a href="#">
<img src="http://via.placeholder.com/300x200" alt="バナー1">
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/300x200" alt="バナー2">
</a>
</li>
</ul>
</aside>
<!-- sidebar end -->
</main>
<!-- main end -->
<!-- footer begin -->
<footer>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="#">商品情報</a></li>
<li><a href="#">店舗紹介</a></li>
<li><a href="#">アクセス</a></li>
<li><a href="#">会社情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
<small>© 2018 CSS Cafe</small>
</footer>
<!-- footer end -->
</body>
</html>
body {
font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
}
/* header */
header {
border-top: 8px solid #614226;
}
header h1 {
font-size: 2.0em;
margin: 40px 0 30px 0;
text-align: center;
}
header nav ul {
width: 940px;
margin: 0 auto 30px auto;
padding-left: 0;
list-style-type: none;
}
header nav ul li {
float: left;
width: 155px;
margin-right: 2px;
text-align: center;
}
header nav ul li:last-child {
margin-right: 0;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
header nav ul li a {
display: block;
padding: 10px 0;
text-decoration: none;
color: #fff;
background-color: #614226;
}
header nav ul li a:hover,
header nav ul li a:active,
header nav ul li.current a {
background-color: #000;
}
/* main */
main {
width: 940px;
margin: 0 auto;
}
main h2 {
font-size: 1.5em;
margin-bottom: 50px;
text-align: center;
}
#main_image {
margin-bottom: 30px;
}
#main_content {
float: left;
width: 600px;
}
#sidebar {
float: right;
width: 300px;
}
#home h2 {
font-size: 1.5em;
margin-top: 0;
margin-bottom: 30px;
padding: 5px 10px;
text-align: left;
border-bottom: 1px solid #614226;
border-left: 10px solid #614226;
}
#info dl {
margin-bottom: 30px;
margin-left: 20px;
}
#info dt {
float: left;
width: 8em;
}
#info dt,
#info dd {
line-height: 1.5;
}
#campaign li {
line-height: 1.5;
margin-left: 20px;
list-style-type: none;
}
/* sidebar */
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar ul li {
margin-bottom: 20px;
list-style-type: none;
}
/* footer */
footer {
padding: 15px;
text-align: center;
color: #fff;
background-color: #614226;
}
footer ul {
margin-bottom: 20px;
/* margin-left: 0 10px; */ /* <- 訂正：この行は不要です。2018/6/29 */
}
footer ul li {
display: inline;
/* margin-left: 0 10px; *//* <- 訂正：この行は不要です。2018/6/29 */
}
footer ul li a {
color: #fff;
}
footer ul li a:link {
text-decoration: none;
}
footer ul li a:hover,
footer ul li a:active {
text-decoration: underline;
}
補足：main h2と#home h2の記述内容に重複があるため、マージすることも可能。今後のコース制作でアップデートを検討中。
受講生の皆さんの個人的な学習にのみご利用いただけます。
営利・非営利問わず二次利用する行為を禁止します。