Interstage Studio ユーザーズガイド

4.2.5.12 スタイルの新規作成/スタイルの変更

[スタイルの新規作成]、[スタイルの変更]ダイアログボックスは、スタイルの新規作成、またはスタイルの変更を行います。

ダイアログボックスには、以下のタブがあります。

• [セレクタ]
• [フォントとテキスト]
• [色と背景]
• [ボックス]
• [配置]
• [リスト]
• [その他]

[セレクタ]タブ

セレクタを指定します。

項目

説明

セレクタ名

セレクタを指定します。 セレクタの種類には、以下の3つがあります。 HTMLタグ ページ内で、特定のHTMLタグに同じCSSスタイルを適用したい場合に指定します。直接HTMLタグを入力するか、リストから選択することもできます。 クラスセレクタ 1つのHTML要素の複数のインスタンスに異なるCSSスタイルを適用する場合や、異なるHTML要素に同じCSSスタイルを共有させたい場合に指定します。ページ内のHTMLタグに、その名前をクラス属性として設定することで、そのHTMLタグにクラスセレクタで定義されているCSSスタイルを適用することができます。クラス名として区別するために、ピリオド(.) を入力し、続けてセレクタ名を入力します。 IDセレクタ HTML要素の特定のインスタンスだけ、CSSスタイルを適用する場合に指定します。つまり、IDセレクタを指定するのと、特定のHTML要素にインラインスタイルを指定するのは、基本的に同じです。IDセレクタとして区別するために、シャープ記号(#)を入力し、続けてIDセレクタ名を入力します。 注）クラスセレクタ、IDセレクタを指定する場合、半角英数字を使用してください。また「 ! " # % & . _ 」などの記号を使用した場合、ブラウザで認識されない可能性があります。

[フォントとテキスト]タブ

フォントとテキストを指定します。

項目	説明
フォント	フォントに関する設定を行います。
ファミリ名(font-family)	フォントファミリ名と総称ファミリ名の優先順リストを指定します。 直接入力するか、リストの中から総称ファミリ名を選択することができます。複数のフォントファミリ名を指定する場合は、リスト項目をコンマで区切ります。空白を含むフォントファミリ名の場合には、シングルクォーテーションまたはダブルクォーテーションで囲まなければなりません。総称ファミリ名には、serif、sans-serif、cursive、fantasy、monospaceの5種類があります。総称ファミリ名を指定した場合は、ブラウザでもっとも適当なフォントが選択されて表示されます。この属性は、CSS1で定義されています。
サイズ(font-size)	フォントサイズを指定します。 直接入力するか、リストの中から予約語および単位を選択することができます。 フォントサイズは親要素のフォントサイズを基準に計算されます。 フォントサイズの値の指定方法は以下のとおりです。 予約語による絶対指定 ブラウザによって計算・保持されているフォントサイズによる指定をします。実際に表示されるサイズはブラウザの設定にまかされます。 設定可能な値:[ xx-small | x-small | small | medium | large | x-large | xx-large ] 予約語による相対指定 親要素のフォントサイズに対して相対的にサイズを指定します。 設定可能な値:[ larger | smaller ] パーセント指定 親要素のフォントサイズに対する相対パーセント値を指定します。 長さ指定 フォントサイズの絶対値を長さで指定します。負の値は不正です。単位については、CSSの長さの単位 を参照してください。 リストの中から(候補)を選択した場合には、単位はpxになります。 この属性は、CSS1で定義されています。
スタイル(font-style)	文字のスタイルとして、通常体、イタリック体、斜体を指定できます。 イタリック体と斜体は、フォントの種類やブラウザによっては同じように表示されることがあります。この属性は、CSS1で定義されています。
太さ (font-weight)	フォントの太さを指定します。 以下の値から選択します。各値は以下の様な意味を持ちます。 標準(normal)：'400'と同じ。 太字(bold)：'700'と同じ。 より太く(bolder)：親要素を基準として、相対的に太くなる値が指定されます。 より細く(lighter)：親要素を基準として、相対的に細くなる値が指定されます。 100-900：太さを数値で指定します。 この属性は、CSS1で定義されています。
変形(font-variant)	フォントを小型の大文字で表示するかどうかを指定します。以下の値から選択します。 標準(normal) 小型英大文字(small-caps) この属性は、CSS1で定義されています。
変換(text-transform)	テキストの変換を指定します。以下の値から選択します。 なし(none) 先頭を大文字(capitalize)：各語の先頭を大文字にします。 大文字(uppercase)：すべての文字を大文字にします。 小文字(lowercase)：すべての文字を小文字にします。 この属性は、CSS1で定義されています。
装飾(text-decoration)	テキストの装飾を指定します。 この属性は、CSS1で定義されています。
なし (none)	親要素から継承されるテキストへの効果、または通常のHTMLタグに関連付けられたテキストへの装飾をすべて削除します。 この属性は、CSS1で定義されています。
下線(underline)	テキストに下線を付けるかどうかを指定します。 この属性は、CSS1で定義されています。
取り消し線(line-through)	テキスト上に取り消し線を付けるかどうかを指定します。 この属性は、CSS1で定義されています。
上線(overline)	テキストの上側に線を付けるかどうかを指定します。 この属性は、CSS1で定義されています。
テキスト	テキストに関する設定を行います。
行間隔(line-height)	行間隔を指定します。 直接入力するか、リストの中から予約語および単位を選択することができます。 normal：行間隔をデフォルト値にします。 パーセント指定：親要素に対する相対パーセント値を指定します。 長さ指定：絶対値を長さで指定します。単位については、CSSの長さの単位 を参照してください。 リストの中から(候補)を選択した場合には、指定した数値にフォントサイズを掛けた値が間隔として設定されます。 この属性は、CSS1で定義されています。
文字間隔(letter-spacing)	文字間隔を指定します。 直接入力するか、リストの中から予約語および単位を選択することができます。 normal：文字間隔をデフォルト値にします。 長さ指定：絶対値を長さで指定します。単位については、CSSの長さの単位 を参照してください。 リストの中から(候補)を選択した場合には、単位はpxになります。 この属性は、CSS1で定義されています。
インデント(text-indent)	先頭行のインデントを指定します。 直接入力するか、リストの中から単位を選択することができます。 パーセント指定：親要素に対する相対パーセント値を指定します。 長さ指定：絶対値を長さで指定します。単位については、CSSの長さの単位 を参照してください。 リストの中から(候補)を選択した場合には、単位はpxになります。 この属性は、CSS1で定義されています。
水平配置(text-align)	水平配置を指定します。以下の値から選択します。 左(left) 右(right) 中央(center) 両端揃え(justify) この属性は、CSS1で定義されています。
垂直配置(vertical-align)	垂直配置を指定します。以下の値から選択します。 ベースライン(baseline) 下付き(sub) 上付き(super) 上(top) 中央(middle) 下(bottom) テキスト上(text-top) テキスト下(text-bottom) この属性は、CSS1で定義されています。
方向(direction)	テキストの書字方向を指定します。以下の値から選択します。 左から右(ltr) 右から左(rtl) この属性は、CSS2で定義されています。
縦書き(writing-mode)	縦書きか横書きかを指定します。 横書き(lr-tb) 縦書き(tb-rl) この属性は、CSS1およびCSS2で未定義です。

[色と背景]タブ

色と背景を指定します。

項目	説明
テキスト色(color)	テキスト色を設定します。 この属性は、CSS1で定義されています。
背景色(background-color)	背景に使用する色を設定します。 この属性は、CSS1で定義されています。
透過(background-color)	背景色を透過にするかどうかを指定します。 この属性は、CSS1で定義されています。
背景画像	背景に使用する画像の設定を行います。
URL(background-image)	背景に使用する画像のURLを指定します。 この属性は、CSS1で定義されています。
参照	画像ファイルを選択するときに選択します。 [参照]をクリックすると、[画像の選択]ダイアログボックスが開きます。
横位置(background-position)	背景画像が最初に配置される横位置を設定します。 直接入力するか、リストの中から単位を選択することができます。 予約語による指定：左(left)、中央(center)、右(right) パーセント指定：親要素に対する相対パーセント値を指定します。 長さ指定：絶対値を長さで指定します。単位については、CSSの長さの単位 を参照してください。 リストの中から(候補)を選択した場合には、単位はpxになります。 この属性は、CSS1で定義されています。
縦位置(background-position)	背景画像が最初に配置される縦位置を設定します。 直接入力するか、リストの中から予約語および単位を選択することができます。 予約語による指定：上(top)、中央(center)、下(bottom) パーセント指定：親要素に対する相対パーセント値を指定します。 長さ指定：絶対値を長さで指定します。単位については、CSSの長さの単位 を参照してください。 リストの中から(候補)を選択した場合には、単位はpxになります。 この属性は、CSS1で定義されています。
繰り返し方法(background-repeat)	表示領域に繰り返し画像を表示させたいときに指定します。 両方向(repeat) 水平方向(repeat-x) 垂直方向(repeat-y) 繰り返しなし(no-repeat) この属性は、CSS1で定義されています。
スクロール (background-attachment)	背景画像をページ上に固定するか、画像をページの内容と共にスクロールするかを指定します。 スクロール(scroll) 固定(fixed) この属性は、CSS1で定義されています。

[ボックス]タブ

ボックスを指定します。

項目	説明
スタイル(border-style, border-top-style, border-right-style, border-bottom-style, border-left-style)	ボックスのスタイルを選択します。 各スタイルには、[色]オプションで指定された色が適用されます。 なし(none)：線なし(border-widthの指定も無視される) 実線(solid)：実線 点線(dotted)：点線 破線(dashed)：破線 二重線(double)：二重線 くぼみ(groove)：指定した色で立体的に窪んだ感じで描かれる。 浮き出し(ridge)：指定した色で立体的に隆起した感じで描かれる。 インセット(inset)：指定した色で立体的に中にはめ込まれた感じで描かれる。 アウトセット(outset)：指定した色で立体的に外にはみ出した感じで描かれる。 border-style属性はCSS1で定義され、それ以外の属性はCSS2で定義されています。
幅(border-width, border-top-width, border-right-width, border-bottom-width, border-left-width)	ボックスの線の幅を指定します。 直接入力するか、リストの中から予約語および単位を選択することができます。 予約語による指定：thin(細い)、medium(中)、thick(太い) 長さ指定：絶対値を長さで指定します。負の値は不正です。単位については、CSSの長さの単位 を参照してください。 リストの中から(候補)を選択した場合には、単位はpxになります。 この属性は、CSS1で定義されています。
色(border-color, border-top-color, border-right-color, border-bottom-color, border-left-color)	ボックスの線に使用する色を設定します。 border-color属性はCSS1で定義され、それ以外の属性はCSS2で定義されています。
プレビュー	現在の上下左右に適用されたボックスの様々な設定状態が表示されます。 ボックスの各境界線に異なる設定を適用することができます。プレビュー枠にある、各境界線を表すボタンを選択することにより、各境界線で設定されている値が、各コントロールに表示されます。
マージン 上(margin-top) 下(margin-bottom) 左(margin-left) 右(margin-right)	余白サイズを設定します。 直接入力するか、リストの中から予約語および単位を選択することができます。 予約語による指定：auto(自動) パーセント指定：親要素に対する相対パーセント値を指定します。 長さ指定：絶対値を長さで指定します。単位については、CSSの長さの単位 を参照してください。 リストの中から(候補)を選択した場合、単位はpxになります。 この属性は、CSS1で定義されています。
パディング 上(padding-top) 下(padding-bottom) 左(padding-left) 右(padding-right)	パディングを設定します。 パディングとは、要素とそのマージンの間のスペース、または枠線がある場合は要素とその枠線の間のスペースのことです。 直接入力するか、リストの中から単位を選択することができます。 パーセント指定：親要素に対する相対パーセント値を指定します。 長さ指定：絶対値を長さで指定します。負の値は不正です。単位については、CSSの長さの単位 を参照してください。 リストの中から(候補)を選択した場合には、単位はpxになります。 この属性は、CSS1で定義されています。

[配置]タブ

配置を指定します。

項目	説明
スタイル(position)	ページ上の要素の配置を設定します。 通常(static)：要素は通常フローにてレイアウトされます。 絶対(absolute)：要素は通常の配置ではなく、自由なところに絶対配置されます。 相対(relative)：要素はページのほかの要素に相対位置で配置されます。 この属性は、CSS2で定義されています。
幅(width)	要素の幅を指定します。 直接入力するか、リストの中から予約語および単位を選択することができます。 予約語による指定：auto(自動) パーセント指定：親要素に対する相対パーセント値を指定します。 長さ指定：絶対値を長さで指定します。負の値は不正です。単位については、CSSの長さの単位 を参照してください。 リストの中から(候補)を選択した場合には、単位はpxになります。 この属性は、CSS1で定義されています。
高さ(height)	要素の高さを指定します。 直接入力するか、リストの中から予約語および単位を選択することができます。 予約語による指定：auto(自動) パーセント指定：親要素に対する相対パーセント値を指定します。 長さ指定：絶対値を長さで指定します。負の値は不正です。単位については、CSSの長さの単位 を参照してください。 リストの中から(候補)を選択した場合には、単位はpxになります。 この属性は、CSS1で定義されています。
左(left)	ドキュメントの左端を基準として要素の位置を指定します。 直接入力するか、リストの中から予約語および単位を選択することができます。 予約語による指定：auto(自動) パーセント指定：親要素に対する相対パーセント値を指定します。 長さ指定：絶対値を長さで指定します。負の値は不正です。単位については、CSSの長さの単位 を参照してください。 リストの中から(候補)を選択した場合には、単位はpxになります。 この属性は、CSS2で定義されています。
上(top)	ドキュメントの上端を基準として要素の位置を指定します。 直接入力するか、リストの中から予約語および単位を選択することができます。 予約語による指定：auto(自動) パーセント指定：親要素に対する相対パーセント値を指定します。 長さ指定：絶対値を長さで指定します。負の値は不正です。単位については、CSSの長さの単位 を参照してください。 リストの中から(候補)を選択した場合には、単位はpxになります。 この属性は、CSS2で定義されています。
重ね順(z-index)	配置された要素の重ね順を指定します。 正の値の要素は、負の値の要素の上に重ねられます。また、値が大きなものが小さいものの上に重ねられます。もし、同じ値が設定された場合には、ソース順に重ねられます。 この属性は、CSS2で定義されています。
フロート(float)	オブジェクトを回り込み可能にするかどうかを指定します。 なし(none) 左(left) 右(right) この属性は、CSS1で定義されています。
クリア(clear)	要素の左右の回り込みを許可するかどうかを指定します。 なし(none) 左(left) 右(right) 両方(both) この属性は、CSS1で定義されています。
オーバーフロー(overflow)	要素のコンテンツがその高さと幅を超えた場合にどのようにするかを指定します。 自動(auto) スクロール(scroll) 表示(visible) 非表示(hidden) この属性は、CSS2で定義されています。
可視(visibility)	要素を表示するかどうかを指定します。 表示(visible) 非表示(hidden) 継承(inherit) この属性は、CSS2で定義されています。
クリップ(clip) 上 下 左 右	配置された要素のクリップ領域を指定します。 クリップ領域とは実際に表示される領域のことです。クリップ領域外の部分は透明になります。 直接入力するか、リストの中から予約語および単位を選択することができます。 予約語による指定：auto(自動) パーセント指定：親要素に対する相対パーセント値を指定します。 長さ指定：絶対値を長さで指定します。単位については、CSSの長さの単位 を参照してください。 リストの中から(候補)を選択した場合には、単位はpxになります。 この属性は、CSS2で定義されています。

[リスト]タブ

リストを指定します。

項目	説明
タイプ (list-style-type)	リストマーカの種類を指定します。 指定なし なし(none) 番号(decimal) 大文字ローマ数字(upper-roman) 小文字ローマ数字(lower-roman) 大文字ラベル(upper-alpha) 小文字ラベル(lower-alpha) 黒丸(disc) 白丸(circle) 四角(square) この属性は、CSS1で定義されています。
位置(list-style-position)	コンテントに対してリストマーカをどの位置に描くかを指定します。 リスト内 (inside)：折り返した文字列の先頭がマーカの下にきます。 リスト外 (outside)：マーカの下には折り返した文字列の先頭がきません。 この属性は、CSS1で定義されています。
画像(list-style-image)	リストの項目マーカとして使用する画像のURLを指定します。 この属性は、CSS1で定義されています。
参照	画像ファイルを選択するときにクリックします。

[その他]タブ

その他を指定します。

項目	説明
カーソルスタイル(cursor)	マウスのポインタとして表示されるカーソルの種類を設定します。 自動(auto)：状況に応じてカーソルの形をブラウザが自動的に決定します。 十字(crosshair)：シンプルな十字型。 既定(default)：プラットフォーム依存のデフォルトカーソル(通常は矢印)。 手(hand)：手の形。 移動(move)：移動可能を意味する矢印カーソル。 サイズ変更右(e-resize)：右 サイズ変更右上(ne-resize)：右上 サイズ変更左上(nw-resize)：左上 サイズ変更上(n-resize)：上 サイズ変更右下(se-resize)：右下 サイズ変更左下(sw-resize)：左下 サイズ変更下(s-resize)：下 サイズ変更左(w-resize)：左 テキスト(text)：テキスト編集カーソル。通常はIバー。 砂時計(wait)：待ちを意味するカーソル。通常は砂時計が表示される。 ヘルプ(help)：ヘルプ この属性は、CSS2で定義されています。
前で改ページ(page-break-before)	要素の前のどの位置で改ページを行うかを設定します。 自動(auto)：必要な場合にだけ改ページをします。 常に(always)：常に、改ページを挿入します。 抑制(avoid)：改ページを抑制します。 左(left)：次のページが左のページとして整形できるように、必要に応じて1回か2回の改ページを強制します。 右(right)：次のページが右手側のページとして整形できるように、必要に応じて1回か2回の改ページを強制します。 この属性は、CSS2で定義されています。
後で改ページ(page-break-after)	要素の後のどの位置で改ページを行うかを設定します。 自動(auto)：必要な場合にだけ改ページをします。 常に(always)：常に、改ページを挿入します。 抑制(avoid)：改ページを抑制します。 左(left)：次のページが左のページとして整形できるように、必要に応じて1回か2回の改ページを強制します。 右(right)：次のページが右手側のページとして整形できるように、必要に応じて1回か2回の改ページを強制します。 この属性は、CSS2で定義されています。
IMEモード(ime-mode)	IMEのモードを設定します。 通常(auto)：特にIMEを制御しません。指定なしと同じ状態です。 オン(active)：IMEをONに設定します。ユーザの指定でIMEをOFFに設定することができます。 オフ(inactive)：IMEをOFFに設定します。ユーザの指定でIMEをONに設定することができます。 使用不可(disabled)：IMEを使用不可の状態にします。ユーザはIMEをONに設定することができません。 この属性は、CSS1およびCSS2で未定義です。

CSSの長さの単位は以下のように指定します。

• 相対単位には以下のものがあります:
  • em:関連要素の'font-size'の値を参照する
  • ex:関連フォントの'x-height'を参照する
  • px:閲覧しているデバイスの解像度を参照する
• 絶対単位には以下のものがあります:
  • in:インチ -- 1inは2.54cmに等しい
  • cm:センチメートル
  • mm:ミリメートル
  • pt:ポイント -- 1ptは1/72inに等しい
  • pc:パイカ -- 1pcは12ptに等しい

デフォルトの単位は、pxです。