既存のテンプレートからカスタマイズすると、余計なものまでゴチャゴチャ付いてきてウザったいです。なので、イチからHTML5でテンプレートを組むことにしました。
と言っても、実際に手を動かしてHTML5でサイトを作った経験はありません。HTML+CSSの知識はチョビっとあり、その延長上の知識として理解している程度です。最終的にテンプレート化できなかったとしても、勉強のために少しづつ作っていく事にします。
で、まずは下記のテンプレートを作ってみました。ごくごく基本となる部分だけで、装飾などは一切ありません。ここから少しづつ手を加えていければと思っています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>記事タイトル｜ブログタイトル</title>
<meta name="author" content="ブログ作者">
<meta name="description" content="ブログ説明">
<meta name="viewport" content="width=device-width">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<style>
/* CSS */
</style>
</head>
<body>
<header>
<hgroup>
<h1>ブログタイトル</h1>
<h2>ブログの説明文</h2>
</hgroup>
</header>
<navi>
<ul>
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
<li><a href="">メニュー4</a></li>
</ul>
</navi>
<article>
<hgroup>
<h1>記事タイトル</h1>
<h2>記事説明文</h2>
</hgroup>
<section>
<h3>記事中見出し</h3>
<p>記事本文</p>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia37l6KzgGbwUKCOgcEoX8MX2lLd8c8HicHKKdOhdXS6al1opOgpSWB4TxmPLZ6X-N4WHq83c5lKcus852PyMe_dOxUENEUKqvLZtdKrcqZRddDvjnjqS3_Sjld4jPfWuwvLmZks765l8/s320/256px-Blogger.svg.png" alt="画像のテキスト">
<figcaption>画像のキャプション</figcaption>
</figure>
</section>
</article>
<aside>
<h3>サイドバー</h3>
</aside>
<footer>
フッター
</footer>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>記事タイトル｜ブログタイトル</title>
<meta name="author" content="ブログ作者">
<meta name="description" content="ブログ説明">
<meta name="viewport" content="width=device-width">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<style>
/* CSS */
</style>
</head>
<body>
<header>
<hgroup>
<h1>ブログタイトル</h1>
<h2>ブログの説明文</h2>
</hgroup>
</header>
<navi>
<ul>
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
<li><a href="">メニュー4</a></li>
</ul>
</navi>
<article>
<hgroup>
<h1>記事タイトル</h1>
<h2>記事説明文</h2>
</hgroup>
<section>
<h3>記事中見出し</h3>
<p>記事本文</p>
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia37l6KzgGbwUKCOgcEoX8MX2lLd8c8HicHKKdOhdXS6al1opOgpSWB4TxmPLZ6X-N4WHq83c5lKcus852PyMe_dOxUENEUKqvLZtdKrcqZRddDvjnjqS3_Sjld4jPfWuwvLmZks765l8/s320/256px-Blogger.svg.png" alt="画像のテキスト">
<figcaption>画像のキャプション</figcaption>
</figure>
</section>
</article>
<aside>
<h3>サイドバー</h3>
</aside>
<footer>
フッター
</footer>
</body>
</html>
このHTMLを表示すると、こんな感じです。
とりあえず今回はここまで。ミスや「ここはこ～したほうがいい」などのアドバイスなどがありましたら、ご指摘お願いします。
スポンサードリンク