HP作成の秘密兵器「コピペ用マスターHTML文書」

2010年1月11日（月）

HTML ホームページ制作を生業としている人間だって、一回一回頭から全部手打ちしてるわけじゃなくて基本はコピペなんですよ。
人によって違うとは思いますが、今回は私の「秘密兵器」を公開してみようと思います。
名付けて「コピペ用マスターHTML文書」。
さらに略して「コピペマスター」。
え？いちいち略すんじゃねえよ？・・・あぁそうですか。

私の場合、通常のウェブサイトもWordPressのテーマファイルもまずはこれをコピペすることから作成が始まります。

XHTMLとCSSを一枚に記述しているのは、この方が確認しやすいから。
もちろん公開する時にはCSS部分を外部ファイル化します（後述）。

<!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" />
<title>ページタイトル</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style>
html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, ul, li, dl, dt, dd, table, th ,td, form, fieldset {
	margin: 0;
	padding: 0;
}
body {
	text-align: center;
}
#wrap {
	margin: 0 auto 0 auto;
	width: 950px;
}
#header {
	width: 950px;
	text-align: left;
	background-color: #E8E8E8;
}
#content {
	width: 930px;
	padding: 10px;
	text-align: left;
	background-color: #F8F8F8;
}
#main_content {
	width: 500px;
	float: left;
	display: inline;
	text-align: left;
	background-color: #EEEEEE;
}
#side_content {
	width: 420px;
	float: right;
	display: inline;
	text-align: left;
	background-color: #EEEEEE;
}
#footer {
	width: 950px;
	text-align: left;
	background-color: #DDDDDD;
}
#wrap:after, #header:after, #content:after, #footer:after {
	content: "";
	display: block;
	clear: both;
}
</style>
</head>

<body>

<div id="wrap">

<!--ヘッダー-->
<div id="header">
	<p>ヘッダー</p>
</div>
<!--ヘッダーここまで-->

<!--コンテンツ-->
<div id="content">

	<!--メインコンテンツ-->
	<div id="main_content">
		<p>メインコンテンツ</p>
	</div>
	<!--メインコンテンツここまで-->

	<!--サイドバー-->
	<div id="side_content">
		<p>サイドバー</p>
	</div>
	<!--サイドバーここまで-->

</div>
<!--コンテンツここまで-->

<!--フッター-->
<div id="footer">
	<p>フッター</p>
</div>
<!--フッターここまで-->

</div>

</body>
</html>

©Googlezon

ポイントはCSS（<style>～</style>）一行目で全てのマージンとパディングを「0」にしているところと、大きなブロック（div）を最後にまとめてclear: both;してるところかなぁ。
この2つを忘れると、ブラウザごとの表示がくずれてめんどくさくなるんですよ。

「コピペ用マスターHTML文書」の使い方

まずはテキストエディタを用意して下さい。
作成ソフトで開いてしまうと、XML宣言とか余計なコードが勝手に追加されて台無しになる可能性があります。
おすすめはCrescent Eve。とても使い易いエディタです。

Crescent Eveを立ち上げると「新規テキスト」が表示されますので、上のソースを全てコピー＆貼り付け（ペースト）。
index.htmlと名付けてHTMLファイルとして保存。
上記ソースはUTF-8を指定していますので、文字コードUTF-8で保存してください。

あとは新しく作るサイトに合わせてサイズを調整したり<div>～</div>を埋めていきます。
足りないパーツはdivやpを追加してidまたはclassを指定。それに合わせてCSSも書き足します。

CSSを外部ファイル化

出来上がったら<style>～</style>の中身だけを新規ファイルにコピペ。
style.cssとか適当な名前をつけてindex.htmlと同じフォルダに保存。

index.htmlに残った<style>と</style>は削除して、代わりに

<link rel="stylesheet" href="style.css" type="text/css" />

を記述して完成です。
では、がんばってください。

「めんどくせえ」って人はzipでどうぞ。

master.html（zip）

[ Daisuke ]

こんな記事も書いてます

« 揺れて戻ったGoogle検索

Home

Twitterのビジネスモデル »

コメントはまだありません

管理者 : Daisuke

こんにちは。短気で頑固でお人好しの器用貧乏、Daisukeです
コメントはお気軽にどうぞ。

管理者による内容確認後に表示されます。多少時間がかかる場合がありますのでご了承ください。
メールアドレスや人物の氏名など、個人が特定されるおそれのあるコメントは掲載いたしません。
Gravatarに登録済みの方はメールアドレスを入力するとアバターが表示されます。