HOME>線上電脳塾>HTMLエディタ>AlphaEdit

インストール | 基本レイアウト法 | 画像の挿入 | FLASHの挿入 | アップロード | スタイル | 縦書き | テンプレート
ソースの編集 |    |    |    |    |    |   
   |    |    |    |    |    |   
   |    |    |    |    |    |   
   |    |    |    |    |    |   
ダウンロードとインストール | 設定と接続 | ファイル転送 | ローカル編集 | サーバー編集 | トラブル |
   |    |    |    |    |    |   
   
スタイル
スタイルシートを表示されるには本体(body)、段落(p)、セル(td)、テーブル(table)などの要素で右クリック後、スタイルシートを選択します。それぞれの要素によりスタイルシート名が違います。
下図の場合は段落(p)でスタイルシートを表示させたものです。だからスタイルシート<p>となっております。


alphaEDITのスタイルシートには
・フォント
・テキスト
・背景
・ボーダー
・余白
・配置
・その他
の7種類が用意されています。

 

(1)スクロールバーのスタイル

「ファイル/ページのプロパティ/スタイル設定/ボディ/編集/その他」を選択

<style type="text/css">
<!-- BODY {
SCROLLBAR-3DLIGHT-COLOR: #ff0000;
SCROLLBAR-DARKSHADOW-COLOR: #ff00ff;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-FACE-COLOR: #80ffff;
SCROLLBAR-BASE-COLOR: #00ff00;
SCROLLBAR-HIGHLIGHT-COLOR: #0000ff;
SCROLLBAR-SHADOW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #ffff00
} --> </style>

   

各設定がどの部分に相当するのか実際の所分かりにくい。そこで拡大して見たのが左の図です。
これで位置関係は分かるのですが、ベースの色の緑は他の色に隠れてしまって、表面には出て来ません。
実際のサンプルページはここをクリック
 
 

(2)フォント

(a)font-family
font-familyはフォントの種類を指定する時に使用します。
フォントの種類はカンマ( , )で区切って複数の候補を並べることができますので、優先順位の高いフォントから順番に並べて置けばページ制作者のイメージに近いフォントで表示させることができます。 もし 指定したフォントがユーザーの環境に無い場合はブラウザで設定されたデフォルトのフォントで表示されます。

・フォント名で指定する時
「MS ゴシック」や「MS 明朝」のようにフォント名で指定します。フォント名にスペースが含まれている場合には、ダブルクォーテーション( " )またはシングルクォーテーション( ' )で囲むようにします。
(例)FONT-FAMILY: "MS P明朝","MS ゴシック";

・キーワードで指定する時
(alphaEDITは非サポート)
フォントの種類を表すキーワードで指定します。
sans-serif…ゴシック系のフォント
serif…明朝系のフォント
cursive…筆記体・草書体のフォント
fantasy…装飾的なフォント
monospace…等幅フォント

(b)font-style

font-styleはフォントのスタイルを指定する際に使用します。 指定できる値は、・・通常(normal)標準フォントです(初期値)。
・イタリック体(italic)タリック体フォントで表示します。
・ 斜体(oblique)斜体フォントで表示します。

※ 指定したフォントにイタリック体(italic)や斜体(oblique)がない場合にはブラウザが判断して、そのフォントの標準のものを斜めに傾けて表示します。
※日本語フォントの場合、イタリック体(italic)や斜体(oblique)が用意されていないのがほとんどです。従って標準のものを斜めに傾けて表示している為ブラウザ上では同じくなります。

(c)font-size
font-sizeはフォントのサイズを指定する時に使用します。

キーワードで指定:xx-small、x-small、small、medium、large、x-large、xx-large,smaller,largerの9段階があり、mediumが普通サイズです。1段階上がると1.2倍のサイズになります。smaller、largerを指定すると大きさが1段階上下します。

数値で指定: 数値にpxやemやexなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度に依存します。またemとはフォントの高さを1とする単位、exとは小文字の「x」の高さを1とする単位です。




(d)font-weight


font-weightはフォントの太さを指定する際に使用します。

キーワードで指定: 4段階の太さを指定することができます。通常(normal)、太い(bold)、より太い(bolder)、より細い(lighter)ですが、実際は「bold」のみで事足りるでしょう。

数値で指定
100、200、300、400(通常)、500、600、700(太い)、800、900でフォントの太さを指定します。太さが9種類用意されているフォントはあまりないため、数値を上下させても太さが変化しないことがあります。



(e)color


colorは文字色を指定する時に使用します。色の下の部分をクリックすると「色の設定」画面が出るので、赤・緑・青の各色を指定します。
16進法表記、例えば #0000ff (青)を直接テキスト枠に入れる事もできます。

(f)text-decoration
下図の様に5種類あります。

(3)テキスト

(a)text-transform
text-transformは英語などのテキストの大文字表示・小文字表示を指定する際に使用します。 単語の先頭文字だけを大文字で表示することもできます。
・無し( none) 記述した通りに表示します。これが初期値です。
・頭文字を大文字(capitalize) 単語の先頭文字を大文字で表示します。
・全て大文字(lowercase) 全てを小文字で表示します。
・全て小文字(uppercase) 全てを大文字で表示します。

(b)text-align
text-alignは行揃えの位置を指定する時に使用します。
・左端( left) 左寄せにします。
・中央(center) 中央揃えにします。
・右端(right) 右寄せにします。


(c)letter-spacing


letter-spacingは文字の間隔を指定する時に使用します。文字の間隔にはマイナスの値を指定することもできます。
・指定無し(normal) 標準の間隔にします(初期値)。
・数値で指定
数値にpixelやemやexなどの単位をつけて指定します。pixcelは1ピクセルを1とする単位で実際に表示されるサイズは72dpiや96dpiと言ったモニタの解像度に依存します。emとはフォントの高さを1とする単位でexとは小文字の「x」の高さを1とする単位です。

(d)word-spacing

word-spacingは単語の間隔を指定する時に使用します。単語の間隔にはマイナスの値を指定することもできます。
・指定無し( normal) 標準の間隔です(初期値)。
・数値で指定
数値にpixelやemやexなどの単位をつけて指定します。


(e)text-indent


text-indentは文章の段落などの1行目のインデント幅を指定する時に使用します。インデントには負の値を指定することもできます。
・指定無し( normal) 標準の間隔です(初期値)。
・数値で指定
数値にpixelやemやexなどの単位をつけて指定します。




(f)line-height


line-heightは行の高さを指定する際に使用します。
・指定無し( normal) 標準の間隔です(初期値)。
・数値で指定
数値にpixelやemやexなどの単位をつけて指定します。
もしline-heightが20pointでfont-sizeが14pointの場合 20point-14point=6pointが上下均等に3pointずつ割り振られます。
これはワードの段落設定で固定値を選んだときと同じ考え方です。だからワードでホームページを作る場合、固定値にしてやるとワードとインターネットエクスプローラでの印刷結果と一致するようになります。
 

(4)背景

(a)background-color
background-color背景色を指定する時に使用します。
・#000000などの記述やカラーネームで色指定をします。
・指定無しは背景色が透明です(初期値)。

(b)background-image

background-image背景画像を指定する時に「参照」より使用します。
スタイルシート部分を外部ファイルにしている場合には外部スタイルシートファイルからの相対パスで指定します。

(c)background-attachment
background-attachmentは画面をスクロールする時、背景画像をその位置に固定するかスクロールに伴って移動するかどうかを指定します。
・固定(fixed)背景画像の位置が固定されスクロールしても動かなくなります。
・スクロール(scroll)背景画像も移動します(初期値)。

(d)background-repeat

background-repeat背景画像のリピートの仕方を指定する時に使用します。
・繰り返す( repeat) 縦横に背景画像を繰り返して表示します(初期値)。
・横方向に繰り返す(repeat-x) 横方向にのみ背景画像を繰り返して表示します。
・縦方向に繰り返す(repeat-y) 縦方向にのみ背景画像を繰り返して表示します。
・繰り返さない(no-repeat) 背景画像を繰り返しません。

(e)background-position

background-positionは背景画像の表示開始位置を指定します。
・左端(left)左に配置します。
・中央(center)中央に配置します。
・右端(right)右に配置します。



・上端(top)上に配置します。
・中央(center)中央に配置します。
・下端(bottom)下に配置します。




数値で指定する時に使います。
%で指定する場合、例えば0%、50%、100%はleft,center,rightやtop,center,bottomと指定しているのと同じ事です。
指定背景画像の表示開始位置を%値や数値で指定する場合には横方向・縦方向の順にスペースで区切って指定します。
HTMLソースでbackground-position: 20% 40%; と指定した時、表示される領域の左端から20%、上端から40%の位置が背景画像の表示開始位置となります。
 

(5)ボーダー

border-topborder-leftborder-bottomborder-right

border-topは上ボーダー、border-leftは左ボーダー、border-bottomは下ボーダー、border-rightは右ボーダーのスタイル・太さ・色を指定する時に使用します。



・指定なし(none) ボーダーは表示されず、太さも0になります(初期値)。
・普通(medium)普通の線でボーダーが表示されます。
・細い線(thin) 細い線でボーダーが表示されます。
・太い線(thick)太い線でボーダーが表示されます。


数値で指定する時に使用します。





下図で色はボーダーの色を指定する時に使用します。

スタイルはボーダーの種類を指定する時に使用します。
・無し(none)
・点線(dotted)
・破線(dashed)
・実線(solid)1本線で表示されます。
・二重線(double) 2本線で表示されます。
・窪み線(groove) 立体的に窪んだ線で表示されます。
・隆起線(rigde)立体的に隆起した線で表示されます。
・内線(inset)上と左のボーダーが暗く下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右全てを指定して初めて立体感が出ます。
・外線(outset)上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右全てを指定して初めて立体感が出ます。

上記の設定を上下左右一括して行う時に使用します。

 

(6)余白

(a)margin-top、margin-right、margin-left、margin-bottom

margin-topは要素外側の上マージンを指定する時に使用します。
margin-leftは要素外側の左マージンを指定する時に使用します。
argin-bottomは要素外側の下マージンを指定する時に使用します。
margin-rightは要素外側の右マージンを指定する時に使用します。
マージンに負の値を指定することで、複数の領域を重ねて表示させることが可能ですが重なり順や重ね位置がブラウザによって異なります。




(b)padding-top、padding-bottom、padding-left、padding-right


・padding-topは要素内側の上余白を指定する時に使用します。
・padding-bottomは要素内側の下余白を指定する時に使用します。
・padding-leftは要素内側の左余白を指定する時に使用します。
・padding-bottomは要素内側の下余白を指定する時に使用します。





(7)配置

(a)position
positionボックスの配置方法が相対位置か絶対位置かを指定する時に使用します。
・通常(static) 特に配置方法を指定しません。これが初期値です。
・絶対位置指定(absolute )絶対位置への配置となります。親ブロックにpositionでstatic以外の値が指定されている場合には、親ブロックの左上が基準位置となります。親ブロックにpositionがstatic以外の値が指定されていない場合にはウィンドウ全体の左上が基準位置となります。
・相対位置指定(relative) 相対位置への配置となります。positionでstaticを指定した場合に表示される位置が基準位置となります。具体的に書くと例えばセルに文字を入れた場合(<td>文字</td>)、このセルの文字の位置を基準点(0,0)とします。

(b)visibility

visibilityはブロックの表示・非表示を指定する際に使用します。
・継承する(inherit)親要素から値を継承することを明示します。
・表示する(visible)ボックスを表示します。
・隠す(hidden)ボックスを非表示にします。


(c)z-index
z-indexはブロックの重なりの順序を指定する際に使用します。
これはpositionでstatic以外の値が指定されている要素に適用されます。
0が一番下、数値が大きくなるに従って上に来ます。


(d)widthheight

widthは<TABLE>・ <TD>・ <IMG>・ <INPUT>・ <SELECT>などの領域の幅や高さ指定する際に使用します。
指定方法には、実数値にpixelなどの単位をつけて指定する方法と、親ブロックに対する割合を%で指定する方法と状況に応じて大きさが設定されるautoを指定する方法があります。
・指定無し( auto) 状況に応じて自動設定します(初期値)。




(e)top、bottom、left、right


各プロパティはブロックを配置する場合の配置位置(距離)を指定する際に使用します。 例えば上からの配置距離とは基準位置の上端から配置するボックスの上端までの距離を指します。

%で指定した場合、 基準となる親ブロックの幅・高さに対する割合を%値で指定します。


(8)その他

cursor
cursorはマウスカーソルの形状を指定する時に使用します。 なおブラウザにより対応していないものもあります。
・自動(auto)ブラウザが自動的に選択したカーソル
・全スクロールカーソル(all-scroll)IE6以上
・横方向リサイズ(col-resize)>IE6以上
・十字(crosshair)
・通常のカーソル(default)
・指型(hand)
・ヘルプ(help)
・移動(move)
・ドロップ禁止(no-drop)IE6以上
・禁止(not-allowed)IE6以上
・リンク(pointer)
・進行中(progress)IE6以上
・縦方向リサイズ(row-resize)
・テキスト編集(text)
・縦書きテキスト(vertical-text)IE6以上
・待機(wait)、
・北方向(n-resize)  ・南方向(s-resize)  ・西方向(w-resize) ・東方向(e-resize)
・北東方向(ne-resize) ・北西方向(nw-resize) ・南東方向(se-resize) ・南西方向(sw-resize)
 

(9)インラインフレームの透過

・parent.htmにインラインフレームを入れるとき、
<body bgcolor="#bcf2ae"> などと背景色あり。
<iframe src="children.htm" allowtransparency="true"></iframe> で透明指定。
・chikdren.htmで<body style="background-color: transparent"> と記述すると、children.htmとインラインフレームの背景が透明になり、全体の背景色はparent.htmと同じくなります(この場合は#bcf2ae)。
また<body bgcolor="transparent">でも同じ結果が得られます。 なお、parent.htmに背景画像を使った場合でも同じことです。

 
 
 
Copyright(C) 2006 Owlnet All Rights Reserved