この文書は、ja.oo.o で使用している独自スタイルシートに定義されているスタイルを、どのような局面で指定すればいいのかについてまとめたものです。現在、このページで説明の対象となっているのは basic_sc.css、docs_sc.css の二種類ですが、将来的にもちろん増える可能性があります。
なお、説明は class または id 属性に指定するスタイルについてのみ行っています。タグそのものにスタイルが付いているものについては説明していません。どのようなスタイルが付いているのか興味がある方は、ご自身で確認してみてください。
このページで使用している画像はコバさんによって素材掲示板に提供されたものです。ありがとうございます。
basic_sc.css について
このファイルは ja.oo.o 全体で共通に使用されるスタイルがまとめて定義されています。
class 属性に指定するスタイル
- obj-at-left, clear-left
-
この二つはセットで使用することが推奨されます。
obj-at-left は画像やブロック要素を左寄せに配置し、その右側にテキストを回り込ませたい場合に指定します。配置したものと回り込んだテキストとの間には一文字分の余白が取られます。
clear-left はこれを強制的に解除します。最も簡単な方法は BR タグに付ける方法ですが、適用例 のような使い方もできます。
適用例
<p>
<img class="obj-at-left" src="./images/sea_gull.gif" width="150" height="150" alt="かもめ君">
このようにテキストが回り込みます。
</p>
<p class="clear-left">
この段落からは解除されます。
</p>
このようにテキストが回り込みます。
この段落からは解除されます。
- obj-at-right, clear-right
-
この二つもセットで使用することが推奨されます。右寄せにして文章を回り込ませたい場合はこちらを使います。
適用例
<p>
<img class="obj-at-right" src="./images/sea_gull.gif" width="150" height="150" alt="かもめ君">
このようにテキストが回り込みます。
</p>
<p class="clear-right">
この段落からは解除されます。
</p>
このようにテキストが回り込みます。
この段落からは解除されます。
- notice, notice-title, notice-sentence
-
この三つは必ずセットで使用します。注意書きを 強調して掲載したい場合に 使用します。
まず P や DIV などのブロック要素に notice を付け、そのブロック要素が注意書きであることを示します。注意書きの領域は左右が四文字分インデントされます。
その中に notice-title を付けた H3 などのタグを書き、注意書きのタイトルを書きます。タグは特に H3 でなくても構いませんが、文法的には H3 〜 H6 のいずれかを使用することが推奨されます。いずれのタグを使用した場合も、本文と同じ大きさで、白色の文字が表示されます。
最後に、notice-sentence を付けたブロック要素を用意し、注意書きの本文を記述します。
適用例
<div class="notice">
<h5 class="notice-title">注意書き</h5>
<p class="notice-sentence">
このように注意書きを強調することができます。ここでは「適用例」の文字が H4 なので、注意書きのタイトルは H5 にしています。
</p>
</div>
注意書き
ここでは「適用例」の文字が H4 なので、注意書きのタイトルは H5 にしています。
- in-writers-and-designers
-
ページフッターの「制作者:」や「デザイン:」を記述するための id として writers-and-designers を定義していますが、この部分には下線が付加されます。しかし、Windows の Internet Explorer では、この中で A 要素を用いると、その部分だけ下線が付かないという問題があります（おそらく誤った挙動ではありません）。
この問題を回避するために、writers-and-designers の子要素として A 要素を記述する際には、この class を指定してください。ただし下線の色はリンク色と同じものになります。また、この class は A 要素以外に指定することはできません。
主に制作者やデザイナーのメールリンク等を付けたい場合に使うことになると思います。翻訳ドキュメントの「原文」など、参考文献扱いのリンクに関しては、writers-and-designers 内ではなく本文末尾などのよりわかりやすい位置に記述されることを推奨します。
適用例
<div id="writers-and-designers">
制作者:<a class="in-writers-and-designers" href="somebody@oo.o">山田太郎</a>
</div>
制作者:山田太郎
- cell-of-title
-
テーブルを作成する際、タイトルとして他のセルとは違う扱いにしたい場合に使用します。この class は TD 要素に指定して下さい。TR 要素に指定してその子要素の TD 要素にまとめて適用することも可能ですが、ja.oo.o では 本家 CSS において TD 要素の文字色が指定されているため、正しく適用されません。
適用例
<table border="1" cellpadding="3" cellspacing="0" summary="test">
<tr>
<td class="cell-of-title">OpenOffice.orgについて</td>
<td>オープンソースで開発されているオフィススイートです。</td>
</tr>
</table>
OpenOffice.orgについて オープンソースで開発されているオフィススイートです。
- row-of-even-numbered
-
横に長いテーブルを作成する際に、読みやすくするためにセルの背景色を変更します。"even numberd"とあることからもわかるように、偶数番目の列に適用すると、ちょうど会計伝票のような表になります。この class は TR 要素に指定します。
適用例
<table border="1" cellpadding="3" cellspacing="0" summary="test">
<tr>
<td>1</td>
<td>OpenOffice.org Writer</td>
<td>ワープロソフトです。</td>
</tr>
<tr class="row-of-even-numbered">
<td>2</td>
<td>OpenOffice.org Calc</td>
<td>表計算ソフトです。</td>
</tr>
<tr>
<td>3</td>
<td>OpenOffice.org Impress</td>
<td>プレゼンテーションソフトです。</td>
</tr>
<tr class="row-of-even-numbered">
<td>4</td>
<td>OpenOffice.org Draw</td>
<td>ドローソフトです。簡易 DTP にも最適です。</td>
</tr>
</table>
1 OpenOffice.org Writer ワープロソフトです。 2 OpenOffice.org Calc 表計算ソフトです。 3 OpenOffice.org Impress プレゼンテーションソフトです。 4 OpenOffice.org Draw ドローソフトです。簡易 DTP にも最適です。
- as-title-icon
-
タイトルの左側にアイコン的な画像を配置する際に使用します。画像の縦方向の位置を文字と合わせ、画像の右側に 0.5 文字分のマージンをとります。この class は IMG 要素にのみ適用できます。
適用例
<img class="as-title-icon" src="/environment/images/aqua.gif" width="32" height="32" alt="">Mac OS X 版 OpenOffice.org について
Mac OS X 版 OpenOffice.org について
- loud
-
極めて強い強調表示のために使用します。この class は STRONG 要素にのみ適用できます。太字になるという平均的な表示に加え、文字色が赤くなりますので、無印の STRONG 要素よりも目立たせることができます。あまり乱用するとかえって見づらいページになってしまいますので注意して下さい。
適用例
<strong class="loud">OpenOffice.org は、Windows 95 では実用になりません。</strong>
OpenOffice.org は、Windows 95 では実用になりません。
id 属性に指定するスタイル
!NOTICE! ひとつの HTML ドキュメント内で、同じ id を付与することは文法上禁じられています。ご注意ください。
- main-content
-
そのブロック要素がページの本文であることを指定します。原則として H1 直下の DIV に付けます。スクリーン上では左右が二文字分インデントされて見えます。本文は全て main-content を指定したブロック要素内に記述することを推奨します。
記述例
<div id="main-content">
:
: (本文を記述します)
:
</div>
<hr>
(ページフッターが続きます)
- writers-and-designers
-
ページフッターの「制作者」と「デザイン」を指定するブロック要素を指定します。
記述例
<div id="writers-and-designers">
制作者:山田太郎<br>
デザイン:川田次郎
</div>
- html-page-id
-
ページフッターの、 CVS によって付けられる Id を表示するブロック要素を指定します。この要素は改行しない方が無難です。
記述例
<div id="html-page-id"> $ID$ </div>
(実際には ID →Id (dを小文字)としてください)
docs_sc.css について
このファイルには各種ドキュメント専用のスタイルが定義されています。
class 属性に指定するスタイル
- docs-more-info
-
ドキュメントの補足情報を記述する際に使用します。DIV や P などのブロック要素に付けます。
適用例
<p class="docs-more-info">
<strong>補足など：</strong><br>
補足説明等があればこのような感じで。
</p>
補足など：
補足説明等があればこのような感じで。
- docs-cli
-
Linux や FreeBSD 向けのドキュメントで、コマンドラインを表現したい場合に使用します。DIV や P などのブロック要素に付けます。
適用例
<p class="docs-cli">
% ssh -2 -N -f -L 2401:localhost:2401 tunnel@openoffice.org
</p>
% ssh -2 -N -f -L 2401:localhost:2401 tunnel@openoffice.org
- docs-starbasic-code
-
Star Basic のサンプルコードを記述する際に使用します。背景と文字色は親要素のスタイルに依存しますので、main-content 直下などに記述した場合は背景も文字色も変化しません。フォントが等幅になるだけです。Java 等他の言語によるサンプルコードを記述する場合は、別の専用スタイルを用意しますので、ユーザー会議論用 ML までご連絡下さい。
適用例
<p class="docs-starbasic-code">
#include <com/sun/star/uno/XInterface.idl>
</p>
#include <com/sun/star/uno/XInterface.idl>
id 属性に指定するスタイル
現在のところありません。