Webに掲載しているHTMLファイルをそのままヘルプ化できれば、非常に便利です。しかし、同じHTMLファイルを両方で使うおうとしても、そう簡単には行きません。
Webサイトでは、各ページの上部にナビゲーションバーを付けていることが多いのですが、HTML Helpのトピックとして使う場合は、これらが邪魔になります。また、文字サイズや色も、WebとHTML
Helpでは変えたい場合があります。
そんな場合に便利なのが、カスケーディングスタイルシートです。同じHTMLファイルでありながら、スタイルシートを変えるだけで、文書の見栄えを大きく変えることができます。
注意
- カスケーディングスタイルシートに対応しているブラウザは、Netscape 4.0以降とInternet Explorer
3.0以降ですが、対応状況がばらばらですので、注意してください。以下のサンプルもNetscapeとIE 3.xでは一部正しく表示されません。
- 目次を選択して[選択された見出しおよびすべてのサブトピックを印刷]で印刷を実行すると、カスケーディングスタイルシートが無効になるという問題があります。選択したトピックのみ印刷した場合は、カスケーディングスタイルシートの内容も反映されます。
たとえば、次のようなHTMLファイルをWebサイトで使っているとします。
こんなときには
- メニューのサイズを変える
- 画面の背景を黒色にする
- 自動バックアップを行う
- 起動時に最初に開くファイルを変更する
目次に戻る
|
このうちのナビゲーションバーや、最後の「目次に戻る」リンクは、HTML Helpには目次タブがあるので、削除するとします。また、文字サイズや背景色を変え、ページの横幅を可変にして、以下のようにしたいとします。
こんなときには
- メニューのサイズを変える
- 画面の背景を黒色にする
- 自動バックアップを行う
- 起動時に最初に開くファイルを変更する
目次に戻る
|
こんな場合、HTMLファイルを2種類作成する必要はありません。1つのHTMLファイルに対して、同じ名前で内容が異なるスタイルシートファイルを2つ用意し、Webに掲載するファイルと、ヘルプコンパイル時に使用するファイルを使い分ければ良いのです。HTMLファイル自体は1行も書き換える必要がありません。
上例のHTMLファイルとスタイルシートファイルのサンプルを以下に示します。これはごく簡単な例ですが、工夫次第で表示内容をいろいろ変えることができます。
HTMLファイル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
(中略)
<LINK rel="stylesheet" type="text/css" href="help.css">
<TITLE>こんなときには</TITLE>
</HEAD>
<BODY>
<TABLE class="pagewaku" border="1" cellpadding="5">
<TR>
<TD>
<P>
<IMG class="navigation" src="images/nav.gif" width="455" height="23" alt="ナビゲーションバー">
</P>
<H1>こんなときには</H1>
<UL>
<LI>メニューのサイズを変える</LI>
<LI>画面の背景を黒色にする</LI>
<LI>自動バックアップを行う</LI>
<LI>起動時に最初に開くファイルを変更する</LI>
</UL>
<P>
<A class="back" href="index.htm">目次に戻る</A>
</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Webサイト用のスタイルシート（help.css）
.pagewaku{ color:#000000; background-color:#FFFFCC; font-size: 95%; width:450px
}
H1{ font-size: 120%; color: #000066; background-color:#FFFFCC; font-weight: bold
}
HTML Help用のスタイルシート（help.css）
.navigation{ display:none }
.pagewaku{ color:#000000; background-color:#FFFFFF; font-size: 75%; width: 100%
}
H1{ font-size:120%; font-weight: bold; text-align: center; color:#000000; background-color:
#FFCCCC; border-width: 0.1em; border-style: solid; border-color: #336666; padding:
0.2em; }
.back{ display: none }
- ヘルプに表示したくない個所には「display: none」を指定します。ただし表示されないだけで、イメージファイルはヘルプにコンパイルされてしまいますので、ファイルサイズが大きくならないか注意してください。また、「display:
none」の文章も、全文検索では検索されます。
- IE 3.xでは「display: none」が無効になるため、隠した部分が表示されてしまいます。