スタイルシート(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つだけです。組み合わせて適用されることはありません。

  1. [ページ]-[ページCSS]メニューで指定したCSS
  2. 拡張機能[CSS自動切り替え]で自動的に適用されるCSS
  3. [表示]-[標準CSS]メニューで指定したCSS

6.CSSファイルの保存場所

CSSファイルは、下記の2つのフォルダのいずれかに保存します。

  1. ScriptBrowserKをインストールしたフォルダのしたの、UserCss フォルダ
  2. 設定ファイル保存フォルダの下の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ページの背景色を白、文字色を黒にして読みやすくします。


関連情報

 


Copyright (c) 2002-2011 Akiyoshi Kozuka (http://www.scriptbrowserk.com/)