counter

このサイトについて

このホームページは、HTMLのみを用いて大変遅れたスタイルで記述していましたが、最近の動向や標準に準拠すべく更新作業を行いました。外観はほとんど変化はありませんが、原則としてHTML4.01に従い、スタイルシート(CSS)を全面的に採用しています。次の書籍を参考にしています。


HTMLタグ+スタイルシート辞典ちび
著者:(株)アンク/出版社:翔泳社
ISBN4-7981-1103-1


ここに示すものは、HTMLとCSSの観点からこのホームページの各ページが系統的に構成できるように、私自身の備忘録としてまとめたものです。


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

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



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

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



<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を必要に応じて要素ごとに設定する。



インライン要素への修飾で、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>に直に文字を記述してスクリーン上に問題なく表示されても、印刷時に崩れることがある。