CSSによるレイアウト

このサイトのレイアウトはCSSを使って制御しています。CSSを推す意見の中にはそれこそ実利的なものから教条主義的なものまでいろいろあります。しかし、感情論を廃しても以下のような特徴がなお残ります。

サイト全体のレイアウトを一枚のスタイルシートで制御できる
コンテンツを書くときにどのようにレイアウトするかを強く意識しなくていい
多様なブラウザに比較的楽に対応できる

こういった利点が手に入る以上、HTML/CSSの標準に従うのは苦痛ではなく魅力です。以下、自分のためのメモも兼ねて、このサイトでCSSをどんな風に使ってレイアウトを制御しているか説明します。

単位について

CSSでレイアウトを指定する場合、単位を何にするかは迷うところです。このサイトではレイアウト指定の単位は原則として次のようになっています。

線の太さは"px"で指定。
その他の指定は"em"

メニューの幅なども"em"を使用しているため、ブラウザ側で文字を拡大してもレイアウトが壊れにくくなっています。

サイドメニューのレイアウト

メニューの位置

SSIを使ったメニューで説明しているように、このサイトのページはメニューをSSIを使って読み込んでいます。読み込んだメニューのうち、大カテゴリを与えるナビゲーションメニューは上下に配置します。カテゴリ中の詳細を与えるサブメニューを左横に配置します。この配置は.menuクラスのfloat要素にleftを指定することで実現しています。

<!-- ssiファイルの中のメニューの宣言 -->
<DIV class="menu">   <!-- ssiファイルの中のメニューの宣言 -->
<UL>
  <LI>サイト情報

  ...

</DIV>

/* hpbsite.cssの中のメニューに関する宣言 */
.menu{

...

  float : left; 
}

メニューに対して本文はcontentsクラスです。このクラスは特に配置指定はしません。メニューはDIVタグで囲むことでブロック要素として配置されます。これに続けて<p>などのインライン要素をおいて行くと、それらはfloat : left 指定されたブロック要素を避けてページに流し込まれます。しかし、今回望むのはこういった流し込みではなく、縦二列の段組ですので、ページコンテンツ自身もDIVタグで囲んでブロック要素にします。

ところで、このサイトはHTML記述で見るとコンテンツの前にメニューをおいています。しかし、CSSでメニューを再配置しますからこの順番は逆でもかまいません。メニューをあとにおいておけば、読ませたいコンテンツから先に表示してあとかでメニューを表示という変形も可能ですので代替CSSが生きてきます。…と、いうことをあとで知ったのですが後の祭りでした。といことで、これからやる人は先のことも考えておくといいでしょう。

<!-- css.shtmlの中のボディーの開始部分 -->
<BODY> 

...

<DIV class="contents">  <!-- ページのコンテンツ -->
<H1>CSSによるレイアウト</H1>

/* hpbsite.cssの中のコンテンツに関する宣言 */
.contents{
  margin-left : 14em;
  min-height : 25em;
  overflow : hidden;
}

メニュー項目

サイドメニューの項目はそのカテゴリー内部の文書の構造をあらわすように字下げしています。字下げはクオートを使わず、リストで実現しています。文書構造の表現に入れ子のリストを使うのは自然なアプローチです。

なお、メニューのリストには特別なクラス属性はつけていません。そのかわりにスタイルシート側でメニューの中のリストに対してのみ適用されるスタイルを定義しています。

/* メニューの中のリスト */
.menu ul{
  margin : 0em;
  padding : 0em;
}

/* メニューの中のリストアイテム */
.menu li{
  margin-left : 0.8em;
  list-style : none;   /* 行頭の記号はなし */
}

イメージのレイアウト

イメージのレイアウトはほとんどの場合ブロック表示として横長に配置していますが、一部縦長のものを右端に表示している部分もあります。ここでは横長表示について説明します。

最近は図に必ず図番（キャプション）を付けるようにしています（例：ポリフェーズ分解）。この場合、下のHTML例のように図自身と図番を組にしてDIV要素で囲み、ひとつのブロックとして扱います。

<DIV class="holizontalimage">
  <IMG src="polyphase05.png" border="0" width="250" height="118" alt="インパルス応答">
  <P>図1 インパルス応答</P>
</DIV>

こうして囲ったブロックは以下のようにCSSの中で中央揃えとして配置します。図番はブロック要素として扱うことによって、図の横ではなく下に配置されます。また、図の場合背景画像を指定して他の部分からしっかり分離して見えるよう工夫をしています。

.holizontalimage, .holizontalpicture{
  text-align : center;     /* 中央揃え */
  margin-top : 0.5em;
  margin-bottom : 0.5em;
}

/* 図番表示 */
.holizontalimage p, .holizontalpicture p {
  display : block;         /* 図番はブロック要素扱いにして、図と縦に表示する */
  font-weight : bold;
}

/* Style for pictures */
.holizontalimage img, .virticalimage img{   /* 背景画像と余白の指定 */
  background : transparent url(pict_background.png) repeat-y left center;
  padding : 20px;
}

.contents img {  /* 図も絵も中揃え */
  margin-right : auto;
  margin-left : auto;
}

このサイトではイメージを図と絵に分けています。

図: ブロックダイアグラムなどの説明用のイメージ
絵: 写真やスクリーンショット

図は元のデータの背景を透明にすることで背景画像と合成できるようになっています。絵は背景が不要なので、そのような操作はしていません。本来なら図はfigureとしたほうがいいのですが、サイト開設時には図と絵を同じものとして扱っていたのでほとんどの図にholizontalimageを使っていました。仕方なくCSSのクラス名では図をimageとしています。

表のレイアウト

表は<body>要素の下でセンタリングします。要素は整数、小数点数、シンボル、識別子（文字列）に分けて揃えかたを指示します。

.contents table {
  border-collapse : collapse;
  border-style : solid;
  border-color : gray;
  border-width : 1px;
  margin-top : 0.5em;
  margin-bottom : 0.5em;
  margin-right : auto;
  margin-left : auto;
  text-align : left;
}

.contents td {
  border-style : solid;
  border-color : gray;
  border-width : 1px;
  padding-right : 0.25em;
  padding-left : 0.25em;
}


.contents th{
  color : black;
  background-color : #dcdacb;
  border-style : solid;
  border-color : gray;
  border-width : 1px;
  padding-right : 0.25em;
  padding-left : 0.25em;  
  text-align : center;
}

/* Alignment for Table contents */

table .integer {
 text-align : right;
}

table .point {
 text-align : '.';
}

table .symbol {
 text-align : center;
}

table .identifier {
 text-align : left;
}

プログラムのレイアウト

プログラムは<pre>要素の中に書きます。プログラムを各部分はへこんだような視覚効果を与えるために、ボーダーの色を工夫しています。本来これはborder-styleで簡単に指定できるはずですが、Mozilla 1.0の表示に満足できなかったので自分でボーダーの色と幅を指定しました。

<PRE class="example">/* Example code sstyle control. Use with &quot;pre&quot; */

/* Example code sstyle control. Use with "pre" */
.example, .syntax, .terminalsymbo, .expression{
  margin-top : 1em;
  margin-bottom : 1em;
  margin-right : 1px;
  margin-left : 1px;
  padding-left : 2em;
  padding-top : 1em;
  padding-bottom : 1em;
  padding-right : 1em;
  border-width : 1px;
  border-style : solid;
  border-color : gray white white gray;
  color : black;
  background-color : #e0e0d8;
  overflow : hidden;
}

矢印のレイアウト

MozillaやOperaを使ってこのサイトを見ると、画面左下に常に上向き矢印が表示されます。これはページトップへジャンプするためのアイコンです。

<DIV class="floatnav">
  <A href="#pagetop">
    <IMG title="ページトップへ" src="/ssi/go_top.png" border="0">
  </A>
</DIV>

.floatnav{
  position : fixed;
  width : 15px;
  height : 15px;
  bottom : 15px;
  left : 2px;
}

ざっと確かめると互換性はこんな感じでした。Operaが気難しかった記憶がありますが、今は大丈夫です。

ブラウザ	可否
Mozilla 1.0.2	○
Mozilla 1.2.1	○
Opera 6.0.5	○
Opera 7.0.1	○
IE 5.0, 5.5, 6.0	×