とほほのスタイルシート入門(リファレンス)とほほのスタイルシート入門(リファレンス)CSS1、および、CSS2、ポジショニング、IE4.0/5.0で定義されているスタイルシートの一部について説明します。単に仕様書の訳ではなく、使い物になるかどうか実際のブラウザの動作もあわせて説明します。C1/e3/N4は、CSS1、IE3.0、NN4.0で定義・使用可能であることを意味します。動作の確認はWindowsで行っています。
◇ IE5.0で新規サポートされた以下の属性を追記しました。(1999.6.27)
◇ IE5.0で機能追加された以下の属性を追記しました。(1999.6.27)
- ime-mode IME(日本語変換)のオン・オフ
- behavior ビヘイビア−振る舞い
- direction 右から左書き
- unicode-bidi 〃
- text-justify 均等割付
- line-break 行末禁則処理
- word-break 単語途中での改行制御
- ruby-align ルビの位置
- ruby-position 〃
- overflow-x はみ出し部分の表示方法
- overflow-y 〃
- table-layout テーブル表示の高速化
- border-collapse 枠線の表示方法
- font - システムフォントの指定が可能に
色は例えば次のような方法で指定します。
color: red
color: #FF0000
color: #F00 ... #FF0000と同じ
color: rgb(255, 0, 0)
color: rgb(100%, 0%, 0%)
redなどの色の名前は、CSS1では基本16色パレットの色名を、IE3.0、NN4.0ではこれに加えてNetscape色パレットの色名を、さらに、IE4.0やCSS2ではユーザー定義色の色名を指定することができます。
URLは例えば次のように指定します。background: url(http://aaa.bbb.ccc/zzz.gif)
長さの単位には次のようなものがあります。
font-size: 1.2in ... インチ(1in=2.54cm)
font-size: 1.2cm ... センチメートル
font-size: 1.2mm ... ミリメートル
font-size: 1.2pt ... ポイント(1pt=1/72in)
font-size: 1.2pc ... パイカ(1pc=12pt)
font-size: 1.2em ... フォントの高さ
font-size: 1.2ex ... 文字 x の高さ
font-size: 1.2px ... ピクセル
em, ex, pxは相対的な長さ、その他は絶対的な長さと定義されていますが、ブラウザによって実装がまちまちです。IE5.0ではcm, mm, pt, pc, pxが固定サイズ、NN4.0ではpxのみが固定サイズになるようです。
画面の横幅や通常のフォントサイズに対する割合をパーセンテージで指定することもできます。font-size: 120% ... 120%の大きさにする。
C1/e3/N4。以降で説明する、styleやvariantなどを一度に指定します。heightを指定する時はsizeとスラッシュ( / )で区切って指定します。CSS1ではsizeとfamily以外は省略可能となっています。NN4.0でsizeとfamilyを省略するとfont:全体が無視されます。IE5.0では、さらに、アイコンラベルやウィンドウメニューに現在使用されているフォントを示す値としてicon, menu, messagebox, caption, smallcaption, statusbarが追加されました。
BODY, TD, TH {
font: italic bold 100%/150% serif;
}
C1/e3/N4。normal(通常), italic(イタリック), oblique(斜め)のいずれかを指定します。italicとobliqueはどちらも斜体フォントになりますが、CSS1の定義では、元々斜体のフォントを使用するか、通常フォントを無理矢理斜体にして使用するかの差違があります。IE3.0やNN4.0ではobliqueをサポートしていません。IE4.0は未確認ですが、IE5.0ではobliqueもサポートしています。<I STYLE="font-style: normal">とすると、IE3.0では斜体のままになりますが、NN4.0では通常(斜体ではない)フォントになります。
H1, H2 { font-style: italic }
C1/e4。normal または small-caps を指定します。small-capsを指定すると、半角全角を問わず、アルファベットの小文字が(すこし小さめの)大文字で表示されるようになります。
H1, H2 { font-variant: small-caps }
C1/e3/N4。フォントの太さを normal, bold, bolder, lighter, 100, 200, ... 900で指定します。IE4.0やNN4.0では通常と太字の2種類しかサポートしていないので、bold以外を使用することは少なそうです。
DT { font-weight: bold }
C1/e3/N4。フォントの大きさを指定します。絶対指定としてxx-small, x-small, small, medium, large, x-large, xx-large、相対指定として larger, smaller、絶対単位指定として 10in, 10cm, 10mm, 10pt, 10pc、相対単位指定として 10px, 10ex, 10em などを、割合指定として 120% などを指定できます。周りのフォントに対する相対的な大きさを指定する時は120%などのパーセント指定が無難です。smallやsmallerなどや、emやexなどの単位は、ブラウザにより解釈が異なるため、予想外のフォントサイズになるという悲劇がおこることがあります。
周りのフォントに影響されずに絶対的な大きさを指定するには10ptなどを用いるのが本当ですが、NN4.0などはすべての単位を相対的に扱ってしまうため、ブラウザのフォントサイズによって大きさが変わってしまいます。画像ファイルとフォントサイズをうまくレイアウトできるようになるのは、まだ先のことのようです。
BODY, TH, TD { font-size: 16pt }
C1/e3/N4。テキストの高さを 2.0em, 120% などで指定します。行間をあけて、読みやすい文章を記述するのに便利です。しかし、IE3.0でテーブルを使用したページでこの line-height を指定すると、ページのレイアウトが無茶苦茶になってしまう（テーブルとテーブル前後の文章が重なって読めなくなる）というバグがあります。せっかく便利なスタイルなのですが、IE3.0が消え去るまでは使用は控えた方が安全です。
BODY, TH, TD { line-height: 130% }
C1/e3/N4。フォントを指定します。カンマ( , )で複数記述すると、指定したフォントが無ければ次のフォントが採用されます。スペースを含むフォントは "Times New Roman"のように "..." もしくは '...' で囲みます。CSS1ではserif, sans-serif, cursive, fantasy, monospaceが定義されています。Windowsだと、"ＭＳ ゴシック", "ＭＳ 明朝", "ＭＳ Ｐゴシック", "ＭＳ Ｐ明朝" あたりが一般的です。Ｐがつくのはプロポーショナルフォントです。しかし、NNでは、<FONT FACE="...">同様、フォントの指定はうまくいかないことが多いようです。
BODY, TH, TD { font-family: 'ＭＳ ゴシック'; }
C1/e3/N4。red や green や #0000FF などのフォントの色を指定します。リンクテキストの色を変更するには、A:link { color:red }などの定義済みクラスを指定します。色の詳細は「とほほの色入門・色見本」を参照してください。この属性は、スタイルシートの中でも結構安心して使用できるものだと思っていたのですが、NN4.0でレイヤやポジショニングなどを組み合わせると、それ以降、color による色指定がキャンセルされてしまう（ページの前半と後半で色が異なる）というバグがありました。
C1/e3/N4。color, image, repeat, attachment, positionを一度に指定します。順序は自由で、省略も可能です。IE3.0での背景関連は、このbackground:の形式のみがサポートされているようです。BODYタグの他、SPANやTABLEなどに対しても用いることができます。
BODY {
background: url(xx.gif) no-repeat fixed 50% 50%
}
C1/e4/N4。背景色を指定します。テキスト部分のみの指定も可能です。colorにはtransparent(透明色)、もしくは色を指定します。
H1 { background-color: #CCCCFF }
C1/e4/N4。背景画像を指定します。SPANやBタグなどにも使用できますが、NN4.0の場合はTABLEタグやTRタグには使用できませんでした。
BODY { background-image: url(image/xxx.gif); }
C1/e4/N4。背景画像の並べかたを repeat(敷き詰める), repeat-x(横方向のみ), repeat-y(縦方向のみ), no-repeat(ひとつだけ)のいずれかで指定します。
C1/e4。ウィンドウのスクロールを動かした時の背景の動作を scroll(一緒にスクロールする), fixed(スクロールしない)のいずれかで指定します。NN4.0ではまだサポートされていないようです。
C1/e4。背景の横方向の位置を left, center, right, 0〜100% で、縦方向の位置を指定し、スペースで区切って縦方向の位置を top, center, bottom, 0〜100% で指定します。fixedと共に指定すると、背景画像の表示位置を指定することができます。
C1。各ワード間のスペースをnormalまたは10pxなどの長さで指定します。
C1/e4。各文字間のスペースをnormalまたは2pxなどの長さで指定します。
C1/e3/N4。テキストの装飾を none(何もなし), underline(下線), overline(上線), line-through(打ち消し線), blink(点滅)の中から指定します。IE3.0ではnone, underline, line-throughが、NN4.0ではこれに加えてblinkが指定可能です。Aタグに対してnoneを指定することで、下線の無いリンクテキストを実現できます。複数指定も可能です。
A { text-decoration: none; }
C1/e3/N4。テキストの配置を baseline, middle, sub, super, text-top, text-bottom, top, bottomの中から、もしくは70%のようなパーセンテージで指定します。<IMG>タグのALIGN属性に相当します。
C1/e4/N4。capitalize(各単語の最初の文字を大文字にする), uppercase(すべて大文字にする), lowercase(すべて小文字にする), none(何もしない) のいずれかを指定します。NN4.0では文字コードセットが欧米フォントの際に有効です。
C1/e3/N4。テキストの配置をleft(左寄せ), right(右寄せ), center(センタリング), justify(均等割付)のいずれかで指定します。IE3.0やNN4.0ではjustifyはサポートされていないようです。（IE5.0でも、text-justifyと同時に指定しなくては均等割付にならない？）
e5。均等割付の方法を、inter-word, newspaper, distribute, distribute-all-lines, inter-ideograph, autoのいずれかで指定します。<P>や<DIV>などのブロック型の要素か、<TABLE>, <TH>, <TD> などに適用します。text-align:justify を指定した時のみ有効です。
TD { text-align:justify;
text-justify:distribute-all-lines; }
C1/e3/N4。テキストの最初の1行のインデント(字下げ)を数値やパーセントで指定します。段落の最初を字下げする際に便利です。
e5。行末の禁則処理を指定します。modeにnormalを指定すると通常通り（。や、が禁則処理される）、strictを指定すると「っ」や「ゃ」なども禁則処理されるようになります。
e5。行末の単語禁則処理を指定します。modeにnormalを指定すると英文のみ単語の切れ目で改行されます。break-allを指定すると英文、和文共に改行されるようになります。keep-allは英文、和文共に単語の切れ目でのみ改行されるようになります。
e5。<RUBY>タグに対してルビの配置を指定します。alignにはauto(自動), left(左寄), center(中央), right(右寄), distribute-letter(均割), distribute-space(均割), line-edge(行末での処理変更)などを指定します。
e5。<RUBY>タグに対してルビの張り出しかた(?)を指定します。overhangにはauto(自動), none, whitespaceのいずれかを指定しますが、表示上の違いはよく解りませんでした。
e5。<RUBY>タグに対してルビの配置を指定します。positionにはabove(上部), inline(横)のいずれかを指定します。inlineを指定した場合は、<RUBY>未対応のブラウザのように表示されます。
C1/e3/N4。上下左右のマージン(余白)を 2.0, 20em, 120%などのように指定します。マージンは、ボーダーが存在する場合、その外側になります。margin: は上下左右のマージンを一度に指定します。値が4つの場合はそれぞれ上、右、下、左を、値が3つの場合はそれぞれ上、左右、下を、値が2つの場合はそれぞれ上下、左右を、値が1つの場合は上下左右のマージンを表します。NN4.0では上下のマージンはうまく指定できない場合があります。
C1/e4/N4。上下左右のパディング(余白)を 2.0, 20em, 120%などのように指定します。パディングは、ボーダーが存在する場合、その内側になります。padding: はmargin:と同様に上下左右のパディングを一度に指定します。
C1/e4/N4。borderは上下左右すべての、border-xxxは上下左右それぞれのボーダーの width, style, color を一度に指定します。IEでは<DIV>などのブロック系タグに使用できます。<DIV STYLE="border: thin solid">あああ</DIV>
C1/e4/N4。ボーダーの色を指定します。
C1/e4/N4。ボーダーのスタイルを none, dotted, dashed, solid, double, groove, ridge, inset, outset で指定します。solid dotted のように複数指定も可能です。
C1/e4/N4。上下左右のボーダー(境界線)の太さを thin, medium, thick, 1px などのように指定します。border-width: は margin: と同様に上下左右のボーダーを一度に指定します。
C1/e4/N4。list-style-type, list-style-image, list-style-position を一度に指定します。
C1/e4/N4。<LI>タグで表示されるマーカーの形を disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none のいずれかで指定します。
C1/e4。<LI>タグで表示されるマーカーのイメージを指定します。
UL { list-style-image:url(pochi.gif); }
C1/e4。マーカーの位置を inside, outside のいずれかで指定します。insideを指定すると、リストアイテムが折り返された時に、マーカー分の字下げが無視されます。
UL { list-style-position: inside }
e4/N4。ポジショニングの方法を、absolute(絶対位置指定)、relative(相対位置指定)、static(通常)のいずれかで指定します。<IMG>タグのSTYLE属性に直接指定すると、NN4.0で位置がずれてしまうようです。
<SPAN STYLE="position:absolute; top:100; left:100;">
<IMG SRC="xxx.gif" WIDTH=50 HEIGHT=50 ALT="xxx">
</SPAN>
e4/N4。position:absolute もしくは position:relative と共に使用します。位置を絶対位置、もしくは相対位置で指定します。
C1/e4。画像などの横幅と高さを指定します。
C1/e4/N4。画像などの位置を left, right, none のいずれかで指定します。<IMG>タグのALIGN=leftなどと同様です。
e4。表示するしないを、visible(表示する)、hidden(表示しない)、inherit(上位のオブジェクトに依存する)のいずれかで指定します。JavaScriptで表示のオン・オフを切り替えることで、いろいろな効果を実現することができます。
<SPAN STYLE="visibility:hidden">
<SPAN STYLE="visibility:inherit">XXXX</SPAN>
</SPAN>
e4。表示する範囲を指定します。regionにautoを指定すると通常通り、rect(0,50,50,0)を指定すると、top=0,right=50,bottom=50,left=0 の範囲のみを表示します。
e4。表示の際の重なりの順序を指定します。この数値が大きなものほど、前面に表示されます。
C1/e4/N4。テキストの回り込み制御を none, left, right, bothで指定します。<BR>タグのCLEAR属性と同様です。
C1/e4/N4。画面にどのように表示されるかを block(ブロック要素), inline(インライン要素), list-item(リスト要素), none(表示しない) のいずれかで指定します。
e5。文章の方向（日本語や英語は左から右だが、アラビア語は右から左）を指定します。directionにはltr(左→右)、rtl(右→左)、inherit(上位の属性を引継ぎ)のいずれかを指定します。ケースによってはdirectionだけでは右から左にはならないので、その時はbidirectionにnormal（通常）, bidi-override（directionを有効にする）、embed（無効にする）を指定します。
<DIV STYLE="direction:rtl">
昔の日本語も右から左でしたね
</DIV>
C1/N4。要素の中の空白がどのように扱われるかを normal, pre, nowrap のいずれかで指定します。
e4。領域をはみ出したコンテンツの扱いを、scroll(スクロールバーで表示する)、hidden(隠す)、visible(表示する)、auto(自動)のいずれかで指定します。省略時は visible です。<DIV>, <TEXTAREA>, <SPAN>, <FIELDSET> に対して指定することができます。<TEXTAREA>の場合は、hiddenのみが有効です。
e5。overflowの指定を、縦方向のみ、横方向のみに適用する際に用います。
e5。巨大なテーブルを表示する際に、テーブルを最後まで読み込まないと表示されない状況を改善します。autoを指定すると今まで通りテーブルのすべてを読み込んでから表示を始めます。fixedを指定すると最初の部分のみを読み込んだ時点で横幅を決めて表示するため、体感的表示時間が早くなります。
<TABLE STYLE="table-layout:fixed">
:
</TABLE>
e5。テーブルの枠線の表示方法を指定します。separateは通常通り、collapse（建物崩壊）は隣り合ったセル間の枠線が重なり合ったように表示します。
e4。マウスを上に乗せた時のマウスカーソルの形状を指定します。cursorにはauto, crosshair, default, hand, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, helpのいずれかを指定します。
e4。このページを印刷したときの改ページの場所を指定します。page-break-beforeはこのスタイルを指定したタグの直前で、page-break-afterはこのスタイルを指定したタグの直後で改ページします。whereにはauto(自動)、always(常に)、left(左白ページができるまで)、right(右白ページができるまで)のいずれかを指定します。
H1 { page-break-before: left }
e5。テキストフォームなどにフォーカスが移動した時の日本語変換(IME)の動作を指定します。通常はautoで、activeはフォーカス移動時にON、inactiveはフォーカス移動時にオフ、disabledはIMEの使用を禁止します。
メールアドレス：
<INPUT TYPE=text STYLE="ime-mode:disabled">
e5。IE5.0でサポートされたビヘイビアという機能により、要素の振る舞いをカプセル化、再利用することができます。behaviorには、スクリプトファイルのURLや、<OBJECT>タグで指定したID、IE5.0のデフォルトビヘイビア名などを指定します。<SPAN STYLE="behavior:url(xx.htc)">XXX</SPAN>ここで、xx.htcファイルには以下のように記述しておきます。<SCRIPT LANGUAGE="JavaScript"> attachEvent("onClick", func); function func() { this.style.color = "red"; } </SCRIPT>
フィルタとは、スタイルシートの拡張として Internet Explorer 4.0 でサポートされた機能です。文字や画像に対して影付きやぼかしなどのエフェクトをかけることができます。HTMLの記述だけで、画像を貼り付けなくても、
できちゃったりします。IE4.0以外のブラウザの人のために、この(↑)サンプルのみは画像に変換して貼り付けていますが、実際のサンプルは、「フィルタサンプル」を参照してください。指定は簡単、STYLE属性で指定します。指定可能なタグには <BODY>, <SPAN>, <DIV>, <IMG>, <INPUT>, <BUTTON>, <TABLE>, <TR>, <TH>, <TD>, <TEXTAREA>, <THEAD>, <TFOOT>, <MARQUEE> がありますが、<SPAN>, <DIV> で使用する場合は、width, height を指定してやるか、position で absolute を指定してやる必要があります。
<SPAN STYLE="width:100%; filter:Shadow()"> 影付きの文字になります <SPAN>(...) の中には属性値をカンマ( , )で区切って指定します。<SPAN STYLE="filter: Blur(direction=135, strength=5)">効果を複数指定する場合はスペースで区切ります。<SPAN STYLE="filter: FlipH() FlipV()">
e4。テキストや画像を(半)透明にします。 グラデーションをかけることもできます。
opacity 透明の度合いを0(透明)〜100(不透明)の範囲で指定します。 style グラデーションスタイルを指定します。 startX, startY, finishX, finishY で指定した領域に対して、1は線形、2は円形、3は長方形型にグラデーションをかけます。 0はグラデーションをかけません。 startX
startY
finishX
finishYグラデーションをかける領域を指定します。 finishOpacity 透明度を指定します。 グラデーションは、Opacity 〜 FinishOpacity の範囲でかけられます。 <TABLE BACKGROUND="〜">
<TR><TD STYLE="width:100%; filter:Alpha(opacity=40)">
〜
</TD></TR></TABLE><SPAN STYLE="width:100%; filter:Alpha(opacity=100, finishOpacity=0, style=1)">
〜
</SPAN>注意：私の環境が悪いのかもしれないのですが、Alpha()を画像に対して適用すると、色が無茶苦茶になって無残な状況になってしまいました。 しかし、何故だか、HEIGHT=, WIDTH= のどちらかを、本来の画像の大きさより 2 小さな値に縮小してやると正常に表示できました。
e4。画像をにじませたような効果を出します。 文字の場合は立体的な影付き文字になります。
add trueを指定すると元の画像をにじませた絵の上に上書き表示します。 falseの場合は上書き表示しません。 direction 上方向から時計方向の角度を指定します。 右上は45、右下は135になります。 strength にじませの強さを指定します。
e4。画像の中の指定した色を透明にします。
color 透明にしたい色を #RRGGBB の形式で指定します。
e4。影をつけます。
color 影の色を指定します。 offX
offY影を表示する位置を指定します。 offX=5, offY=5 は、右に5、下に5の場所に影を表示します。 positive falseを指定すると、画像の透明化された部分にまで影をつけます。 <SPAN STYLE="width:100%; filter:DropShadow(color=silver)">
〜
</SPAN>
e4。対象の領域を左右に反転します。<TABLE STYLE="filter:FlipH()"><TR><TD>
〜
</TD></TR></TABLE>
e4。対象の領域を上下に反転します。<SPAN STYLE="width:100%; filter:FlipV()">
〜
</SPAN>
e4。画像やテキストの回りに（太陽の炎のように）影をつけます。
color 影の色を #RRGGBB の形式で指定します。 strength 影をつける度合いを指定します。 <SPAN STYLE="width:100%; filter:Glow(color=red)">
〜
</SPAN>
e4。画像やテキストを白黒化します。
e4。対象領域の色合い、彩度、明るさを反転させます。
e4。画像やテキストに光を当てたような効果を出します。
e4。画像やテキストの透明部を指定色で塗りつぶし、非透明部を透明にします。
color 透明部を塗りつぶす色を指定します。
e4。影をつけます。
color 影の色を指定します。 direction 影をつける方向を上を0とした時計回りの角度で指定します。 右上は45、右下は135です。 <SPAN STYLE="width:100%; filter:Shadow(color=gray)">
〜
</SPAN>
e4。画像やテキストに波かけの効果を出します。
add 効果適用後、元のイメージを上書き表示するか否かを指定します。 freq 波の個数を指定します。 lightStrength 光の強さを0〜100の範囲で指定します。 phase 波の開始位相を0〜360の範囲で指定します。 strength 波の強さを指定します。 <IMG SRC="〜" STYLE="filter:Wave(freq=2,strength=4)">
e4。Ｘ線によるレントゲン写真のような効果を出します。<IMG SRC="〜" STYLE="filter:Xray()">