ｲﾒｰｼﾞの回り込み HTMLﾚﾍﾞﾙ3の拡張機能目次 ﾒﾀ

スタイルシート (CSS)

インターネット･エクスプローラ(Microsoft社)はHTML3.0の拡張機能であるスタイルシートをサポートしており、従来のフォントサイズ変更やマージン指定などの機能をポイント、インチ、あるいはセンチメートルで指定したり、色やハイパーリンクの下線も指定が可能です。ネットスケープも6.0からはこの機能をサポートしています。

このHTML文書の見栄えを定義するためのスタイルシートの記述で使うのが、Cascading Style Sheetを略して｢CSS｣と呼ばれる言語仕様です。1994年からCERN(ヨーロッパ素粒子物理学研究所)によって開発され、WWWコンソーシアム(W3C)の標準となったのは1996年です。

フレーム機能との組み合わせ

たとえば、フレーム機能を用いて｢文書１(style1.html)｣と｢文書２(style1.html)｣を同一画面へ表示し、その中でスタイルシートを使いたい場合、まず２つの書類を以下のように指定します。 
	
	
	<frameset rows="75, *">
	<frame name="header" src="style1.html">
	<frame name="content" src="style2.html">
	</frameset>
これをHTML文書として保存し、次に<style>タグを使ってそれぞれの文書で使用したいフォント等を指定します。この<style>は開始タグと終了タグを持ち、下記の文書２のように<body>タグを用いて背景画像も指定する場合、<body>タグが<style>タグより先に記述されなければ、スタイルシート機能をサポートしないブラウザでは背景画像が表示されません。

　
タグの順序を変えて背景画像を表示できたとしても、スタイルシート機能をサポートしないブラウザの場合は、<body>〜</body>の内容が表示され、その指定は無効となります。
　

｢文書１｣では本文中のフォントを９／10ポイントのＭＳゴシック、色を黒に指定します。 

	
	
	<style>
	body {font: 9pt/10pt ＭＳ ゴシック; color: black}
	</style>
文書１

｢文書２｣では文節のフォントを11／14ポイントのＭＳゴシックで白色、インデントが0.25インチ、右マージンが0.25インチに指定するほか、見出しの文字サイズはh1が40ポイントのＭＳ明朝で白色、h2が18ポイントのＭＳ明朝で黄色、h3が12ポイントのＭＳゴシックで斜体の黒色と、それぞれ違う指定をします。この状態で本文に<p>タグ、<h1>タグ、<h2>タグ、および<h3>タグを使った場合、指定したインデントやマージン、あるいは文字サイズ、フォント、色、字体で表示されます。 

	
	
	<style>
	p {font: 11pt/14pt ＭＳ ゴシック; color: white; text-indent: 0.25in; margin-right: 0.25in}
	h1 {font: 40pt ＭＳ 明朝; color: white}
	h2 {font: 18pt ＭＳ 明朝; color: yellow}
	h3 {font: 12pt ＭＳ ゴシック; color: black; font-style: italic}
	</style>
文書２

また、この例(文書２)の本文中でも、<div>タグと<span>タグを使っています。どちらも開始タグと終了タグを持ち、以下のように記述します。 

	
	
	<div style="margin-left: 0.10in; margin-right 0.10in">〜</div>
これは段落に分けた文章の左マージンと右マージンをそれぞれ0.1インチとし、文中で背景の色が変えたい場合は次のようにします。この記述例だと<span style>〜</span>の部分だけ背景がピンク色になります。 
	
	
	<span style="background: pink">〜</span>
また、文中でハイパーリンクの色を変えたい場合、 
	
	
	<a style="color: yellow; text-decoration: none" href="リンク先">〜</a>
このように指定すれば、フォントカラーが黄色で下線なしの表示となります。以上を含む実例をインターネット･エクスプローラでご覧ください。

ｽﾀｲﾙｼｰﾄの実例

背景

HTML4.0からは更に機能が拡張され、背景の色や画像を従来の<body>タグを使う代わり、スタイルシートでも指定することが出来ます。たとえば、このページの背景を他のページのような<body>タグでなく<style>タグで記述するなら、

	
	
	<head>
	<style type="text/css">
	body {background: url("../images/bg_yok.jpg")}
	</style>
	</head>
これでまったく同じ結果が得られます。加えて、スタイルシートを使うことで、このページのようにスクロールする時も背景だけを固定したり、<body>タグでは出来ないことが可能となりました。それらのプロパティは以下のとおりです。

background
バリュ−：background-color | background-image | background-repeat |
background-attachment | background-position
初期設定：なし
適用対象：すべての要素
パーセンテージ： ｢background-position｣で指定
｢background｣プロパティは、他の背景プロパティ(｢background-color｣、｢background-image｣、｢background-repeat｣、｢background-attachment｣、｢background-position｣)を指定するための簡略プロパティで、スタイルシートの同じ場所へ記述します。｢background｣プロパティは、まず他のすべてのプロパティのイニシャル･バリューを設定し、それから与えられた明確なバリューを割り当てます。

次の例ではbackground-colorのバリューのみが指定されており、他のプロパティはそれぞれのイニシャル･バリューで指定されます。 

	
	
	body {background: red}
そして、すべてのバリューを指定したのが次の例です。 
	
	
	p {background: url("../images/chess.png") gray 50% repeat fixed}

background-color
バリュ−：背景色 | transparent
初期設定：tranparent
適用対象：すべての要素
パーセンテージ： なし
これは背景の色かそれを透明にするかを設定するプロパティで、｢transparent｣を指定すると背景の下に隠れた色が透けて見えます。色を指定した場合の機能は、<body>タグの｢bgcolor｣属性とまったく同じです。 
	
	
	h1 {background-color: #ff0000}

background-image
バリュ−：url | none
初期設定：なし
適用対象：すべての要素
パーセンテージ： なし
<body>タグの｢backgraund｣属性と同じく、このプロパティで背景画像が設定できます。背景画像を表示できない時のため、背景色と両方を指定しておけば確実です。背景色は背景画像が表示されている限り隠れて見えませんが、もし背景画像に透明化GIFイメージを使うなら、透明な部分へは背景色が浮かび上がります。記述方は以下のとおり背景画像のURLを指定するか、 
	
	
	body {background-image: url("../images/bg_yok.jpg")}
背景画像を使わない場合は次のように記述します。 
	
	
	p {background-image: none}

background-repeat
バリュ−：repeat | repeat-x | repeat-y | no-repeat
初期設定：repeat
適用対象：すべての要素
パーセンテージ： なし
スタイルシートを使うと、これまでのような<body>タグの｢backgraund｣属性で背景画像を指定する時と違って表示の設定が自由です。<style>タグの｢background-repeat｣プロパティーは、背景画像をどう並べて表示するか４つのバリューで次のとおり指定できます。


中央の黒枠の部分が元の背景画像

たとえば右図中央の黒枠の部分が｢pendant.gif｣という画像だとします。 
	
	
	body {background: white url("../images/pendant.gif");
	background-repeat: repeat-y;
	background-position: center;}
こう記述することで、右図のような画面の中央へ置かれた｢pendant.gif｣が上下縦方向にだけ並べて表示される以外は白い背景となります。一見フレームを使ったような、左(とか上)の部分だけ色や柄が違うページを作るのも簡単です。

background-attachment
バリュ−：scroll | fixed
初期設定：scroll
適用対象：すべての要素
パーセンテージ： なし
このページのようにスクロールする時も背景だけは固定しておきたいなら、｢background-attachment｣プロパティーのバリューを｢fixed｣に指定します。｢scroll｣だと従来どおり前景(本文)をスクロールする時、背景もスクロールされます。長いHTML文書で｢scroll｣を指定した場合、｢background-repeat｣プロパティーのバリューが｢no-repeat｣であれば、文書の冒頭へ表示されている背景画像は本文と共にスクロールされた後、見えなくなるのでご注意ください。

　
いくら｢background-attachment｣プロパティーで背景を固定しようと、｢fixed｣がサポートされていないプラウザでは機能しないため、そのつもりで｢background-repeat｣プロパティーのバリューを｢no-repeat｣に指定しても、本文をスクロールすると背景画像が見えなくなってしまいます。
　

以下は先の例と似ていますが、縦並びの｢pendant.gif｣は中央でなく左寄りとなり、本文がスクロールされてもそちらは固定されたまま動きません。 

	
	
	body {background: white url("../images/pendant.gif");
	background-repeat: repeat-y;
	background-attachment: fixed;}

background-position
バリュ−：[パーセンテージ | 長さ]{1,2} | [[top | center | bottom] || [left | center | right]]
初期設定：0% 0%
適用対象：ブロック･レベルおよび代わりの要素
パーセンテージ： ボックス自体のサイズ
｢background-position｣プロパティーでは、次のようなバリューを使って背景画像の位置が設定できます。

もし２組の代わり１つしかパーセンテージか長さが指定されなかった場合は、それが横の位置を決定し、縦の位置は｢50%｣となります。いっぽう、２組の数値が指定された場合は前者が横の位置、後者が縦の位置を決定し、それら２組の数値は｢50% 2cm｣のようにパーセンテージと長さを混ぜることも可能です。また、マイナス値を使って指定できますが、パーセンテージと長さを混ぜると機能しません。 
	body {background: url("../images/banner.jpeg") right top}    /* 100%   0% */
	body {background: url("../images/banner.jpeg") top center}   /*  50%   0% */
	body {background: url("../images/banner.jpeg") center}       /*  50%  50% */
	body {background: url("../images/banner.jpeg") bottom}       /*  50% 100% */
こうして指定した背景画像は、｢background-attachment｣プロパティーのバリューが｢fixed｣であれば前景をスクロールしてもその位置へ留まります。たとえば、 
	
	
	body {background-image: url("../images/logo.png");
	background-attachment: fixed;
	background-position: 98% 8%;
	background-repeat: no-repeat;}
この例では画面の右上へ｢logo.png｣という画像が１つだけ表示され、前景をどうスクロールしても、その部分だけは絶えず同じ位置に固定された状態のままです。

背景画像の実例


Copyright (C) 1996-2003 by Yasukazu Yokoi. All Rights Reserved.