ブログ一覧ページの作成
ブログ一覧ページはトップページで作成したブログのパーツを流用しますので、記述例をコピーして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>
<header class="clearfix">
<p class="description">東京都港区で創業50年の歴史を誇る 株式会社サンプル では、皆様の生活により根ざしたサービスを展開するよう、日々研究開発をしております。</p>
<div class="company-info">
<a href="index.html">
<h1>Company Name</h1>
</a>
<p>Your Company Slogan</p>
</div>
<div class="contact-info">
<p>電話: <span>012-3456-7890</span></p>
<p>受付時間: 平日 AM 10:00 〜 PM 5:00</p>
</div>
</header>
</div>
<!-- ヘッダー ここまで -->
<!-- ナビゲーション ここから -->
<div>
<nav>
<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>
</nav>
</div>
<!-- ナビゲーション ここまで -->
<!-- メイン画像 ここから -->
<div class="box-column">
<div class="title-bar">
<div class="container">
<h2>ブログ</h2>
</div>
</div>
</div>
<!-- メイン画像 ここまで -->
<div class="clearfix">
<div class="main">
<!-- ブログ ここから -->
<div class="blog">
<ul>
<li class="clearfix">
<div class="blog-img">
<a href="blog.html">
<img src="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="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="sidebar">
<!-- 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>
<footer>
<div class="clearfix">
<div class="footer-left">
<a href="index.html">
<h1 class="footer-logo">Company Name</h1>
<p>Your Company Slogan</p>
</a>
<p>〒000-0000</p>
<p>愛知県あま市○○○丁目○○番地</p>
<p>電話:012-3456-7890</p>
<p>受付時間: 平日 AM 10:00 〜 PM 5:00</p>
</div>
<div class="footer-right">
<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>
これで、ブログ一覧ページの完成です。
続けて サービス案内ページの作成を見てください。