XHTML1.1とCSS2を利用したWebページを作成する上で工夫した点をまとめておく． XHTMLやCSSそのものについては，“Academic HTML”や“Web KANZAKI”が参考になる． XHTMLのチェックは，“HTML Validator”や“Another HTML-lint gateway”が便利．
新規文書を作成する際に使うテンプレートを示す． 基本方針は以下の通り．
英語ページのテンプレートは下記の通り．
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <link rel="stylesheet" type="text/css" href="./css/memo.css" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="author" content="Takeshi Naemura" /> <title>XHTML1.1 and CSS2 « Memo @ Takeshi NAEMURA</title> </head> <body> Contents <!--#include file="./misc/address.html"--> </body> </html>
赤字の部分は，ファイル毎に書き換える可能性のある部分である． CSS（Cascading Style Sheets）の場所を相対パスで与えておくことにより，HTTPサーバを介さずにファイルを開くことが可能になる． Content-Typeの記述は，本来は不要であるが，文字コードを少しでも確実に伝えるために追記している． 各ページ共通のaddress.htmlをSSIで読み込んでいる．
日本語用のテンプレートは以下の通り． 赤字部分が英語用と違うところ． 現状でベストの選択とは言えないかも知れないが，日本語もUTF-8にしている． 文字コードについて多少の調査をした結果の結論（“文字コードについて”参照）．
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" type="text/css" href="./css/memo.css" /> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="author" content="Takeshi Naemura" /> <title>XHTML1.1 and CSS2 « Memo @ Takeshi NAEMURA</title> </head> <body> 本文 <!--#include file="./misc/address.html"--> </body> </html>
SSIで読み込むファイルは以下の通り．
<p> <br /> </p> <hr /> <address> <a href="http://validator.w3.org/check/referer"> <img style="border:0;width:88px;height:31px" src="./misc/valid-xhtml11.png" alt="Valid XHTML 1.1!" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer/"> <img style="border:0;width:88px;height:31px" src="./misc/valid-css.png" alt="Valid CSS!" /></a><br /> ©<!--#config timefmt="%Y"--><!--#echo var="LAST_MODIFIED"--> <a href="mailto:naemura@hc.t.u-tokyo.ac.jp">Takeshi NAEMURA</a><br /> Last modified: <!--#config timefmt="%Y/%m/%d %X %Z"--> <!--#echo var="LAST_MODIFIED"--> </address>
XHTML1.1とCSSのValidatorへのリンク，コピーライト，ファイル修正日時を表示する． この中から再度SSIを利用しているが，具体的なファイル名を書き込む必要がないため，分離して共通ファイル化することができる． この情報は，HTTPサーバを介したときだけ表示され，ローカルファイルとして開くときには表示されない．
このページで使っているCSSについて簡単にまとめておく． CSSファイルの実体は，“~naemura/public_html/css/”に集めてある． これを“./css/memo.css”なる相対パスでアクセスできるように，ディレクトリの中でリンクを張ってある（後述）． こうしておくと，一部のディレクトリをコピーした際に，CSSもまとめてコピーできて便利というだけで，技術的には必ずしも必要な措置ではない．
memo.cssの中身は下記の通り．
@import url(naemura.css);
table {
border: 1px solid darkgoldenrod;
}
td, th {
border: 1px solid darkgoldenrod;
}
ul {
margin: 1em .5em 1em 2.5em;
}
.pre {
font-family: "ＭＳ ゴシック", sans-serif;
}
共通設定“naemura.css”を読み込んで，表（table）と箇条書き（ul）と等幅フォントを使用するクラス（class="pre"）に関して，memo.css用の設定を追加している．
共通性の高い設定をここにまとめてある．
個人的な趣味として，フォントは“Verdana”と“New Century Schoolbook”が好きなのだが，日本語フォントと混ぜるとやはり微妙に違和感がある． 特に拡大したときの整合性が悪い． 設定としては，普段は“Verdana”と“ＭＳ Ｐゴシック”を利用することにする．
body {
font-family: Verdana, "ＭＳ Ｐゴシック", sans-serif;
margin: 1.5em 24px 1em 72px;
color: black;
background: white url(/~naemura/misc/bg.JPG) fixed no-repeat left top;
}
48×320 pixelの画像を画面左上に背景として貼り付けている． 背景色はwhite色にしている． ガンマ補正などの関係で，モニタによってかなり色の見え方に差があるため，一番シンプルなものを選んだ． 左右両方に24px（48+24=72）ずつ，上端には1.5em，下端には1.0emの余白を設けている．
文字の色はnavy色でbold体に統一する． ページ全体のタイトルに使う“h1”は，画面右上にさり気なく表示する程度に． 大きな区切りになる“h2”は，ivory色の背景と両端を強調した境界線で目立たせる． 中くらいの区切りになる“h3”は，境界線がページを横断する形にする． 小さな区切りになる“h4”は，境界線を点線にする． 最小の区切りになる“h5”は，左に二重線を添える． “h1”と“h2”では，“Verdana”を使用せず，“ＭＳ Ｐゴシック”に限定する．
h1, h2, h3, h4, h5 {
font-style: normal;
font-weight: bold;
color: navy;
}
h1 {
font-family: "ＭＳ Ｐゴシック", sans-serif;
font-size: 130%;
text-align: right;
border-bottom: maroon 3px solid;
margin: 2em 0px 2em 0px;
background-color: transparent;
}
h2, h3, h4, h5 {
text-align: left;
}
h2 {
font-family: "ＭＳ Ｐゴシック", sans-serif;
font-size: 120%;
border-top: 1px solid navy;
border-right: 1em solid navy;
border-bottom: 1px solid navy;
border-left: 1em solid navy;
padding: 5px 5px 5px .75em;
background-color: ivory;
}
h3, h4, h5 {
font-size: 100%;
background-color: transparent;
}
h3 {
border: 1px solid navy;
padding: 3px 3px 3px .75em;
}
h4 {
border-bottom: 1px dashed navy;
padding: 1px 1px 1px .75em;
}
h5 {
border-left: 5px double navy;
padding: 1px 1px 1px .75em;
}
もっと目立たせるためには，色を反転させると画面上では効果的だが，印刷したときに背景色が消えて薄い色の文字だけが残ってしまうという問題がある． したがって“反転”はご法度． 色の指定は，navy，ivory，maroon など，名前の付いている色を採用している（“WEB SAFE COLORS & COLOR NAMES”参照）．
文章は，左右下に0.5emずつ余白を空け，上は近接させる． 各段落のはじまりは，2emだけインデントする．
p {
text-indent : 2em;
margin-top: 0em;
margin-right: .5em;
margin-bottom:.5em;
margin-left: .5em;
}
リンクには下線を引き，まだ開いたことのないURLならblue色で，かつて訪れたことのあるURLならnavy色で表示する． カーソルでクリックできる状態になるとred色に変わり，クリックしてアクティブになった状態では下線を消去する．
a:link {
text-decoration : underline;
color: blue;
background-color: transparent;
}
a:visited {
text-decoration : underline;
color: navy;
background-color: transparent;
}
a:hover {
text-decoration : underline;
color: red;
background-color: transparent;
}
a:active {
text-decoration : none;
color: red;
background-color: transparent;
}
整形済み文書の表示には，等幅フォントを利用して，周囲をdarkgoldenrod色の点線で囲む．
pre {
font-family: "ＭＳ ゴシック", sans-serif;
border: 1px dashed darkgoldenrod;
margin: 2em 4em 2em 4em ;
padding: 1em;
color: black;
background-color: transparent;
}
末尾のアドレス表示は，小さな文字で右に寄せて表示する．
address {
font-size: 80%;
text-align: right;
font-style: normal;
}
特に目立たせたい部分をred色で表示させるためのclassを定義しておく．
.special {
color: red;
background-color: transparent;
}
表などを画面中央に持ってくるためのクラスを定義しておく．
.center {
margin: 1.5em 0 1.5em 0;
text-align: center;
}
図や表を画面右に配置して，回り込みをさせるためのクラスを定義しておく．
.right {
float: right;
margin: 0.5em 0em 1em 1em;
}
研究室では，Apacheを使用している． SSI機能を利用するために，各ディレクトリに下記の内容で“.htaccess”という名前のファイルを作成しておく．
Options +Includes AddType text/html .html AddHandler server-parsed .html
また，各ディレクトリから“~naemura/public_html/misc/”と“~naemura/public_html/css/”へのリンクを張っておく． 例えば，“~naemura/public_html/memo/”の場合には，下記のような作業をする．
% cd ~naemura/public_html/memo/ % ln -s ../misc . % ln -s ../css .
これは，SSIでは相対パスとして，“../misc/”を扱うことができないので，リンクによって“./misc/”で“../misc/”にアクセスできるようにするためである． CSSの方は，通常の使用においては必要ないが，ディレクトリをコピーして使う場合などの利便性を考慮して，このような形にしている．
以上まとめると，新しいディレクトリにファイルを作る場合は，“.htaccess”を作成し，“~naemura/public_html/misc/”へのリンクを張っておけば準備完了．
おしまい．
