スタイルシート(CSS)機能の概要
目次
1.概要
ScriptBrowserK では、ユーザが作成したスタイルシート(CSS)をWebページに柔軟に適用することができます。
2.全てのブラウザウィンドウに共通のCSSファイルを指定する
[表示]-[標準CSS]メニューで適用するCSSファイルを指定します。
3.特定のブラウザウィンドウにだけCSSファイルを指定する
[ページ]-[ページCSS]メニューで適用するCSSファイルを指定します。
4.特定のURLのWebページに適用するCSSファイルを指定する
拡張機能[CSS自動切り替え]を有効にすると、特定のURLのWebページにのみ適用するCSSファイルを指定することができます。
詳細は、拡張機能[CSS自動切り替え]の解説を参照して下さい。
[ScriptBrowserKオプション]-[CSS]ページで、URLマスクとCSSファイルの組を指定します。URLマスクにはワイルドカードが使用できるので柔軟にURLマスクを指定することができます。
5.CSSファイル適用の優先順位
CSSのファイル適用の優先順位は下の通りです。上のものほど優先順位が高いです。適用されるのは、一番優先順位が高い設定内容のCSSファイル1つだけです。組み合わせて適用されることはありません。
- [ページ]-[ページCSS]メニューで指定したCSS
- 拡張機能[CSS自動切り替え]で自動的に適用されるCSS
- [表示]-[標準CSS]メニューで指定したCSS
6.CSSファイルの保存場所
CSSファイルは、下記の2つのフォルダのいずれかに保存します。
- ScriptBrowserKをインストールしたフォルダのしたの、UserCss フォルダ
- 設定ファイル保存フォルダの下のUserCss フォルダ
7.CSSファイルの作成方法
CSSファイルはホームページを作成する際に使用する通常のCSSと同じものが使用できます。
SBK_CSS という名前のスタイルを指定すると、名前のついたスタイルの内容を全て置き換えることができます。例えば、「Item1 {font-size:11pt}」というスタイルがWebページで使用されていたときに、「SBK_CSS {font-size:15pt}」という内容を含むCSSを適用すると、Item1のスタイルのフォントが 15pt に置き換えられます。
8.サンプルCSSの解説
以下のサンプルのCSSは組み合わせて使用することができます。例えば、[フォント11pt.css] と [行間150.css]
を組み合わせて下の内容で、行間150_11pt.css というCSSファイルを作成して適用すると、フォントサイズが11ptで行間が150%になります。
SBK_CSS {font-size:11pt; line-height: 150%}
LI, P, SPAN, DIV, BODY, TABLE {line-height: 150%;
font-size:11pt}
FONT {font-size:11pt}
以下、各サンプルCSSファイルの解説です。
フォント〜.css
文字のサイズを固定します。[フォント(数字)pt.css]で指定した場合は、[表示]-[文字のサイズ]メニューで文字サイズを変更できなくなります。それ以外のCSSファイル(フォントSmall.css等)で指定した場合、[表示]-[文字のサイズ]メニューで文字サイズを変更することができます。ただし、[文字のサイズ]メニューで同じ[中]を設定した場合、[フォントSmall.css]より[フォントLarge.css]のほうが文字サイズが大きくなります。
行間〜.css
通常の状態を100として行間を指定した幅に変更します。
背景画像なし.css
背景に画像を表示しているページに適用すると背景が表示されなくなるので見やすくなります。
文字色_黒_背景_白.css
背景と文字色良くなくて、見にくいWebページの背景色を白、文字色を黒にして読みやすくします。