ブログ一覧ページの作成
ブログ一覧ページはトップページで作成したブログのパーツを流用しますので、記述例をコピーしてHTMLを作成しましょう。
ファイル名を blog.html としてください。
記述例
blog.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ブログ一覧</title>
<link rel="stylesheet" href="http://www.kanda-it-school-square.com/sample/css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<!-- ヘッダー ここから -->
<div class="box-column">
<header id="header">
<div class="header-top">
東京都港区で創業50年の歴史を誇る 株式会社サンプル では、
皆様の生活により根ざしたサービスを展開するよう、日々研究開発をしております。
</div>
<div class="box-column clearfix">
<div class="box-column float-left w66">
<a href="index.html">
<h1>Company Name</h1>
</a>
<p>Your Company Slogan</p>
</div>
<div class="box-column float-left w33 header-info">
<p>電話: <span>012-3456-7890</span></p>
<p>受付時間: 平日 AM 10:00 〜 PM 5:00</p>
</div>
</div>
</header>
</div>
<!-- ヘッダー ここまで -->
</div>
<!-- ナビゲーション ここから -->
<div class="box-column">
<nav class="navigation">
<div class="container">
<ul class="clearfix">
<li><a href="index.html">トップページ</a></li>
<li><a href="service.html">サービス案内</a></li>
<li><a href="company.html">会社案内</a></li>
<li class="active"><a href="blog.html">ブログ</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</div>
</nav>
</div>
<!-- ナビゲーション ここまで -->
<!-- タイトルバー ここから -->
<div class="box-column">
<div class="title-bar">
<div class="container">
<h2>ブログ</h2>
</div>
</div>
</div>
<!-- タイトルバー ここまで -->
<div class="container">
<div class="box-column clearfix">
<div class="box-column float-left w66">
<!-- ブログ ここから -->
<div class="blog">
<ul>
<li class="clearfix">
<div class="blog-img">
<a href="blog.html">
<img src="/sample/htmlcss/html5_chapter10/demo/images/0004.jpg" alt="" width="100" height="100">
</a>
</div>
<div class="blog-info">
<h3><a href="blog_entry.html">月一恒例の町内清掃で、嬉しい言葉をかけてもらいました！</a></h3>
<span>2015年6月11日</span>
<p>弊社では月に一度の恒例行事として、会社の敷地周辺の町内清掃を5年ほど前から行っています。</p>
<a class="button" href="blog_entry.html">記事を読む</a>
</div>
</li>
<li class="clearfix">
<div class="blog-img">
<a href="blog.html">
<img src="/sample/htmlcss/html5_chapter10/demo/images/0005.jpg" alt="" width="100" height="100">
</a>
</div>
<div class="blog-info">
<h3><a href="blog_entry.html">営業2課、吉田の結婚式に出席してきました。</a></h3>
<span>2014年8月13日</span>
<p>営業2課の吉田が結婚をいたしまして何人かのスタッフと一緒に式に参加してきました。</p>
<a href="blog_entry.html" class="button">記事を読む</a>
</div>
</li>
</ul>
</div>
<!-- ブログ ここまで -->
</div>
<div class="box-column float-left w33">
<!-- SNSリスト ここから -->
<aside class="share">
<ul>
<li>
<a href="#">
<img src="images/bnr_facebook.png" alt="Facebookバナー">
</a>
</li>
<li>
<a href="#">
<img src="images/bnr_twitter.png" alt="Twitterバナー">
</a>
</li>
</ul>
</aside>
<!-- SNSリスト ここまで -->
</div>
</div>
<!-- フッター ここから -->
<div class="box-column">
<footer id="footer">
<div class="box-column clearfix">
<div class="box-column float-left w33">
<h1>Company Name</h1>
<p>Your Company Slogan</p>
<div class="footer-company-info">
<p>〒000-0000</p>
<p>愛知県あま市○○○丁目○○番地</p>
<p>電話:012-3456-7890</p>
<p>受付時間: 平日 AM 10:00 〜 PM 5:00</p>
</div>
</div>
<div class="box-column float-left w66">
<ul class="clearfix">
<li><a href="index.html">トップページ</a></li>
<li><a href="service.html">サービス案内</a></li>
<li><a href="company.html">会社案内</a></li>
<li><a href="blog.html">ブログ</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</div>
</div>
<p class="copyright">Copyright © 株式会社サンプル, all rights reserved.</p>
</footer>
</div>
<!-- フッター ここまで -->
</div>
</body>
</html>
これで、ブログ一覧ページの完成です。
続けて サービス案内ページの作成 を見てください。
