jcore.css詳細

ここでは、日本語HTML文書用の汎用のCSSスタイルシート「jcore.css」の詳細を説明する。jcore.cssは筆者が作 成したものだが、誰でも自由にコピー・使用・配布・改造等を行ってよい。た だしその結果については誰も責任を負わない。御意見は電子メールで筆者までお寄せ戴きたい。この文 書はjcore.cssの変更に伴って任意の時点で更新され得る。

動機

現在よく使われているグラフィカルなウェブブラウザによるHTML文書の整 形は、欧文には適しているが、以下の理由から和文(仮名漢字混じり文)にはあ まり適していない。

このため、HTMLの仕様に従って文書をマーク付けしたのに、ブラウザで整 形しても読みやすくならないということになってしまう。

このことはHTMLのタグを不適切な方法で使わせることにつながる。例えば、 行間を空けようとして1行ごとに <p> タグを入れてみた り、段落をP要素ではなくBR要素と和字間隔(またはBR要素の連続)で表そうと したり、あるいはEM要素を使わずにB要素やSTRONG要素で代わりにしたりして いる日本語HTML文書はしばしば見かけるところである。

タグを不適切に使った文書は、書き手のブラウザでは意図通りに見えてい たとしても、読み手の環境では読みづらく表示されてしまう恐れがある。また、 検索エンジンや音声出力ブラウザ、スタイルシート、フォーマット変換プログ ラムなどの本来の力を発揮できなくなってしまう可能性が高い。

こういった問題を解決するにはスタイルシートを使うしかない。典型的な ブラウザのデフォルトのスタイルが和文に適していないと見たところは片端か らスタイルシートで上書きしていくのである。

そこで、和文に適した汎用のCSSスタイルシートを作ることにした。

方針

スタイルシートの詳細

行間

BODYのline-heightプロパティで150%を指定している。これにより、行間は 半角空きとなる。

普通の印刷物で、行間は概ね半角空きから全角空き程度であるので、これ に合わせることが望ましい。ただし、コンピュータの決して広くはない画面上 で読むことを考えると、一覧性の確保も大きな問題となるので、あまり大きく 行間をとることはできない。読みやすさと一覧性との兼ね合いから、半角空き 程度が妥当と判断した。

段落(P要素)

jcore.cssにおける段落の表現は、次のようにする。

こうする理由は、日本語文書の慣習に近づけることで違和感の無いように するためと、画面上で素早く段落の切れ目を判別できるようにするためとの二 つである。

実際のスタイルシートの中では、P要素のtext-indentプロパティで、1emを 指定している。これにより、段落の先頭が1文字分下げられることになる。

ただし、LI要素とDD要素の中(要するに、各種のリストの中)の段落に関し ては、先頭の行の字下げをしない。

見出し(H1〜H6要素)

H1〜H6要素は基本的に章や節の見出しを表すが、H1要素は特に文書全体の 見出し(題と同じ)として扱われることが多い。そこで、H1については text-alignプロパティをcenter (中央揃え)に設定した。H2以下のレベルの見 出しは左寄せ(text-align: left)である。

見出しは大きなサイズのフォントが使われることが多いので、行間を狭め た。具体的にはline-heightを120%にしている。

フォントの大きさに関しては、典型的なブラウザのレンダリングでは見出 しのレベルによるギャップが激し過ぎることが多いので、サイズが極端になら ないよう独自に設定してある。しかし今回採用した個々の値の妥当性について はまだ根拠を得ていない。

余白

BODYのmarginを5%に設定している。これにより、本文の領域の外側に若干 の余白があく。版面率は81%となる(もっとも、スクロールする画面では上下の 空きはあまり関係がない)。

余白があまりに多いとマルチウィンドウ環境では画面の無駄をうむことに なりかねないが、その一方、引用文でもないのにBLOCKQUOTEタグを使って無理 やり余白を作り出しているページをしばしば見かけることも事実である。画面 上でも紙の印刷物と同じように、ある程度の余白は求められるのだろう。

語句要素の強調方法

典型的なウェブブラウザでは、各種語句レベルの要素に対して、斜体のフォ ントを使うことで強調することが多い。この方法は仮名や漢字には馴染まない ので、斜体を排し、他の方法で強調する。

斜体が適用されるのはEM要素(一般的な強調句)とDFN要素(定義語)であるこ とが多いので、この二つについては、通常の書体に戻し(font-styleプロパティ でnormalを指定)たうえで、下線(EM要素の場合)や太字(DFN要素の場合)で強調 する。

なお、下線よりは傍点が使えれば日本語文書として一層自然になるかもし れない。ただし傍点はCSS2に採用されていないのでこの方法は実現できない。 CSS3では実現できるようになるかもしれない。

PRE要素

PRE要素の使い方として、コンピュータのプログラムや設定ファイルといっ たテキストを挿入するのに使うことがしばしばある。こういったテキストは仮 名や漢字でなくアルファベットで書かれていることが多い。また、仮名漢字混 じり文であっても、平文は行間の詰まったコンピュータ端末上で読むことを想 定して書かれていることが多いと考えられる。典型的には電子メールがそうで ある。

PRE要素のこのような特徴に注意して、行間を通常よりも狭め、 line-heightを130%とした。この値は、普通の文章にもそうでないテキストに もそれなりに対応できる「どっちつかず」のものだと思って良い。これは、 HTMLの仕様で定義されるPRE要素型が、整形済みのテキストであるという以上 の意味・役割を表さないことによるものである。

文書にこのスタイルシートを適用する際には、場面ごとのPRE要素の性格に 応じてスタイルを上書きするのも良いだろう。

ADDRESS要素

ADDRESS要素は、文書の終わりの部分で著者の連絡先などを記すのによく使 われる。本来は終わりの部分に来るとは限らないのだが、HTML 2.0仕様書(RFC 1866)に既にそのような記述があるので、ここでは基本的にこの使い方を想定 してスタイル設定を施した。

よくある使い方として、文書の末尾にHR要素(水平線)とADDRESS要素が続け て置かれることがある。この場合の水平線はCSSの枠線(border)で置き換える ことができ、文書の構造と体裁の分離という考え方からは、その方が望ましい という見解もあり得る。

jcore.cssでは、ADDRESSの前にHRがある場合でも無い場合でもおかしくな いように上方向の余白のあけ方を配慮した。というのは、上方向の余白が詰まっ ていると、地の文と取り違える恐れがあるからである。スタイルシートからの 下記の抜粋を御覧戴きたい。

ADDRESS {
  margin: 1.5em 1em 1em 2em; /* assumed in the bottom of the document */
  line-height: 120%;
  font-style: normal;
}

典型的なクラスセレクタ

jcore.cssは基本的にHTMLの要素型に対応するセレクタに対する設定を行っ ているが、例外的に二つのクラスセレクタを設定している。それが PRE.sample と .note である。

PRE.sample

PRE要素でプログラムのコード例などを表すことを想定している。行っ ている設定は、周囲を枠(border)で囲み、行間を通常より狭める(line-height を120%)ことである。

<p>下はJavaのありがちなプログラム例である。</p>
<pre class="sample">
public class TrivialExample {
  public static void main(String argv[]) {
    System.out.println("Hello world.");
  }
}
</pre>
.note

P要素またはDIV要素で「注」を表す場合を想定している。左側の余白 (margin)を2文字分とり、注であることを示している。段落先頭の字下げは行 わない。

このクラスを使う場合は、スタイルシートを適用せずに整形した場合でも 注であることが分かるように、段落の先頭に「※」や「注:」といった目印を 入れることが望ましい。

<p>吾輩は猫である。名前はまだ無い。</p>
<p class="note">【注】ここで「猫」は固有名ではない。</p>

jcore.cssの中からクラスセレクタの設定部分を以下に示す。

PRE.sample {
  line-height: 120%;
  background: #d8e0d0;
  padding: 0.5em;
  border: outset thin #d8e0d0;
}

.note {
  margin-left: 2em;
  text-indent: 0;
}

意図的に指定していない項目

jcore.cssではfont-familyを一切指定していない。

文書の読みやすさにとって書体は大きな要素だが、主に画面の解像度の低 さのために、画面上で読みやすい和文フォントは読み手の計算機環境によって 異なる。デザイン上で特別の主張や必然性がある場合なら別だが、汎用のスタ イルシートでフォントを決め打ちして指定することは現状では現実的でないと 判断した。読み手のブラウザの設定に任せられる。

なお、jcore.cssを元にし上書きするスタイルシートの中でフォントの指定 を行うことは当然あってよい。そうすべきかどうかはそのスタイルシートの目 的によるだろう。

利用法

jcore.cssは汎用のスタイルシートとして作られている。普通の日本語HTML 文書なら、特に何も考えずともLINKタグを一つ書けば読みやすく整形されるよ うになる筈である。HEAD要素内に次のように記せば良い (「jcore.css」の部分はこのスタイルシートがあるURIを書くこと)。 

<link rel="stylesheet" type="text/css" href="jcore.css">

ただし、汎用であるがために、適用結果はいささか地味に映るかもしれな い。人目をひく派手で奇抜なスタイル指定は特殊であり、従って汎用ではない。

文書を派手に飾りたいときには、jcore.cssを元にして、もっと自分用に特 化した(派手な)スタイルシートを書くことができる。日本語文書として基本的 な部分はjcore.cssに任せておき、特殊な部分の設計に専念すれば良いわけで ある。もちろん、jcore.cssで設定している内容を自分のスタイルシートで上 書きしても良い。これはCSSの機構「@import」を使えば簡単にできる。自分の スタイルシートの最初に次のように書く。

@import url("jcore.css");

また、jcore.cssはブラウザで設定して利用者自身のスタイルシートとして 使うこともできる。読み込んだページの中で指定されていない項目については jcore.cssの設定が適用されるわけである。例えば、行間が設定されていない ページを読み込むと、通常は行が詰まって表示されるので読みにくい。ここで、 jcore.cssをユーザのスタイルシートとして設定しておけば、line-heightの設 定が適用されて適度に行間のあいた表示になるわけである。

懸案事項

問題点

1999年9月30日 初版公開
矢野啓介 (yano@moon.email.ne.jp)
このページの権利等は諸注意のページによります。