ささやかなスタイルシート集

HTML文書に使える、自作のスタイルシートを集めてみました。 スタイルシートはCSSで書かれています。

以下に紹介するスタイルシートは、自由に配布・改変・再利用 して構いません(そのまま使うよりは、自分で積極的に調整した上 で使った方が良いかもしれません)。改変したものの配布について も制限しません。いいのができたら私にも教えてください。このサ イトのファイルに直接リンクすることもできますが、予告なく改変 または削除される可能性があるので、しない方が賢明です。

default.css
用途

私が普段使っているユーザ(読み手)用のスタイルシートで す。和文用に調整しています。Internet Explorer 4.0をお使いの 方は、このファイルを適当なフォルダにセーブして、メニューから 「表示」→「オプション」→「ユーザー補助」とたどって「ユーザ ースタイルシート」の設定をすると使えます。

使用例

スタイルシートの適用前適用後の画像。

jwebreportg.css
用途

やや長めのレポート風の文書を想定したスタイルシートで す。ビットマップ画面への表示を前提としています。和文用。

主な特徴

H2要素には上下に緑色の線がつき、H3要素には左右に緑色 の四角がつきます。また、ADDRESS要素は右寄せにされます(文書の 最後に置くことを想定しています)。

クラスセレクタ
.note

注意書き。左側に2文字分の余白をとります。P要素あるい はDIV要素に使うのが普通と思われます。ただし、スタイルシート を適用しなくてもおかしくないように、先頭に「[注]」などの印を つけておくことをおすすめします。

PRE.sample

細い盛り上がった線で枠がつきます。プログラムやHTML文 書等の例を表すのに使えます。

使用例

好ましいHTML文書を書くための方法 と考え方』など。

jwebarticle2.css
用途

短めのレポート風の文書を念頭に置いて作りました。ビッ トマップ画面への表示を想定しています。和文用。

主な特徴

DIV要素で節・項を表すことを前提にしています(下記参照)。 節・項の中の文章は、左側に余白が取られます。

適用する文書の例:
<DIV class="section">
  <H2>1. はじめに</H2>
  <P>……(文章)……
  <DIV class="subsection">
    <H3>1.1 背景</H3>
    <P>……(文章)……
  </DIV>
  <DIV class="subsection">
    <H3>1.2 目的</H3>
    <P>……(文章)……
  </DIV>
</DIV>
クラス/IDセレクタ
.note
PRE.sample

以上二つは、jwebreportg.css のものと同じ です。

.warningheader

警告の頭書き。色を赤くして太字にします。上記 note クラスを指定した要素の先頭で、「警告」のよ うな文字を入れるのに使うことができます。この場合には、SPANや STRONGのような行内要素に対してこのクラスを指定すると良いでし ょう。

DIV.section

節を表します。上下および左側に少し余白を取ります。 節の見出しはH2要素。

DIV.section H2

DIV.section で左側に余白を取ったのと同じ 分だけ左側にずらします。つまり、節の外側の要素の左端と揃えま す。また、グレーの線を見出しの下につけます。

DIV.subsection

項。節の中にいくつか項があるという使い方を想定してい ます。項の見出しはH3要素。

#toc

目次。行間を少し縮めます。

使用例

CSSの簡単な使い方』な ど。

lynx.css

文字端末用ウェブブラウザ・Lynxの表示を真似します。完全で はないのであまり信用しないで下さい。実用性は無いと思われます。

使用上の注意

1998年7月31日 初版公開
矢野啓介 <yano@moon.email.ne.jp>