自分がよく使う2カラムXHTMLのフォーマット

2008/04/14

カテゴリ：: HTML

タグ：: XHTML

自分がよく使うHTMLのフォーマット

画像は先日の使いまわしだったりする。
HTMLを組むときに、いつもだいたい同じフォーマットを使っているので、
自分のメモ代わりに載せておきます。

XHTMLのフォーマット

左側がシンプルなほうで、
右側が２カラムになっている部分をdivでまとめているもの
ボタンを押すと、必要なフォーマットがでてくる。
どちらもxml宣言があるが、必要に応じて削除しよう。

<?xml version="1.0" encoding="utf-8"?>
<!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" />
<title>■ここにタイトル■</title>
<meta name="description" content="■ここにページの説明■" />
<meta name="keywords" content="■ここにキーワード■" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="■CSS■" media="■media■" />
<script type="text/javascript" src="■JavaScript■"></script>
</head>
<body>

<!-- ●container -->
<div id="container">

    <!-- ●header -->
    <div id="header">
    </div>
    <!-- ■/div -->

    <!-- ●main -->
    <div id="main">
    </div>
    <!-- ■/main -->

    <!-- ●side -->
    <div id="side">
    </div>
    <!-- ■/side -->

    <!-- ●footer -->
    <div id="footer">
    </div>
    <!-- ■/footer -->

</div>
<!-- ■/container -->

</body>
</html>

<?xml version="1.0" encoding="utf-8"?>
<!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" />
<title>◆ここにタイトル</title>
<meta name="description" content="◆ここにページの説明" />
<meta name="keywords" content="◆ここにキーワード" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="◆CSS" media="◆media" />
<script type="text/javascript" src="◆JavaScript"></script>
</head>
<body>

<!-- ●container -->
<div id="container">

    <!-- ●header -->
    <div id="header">
    </div>
    <!-- ■/div -->

    <!-- ●content -->
    <div id="content">

        <!-- ●main -->
        <div id="main">
        </div>
        <!-- ■/main -->

        <!-- ●side -->
        <div id="side">
        </div>
        <!-- ■/side -->

    </div>
    <!-- ■/content -->

    <!-- ●footer -->
    <div id="footer">
    </div>
    <!-- ■/footer -->

</div>
<!-- ■/container -->

</body>
</html>