最新版のテンプレートサンプル

2009年2月20日

当サイトのテンプレートのサンプルは、2009年当時のかなり以前のものでしたので、最新版のCSSに更新させて頂きました。現在、文字コードは「euc-jp」よりも「utf-8」が主流となっているため、そちらの方で作成しています。

また、DTDについても「HTML4.01 Transitional」ではなく、「XHTML 1.0 Transitional」で作成しました。加えて、レスポンシブデザインでスマホ閲覧時にも最適化してみました。

このテンプレートをレンタルサーバーで確認してみたところ、このような感じになります。HTMLの文法チェックでも特に問題はなかったです。

実際に文字を入れるとこのようになりますが、ホームページ作成の際の練習用に使用してみるとよいでしょう。

こちらのサイトにも無料テンプレートがいくつかあります。
→ ホームページのテンプレートセンター

【追記：】2019年現在、DTDは「HTML5」が主流となってきたため、こちらのテンプレートも既に時代遅れとなってきました。今後はHTML5へ修正したり、OGPのmetaタグなども使用してSNSにも対応されるとよいでしょう。

■htmlファイル

ファイル名：「index.html」
保存文字コード：「utf-8」

htmlファイルの中身

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>あなたのホームページのタイトル</title>
<meta name="keywords" content="ページのキーワード1,2,3" />
<meta name="description" content="ページの説明" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<div id="outer">
<div id="header">
<h1>あなたのホームページのタイトル</h1>
</div>
<div id="main">
<div class="content"><h2>記事ページ見出し1</h2>
<p>文章あれこれ</p>
<h3>記事ページ見出し2</h3>
<p>文章あれこれ</p>
<h4>記事ページ見出し3</h4>
<p>文章あれこれ</p>
</div>
</div>
<div id="right">
<div class="title">サイドバータイトル</div>
<div class="side">
<ul>
<li>記事ページへのリンク</li>
<li>記事ページへのリンク</li>
</ul>
</div>
</div>
<div id="footer">
<div class="copy">© 2010 あなたのホームページ</div>
</div>
</div></body>
</html>

■スタイルシート

ファイル名：「index.css」
保存文字コード：「utf-8」

スタイルシートの中身

body {
background-color:#EBE9E1;
margin:0;
padding:0;
}
#outer {
background-color:#fff;
margin:0px auto;
width:960px;
font-size:13px;
line-height:150%;
padding:0;
color:#222;
}
#header {
height:90px;
}
#main {
width:640px;
float:left;
}
.content {
padding:0 30px 10px 30px;
font-size:13px;
line-height:150%;
}
#right {
width:290px;
color:#004C25;
font-size:13px;
float:left;
}
.title {
height:35px;
line-height:35px;
font-size:13px;
padding:0 0 0 35px;
margin:0;
font-weight:bold;
color:#fff;
background-color:#004C25;
}
.side {
font-size:13px;
padding:6px 0 10px 14px;
margin:0;
background-color:#DBE6DE;
font-weight:bold;
color: #777;
}
.side a{
color:#036;
text-decoration : none;
}
.side a:hover{
text-decoration:underline;
}
ul {
margin: 0 0 0 1em;
padding: 0;
}
li {
list-style:disc; 
}
.side ul {
margin: 0;
padding: 4px 0;
}
.side li {
margin: 7px 0 7px 20px;
list-style:disc; 
padding: 0;
}
p {
margin:1em 0;
line-height:150%;
}
img{
border:0;
}
hr {
border-width: 1px 0 0 0;
border-style: solid;
border-color: #ccc;
height: 1px;
}
a{
font-weight:normal;
color: #036;
}
h1 {
font-size:16px;
text-align:left;
color: #033;
padding:44px 0 0 34px;
margin:0;
font-family: メイリオ, Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
}
h1 a{
font-weight:bold;
color:#033;
text-decoration:none;
}
h1 a:hover{
text-decoration:underline;
}
h2 {
font-size:16px;
margin:0;
padding:7px 0 9px 4px;
border-bottom:1px solid #999;
}
h3 {
font-size:16px;
padding:5px 0 3px 4px;
margin-right: 20px;
}
h4 {
font-size:16px;
padding-left: 4px;
}
#footer {
color:#666;
font-size:12px;
height:110px;
clear:left;
text-align:center;
}
.copy {
padding:20px 0 0 0;
}
blockquote{
border:1px solid #ccc;
padding:5px;
margin:10px;
}
@media screen and (max-device-width: 480px) {
#outer {width:100%;}
#header {width:100%;clear:both;height:70px;}
h1 {padding:34px 0 0 34px;}
#main {width:100%;clear:both;}
.content {clear:both;font-size:120%;padding:0 10px;}
#right {width:100%;clear:both;}
#footer {width:100%;clear:both;}
img {zoom:80%;}
}

■その他

ロボットテキストについてはあえて設置しない方がよいと思いますが、設置する場合は次のように記載するとよいでしょう。

クロールを許可する場合

ファイル名：「robots.txt」
保存文字コード：「UTF-8」

robots.txtの中身