すぐに使えるXHTML 1.0 Strict テンプレートファイル

毎回毎回HTMLの宣言文を記入したり、CSSファイルのリンクなど準備するのが面倒ですよね。テンプレートファイルを準備して制作の度に引き出してくれば良いだけの話なのですが、ファイル管理の苦手なボクは結局一から作り直したりしていました。

そんなモノグサさんのためのいつでも引きさせるようにしたHTMLテンプレートダウンロードのページです。

HTML構文のソースとダウンロードファイル

ソース

下記に記述されているhtml構文は『XHTML 1.0 Strict』です。文字コードは『UTF-8』で記述してあります。ソースを引用したい場合はコピペしてください。

CSSやリセットCSSを含めたファイルが必要な場合は下記ダウンロードからどうぞ。

ダウンロードファイルについて

  • index.html
  • index.html/style.css
  • index.html/style.css/reset.css

スタイルシートは<head>~</head>部分に<link rel="*">を記述して読み込んでいます。ディレクトリは下層『/css』で指定。必要に応じて修正してください。

XHTML 1.0 Strict ※ソース 横幅800px センターボックス

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
<title>ページタイトル</title>
<meta name="description" content="ページ概要">
<meta name="keywords" content="キーワード1,キーワード2">
<link rel="stylesheet" href="css/style.css" media="all" type="text/css" />
</head>

<body>
<div id="wrapper"><!--▼ここから-->

<h1>オレのWEBPAD</h1>
<p>WEB制作に便利なテンプレートサイト。</p>

</div><!--△ここまで-->
</body>
</html>

style.cssについて

index.htmlから<link rel="stylesheet" href="css/style.css" media="all" type="text/css" />で関連づけています。CSSファイルは『/css』を作成し、その中に保存してあります。必要に応じて変更してください。

CSS ソース 横幅800px センターボックス

@charset "utf-8";

body{
padding: 0;
margin: 0;
text-align: center;
}

/*|||||||||| MAIN ||||||||||*/
#wrapper{
width: 800px;
text-align: left;
margin: 0 auto;
}

reset.cssについて

各ブラウザで指定されているスタイルシートを初期化するCSSファイルです。用途に応じて不必要な記述は消去してください。リセットCSSはいくつかあるとは思いますが、Eric Meyer’s Resetを準備しました。

style.css内にて@import url("reset.css");で関連づけています。こちらも必要に応じて修正してください。

リセットCSS ソース Eric Meyer’s Reset

@charset "utf-8";

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
 
/* remember to define focus styles! */
:focus {
    outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

SEO関連

googleなどの検索エンジンはロボットが巡回して情報を拾っていきます。サイトページ内のロボット巡回を許可するか否かの記述が下記のソースになります。<head>~</head>内に必要に応じて記述してください。

googleロボットは『ROBOTS』部分を『GOOGLEBOT』と記述してください。

ロボット巡回　許可

<meta name="ROBOTS" content="INDEX, FOLLOW">

ロボット巡回　禁止 完全に禁止します。

<meta name="ROBOTS" content="NOINDEX,NOFOLLOW,NOARCHIVE">

また、画像に対して禁止する事もできます。

画像を検索させない　禁止

<meta name="ROBOTS" content="NOIMAGEINDEX">

画像に対する直接リンク　禁止

<meta name="ROBOTS" content="NOIMAGEINDEX">

細かな制御については下記サイトで詳しく紹介されています。
そちらをご覧ください。

Let’s HSP! 様　検索エンジンロボット拒否タグ