このサイトについて(旧)

各ページを構成するブロック要素

各ページの<body>は、<div>と<hr>で構成する。<div>のclassはheader、abstract、article、及びfooterの4種類で、この順に現れる。headerとfooterは各ページにひとつずつ存在するが、articleは複数存在してもよい。abstractは無くてもよい。<hr>はこれらの<div>を仕切るために適宜用いる。

<div class="header">は、すべてのページに共通する冒頭情報(カウンターなど)、このホームページあるいはページごとの内容を表すタイトルを含む。表紙ページでホームページのタイトルを掲げるために<h1 class="sitetitle">を、各ページごとの内容を示すタイトルには<h2 class="pagetitle">を用いる。
<div class="absract">は、ページごとの内容の簡単な説明、背景情報を含む。あってもなくても良い。
<div class="article">は、ページごとの内容の本体を含む。ページごとに最低ひとつは存在する。articleごとにタイトルと内容を記述する場合には、<div class="title">と<div class="content">をセットにして内包してもよい。
<div class="footer">は、ページの最後に必要な付帯情報を含む。目次や表紙のページに戻るためのリンクを置く。記事の作成・更新日時を記入してもよい。<div class="footer">の前には必ず<hr>を置く。

<div class="title">と<div class="content">

<div class="article">には直に内容を記述してもよいが、<div class="title">と<div class="content">をセットにして含んでも良い。

<div class="title">には、スタイルシートのmargin-bottomにより若干の空白を持たせる。最初に<h3 class="chaptertitle">又は<h4 class="title">を用いる。ただし書きなどの条件を示すような内容を、行を改めて書き加えても良い。
<div class="content">は、スタイルシートのmargin-leftにより全体に行頭を下げる。

<div class="content">自体にさらに<div class="title">と<div class="content">を含むことも許す。このことにより、一般の文書に見られるタイトルと内容の階層構造を実現する。

<div>内の文字等と<br>

<div>内の文字や<img>は、必ず<p>か<h数字>で囲み、<div>直下に文字や<img>が現れないようにする。<br>も直下に現れないようにする。

いわゆる「ブロック形式」を用いることとし、段落と段落の間には空白の1行を置く。その場合、例えば、次のようにHTMLを記述する。

<div class="article">
<p>ひとつの段落</p>
<p><br></p>                    <!--1行空白-->
<p>次の段落</p>
</div>

<p>の中では<br>は使わない。改行する際には</p>で閉じる。<h数字>の中では、複数行にわたるタイトルを記述するために、<br>を使ってよい

<div class="header">
<h2>
タイトルの1行目<br>
タイトルの2行目
</h2>
</div>

スタイルシート設定の方針

ページの外観上のレイアウトを独自に整えるために、marginを必要に応じて要素ごとに設定する。

デフォルトで全ての要素のmarginを0ptとする。
~~連動してulには素でmargin-left:12ptが必要となる。~~
(2015/3/8 IE7準拠を止めたため不要となる。以下同じ。)
内容の階層構造により行頭を段階的に下げる。下げ巾は16ptとする。

div.contentのmargin-left:16pt
ul.intableのmargin-left:16pt
ul.betweenparaのmargin-left:16pt ~~28pt(素で12pt必要。更に16pt下げる)~~
table.betweenparaのmargin-left:16pt
.indentのmargin-left:16pt
上下方向の隙間の調整は概ね3pt単位とする。

hrはmargin-top、margin-bottom共に3pt
ul.betweenparaはmargin-top、margin-bottom共に3pt
table.betweenparaはmargin-top、margin-bottom共に3pt

div.titleはmargin-bottomのみ6pt
h2.pagetitleはmargin-top、margin-bottom共に6pt

table.plainとtable.revisionはmargin-top、margin-bottom共に3pt

インライン要素への修飾で、HTMLに直接書き込めるものは<i>、<strong>及び<del>のみとし、それ以外はスタイルシートのクラス指定で定義して、<span>で適用する。

改定日	内　容
2015/3/8	IE7準拠を止め、FireFox、Google Chromeの表示が整うようにHTML4.01 strictに沿って修正。

<div>の使いすぎに関して

HTML/CSSを解説した書籍・サイトでは<div>の使いすぎを戒める記事を見かける。その趣旨として、スタイルシートを適用する範囲を定義する手段として<div>を多用するな、ということである。一方で、記事の論理的構造を定義するための<div>の使用は問題ないものと考える。

記事の論理的構造に外観上の修飾が付随するのであれば、<div>にスタイルシートを設定しても良いと考えられる。しかし、実際のところ、ブラウザーのレンダリングの実装上の問題により、この方法はあまり好ましくない。特に、決められたボックス内に具体的に文字や画像を並べるにあたって、<div>に直に記述した文字や画像はレンダリングに失敗することがある。

したがって、まず論理的構造は<div>で定義し、面倒でも、具体的なレンダリングの枠やスタイルシートの適用対象として<p>や<h数字>を導入することが必要である。このことは、スクリーン上の表示よりも、印刷の際に顕著である。<div>に直に文字を記述してスクリーン上に問題なく表示されても、印刷時に崩れることがある。