スタイルシート,CSS,ホームページ作成,サイト制作 - サンプル。
■書き方 ・タグに直接記述、<style>タグで記述、<link>で外部スタイルシートファイル利用などがある。 <style type="text/css"> body{font-size:10pt} .fstyle{background:#ff0000;} </style> スタイルシート。 タグ名や独自名で定義する。 独自名の場合は、該当タグのclassに <font class="fstyle">背景が赤</font> のように書く。 直接書く場合は、 <h3 style="font-style:italic;">テキストを斜体にする</h3> のように書く。 <link rel="stylesheet" type="text/css" href="cylas.css"> スタイルシートを外部ファイルから使用する。 href:定義ファイルのURLまたはファイル名 ・sample.html <html> <head> <style type="text/css"> a{background:#00FF00;} .fstyle1{background:#FF0000;font-size:20pt;} </style> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h3 style="font-style:italic;">テキストが斜体</h3> <a href="test.html">背景が緑</a> <font class="fstyle1">背景が赤、サイズが20pt</font> <font class="fstyle2">背景が青</font> </body> </html> ・style.css .fstyle2{background:#0000FF;} ■単位 px ピクセル・・・ドット数 pt ポイント・・・(1 pt = 1/72 in) cm センチメートル mm ミリメートル in インチ・・・(1 in = 2.54 cm) pc パイカ・・・(1 pc = 12 pt) em 使用しているフォントの縦の長さ。「M」の縦の長さに相当。 ex 使用しているフォントの縦の長さの1/2。「x」の縦の長さに相当。 ■文字などの見た目、スタイル変化・変更 ・サンプル スタイルを適用したい場所にマウスを合わせた時に、 その場所だけスタイルを変化させるサンプル。 スタイルシートは、<STYLE>タグ中などに書く場合とJavaScript中に書く 場合で異なるものがあります。 font-styleなどハイフンがあるスタイルは、JavaScript中ではfontStyle と書きます。 ハイフンを取って、ハイフンの次の文字を大文字にします。 <html> <head> <title>文字のスタイル</title> <script language="javascript"> <!-- function fover(arg){ arg.style.fontStyle="italic"; } function fout(arg){ arg.style.fontStyle="normal"; } //--> </script> </head> <body> <a href="http://www.cylas.com/" onMouseOver="fover(this);" onMouseOut="fout(this);"> サンプル</a> </body> </html> ■位置、配置、座標、ポジションの指定、変更、移動など ・サンプル タグ中に「ID」を書くことにより、スタイルシートを適用したい場所を 指定できます。 座標は、ブラウザの画面の左上が原点で、右と下に行くほど値が増えます。 原点(0, 0)――→x座標 | | | ↓ y座標 <html> <head> <title>マージン</title> <script language="javascript"> <!-- i = 0; function pload(){ tset=setTimeout("pload()", 50); i = i + 5; pmargin.style.marginTop = i + "pt"; pmargin.style.marginLeft = i + "pt"; if(i > 200){ clearTimeout(tset); i = 0; } } //--> </script> </head> <body> <div id="pmargin" onClick="pload();">ようこそホームページへ</div> </body> </html> ・マージン 隣接した文字や画像からの距離。 隣接した文字などがなければ、ページの端からの距離。 <div>、<p>、<h>、<table>など段落を形成するタグでないと一部適用されない。 margin-top:200pt 上側のマージン margin-bottom:200pt 下側のマージン margin-left:200pt 左側のマージン margin-right:200pt 右側のマージン margin:10pt 6pt 10pt 6pt 上 右 下 左のマージン ・行ピッチ、行間隔 line-height:150pt ・パッディング、隙間 適用したタグ自身から隣接する文字や画像までの距離。 padding-top:200pt 上側の隙間 padding-bottom:200pt 下側の隙間 padding-left:200pt 左側の隙間 padding-right:200pt 右側の隙間 padding:10pt 6pt 10pt 6pt 上 右 下 左の隙間 ・インデント text-indent:100pt ・相対位置、絶対位置 position:absolute;left:50;top:100 absolute:絶対位置(ページの左上からの距離) relative:相対位置(最初に表示される場所からの距離) static:静止(最初に表示される場所のまま) leftとtopは、positionと同時に使用する。 left:最初に表示される場所からの横方向の位置 top:最初に表示される場所からの縦方向の位置 ・クリップ領域 clip:rect(23 146 68 0) 上 右 下 左の順で切り取る領域を指定 positionと併用しないと効果がない <html> <head> <title>クリップ領域</title> <script language="javascript"> <!-- i = 0; function dclick(){ if(i == 0){ pclip.style.clip = "rect(23 146 68 0)"; i = 1; }else{ pclip.style.clip = "rect(0 200 100 0)"; i = 0; } } //--> </script> </head> <body> <div id="pclip" style="position:absolute;width:200;height:80;background:green;" onClick="dclick();"> ようこそ<br>my<br>ホームページへ<br>クリッピング<br>切り取り </div> </body> </html> ・表示、非表示[1] display:none none:非表示。非表示の部分の領域は、占有しません。 block:段落単位表示 inline:行の途中で表示 list-item:箇条書き項目で表示 <html> <head> <title>表示方式</title> <script language="javascript"> <!-- i = 0; function fclick(){ if(i == 0){ pdisplay.style.display = "block"; i = 1; }else{ pdisplay.style.display = "none"; i = 0; } } //--> </script> </head> <body> <a style="background:red" href="JavaScript:onClick=fclick();">メニュー</a> <div id="pdisplay" style="display:none;background:green;width:200"> <a href="sample.html">TOP</a> <br> <a href="cylas.html">Dynamic HTML</a> </div> <h2>コンテンツ</h2> </body> </html> ・表示、非表示[2] visibility:hidden hidden:非表示。非表示の部分の領域は、占有したままです。 visible:表示 <html> <head> <title>表示・非表示</title> <script language="javascript"> <!-- i = 0; function fclick(){ if(i == 0){ pvisibility.style.visibility = "visible"; i = 1; }else{ pvisibility.style.visibility = "hidden"; i = 0; } } //--> </script> </head> <body> <a style="background:red" href="JavaScript:onClick=fclick();">メニュー</a> <div id="pvisibility" style="visibility:hidden;background:green;width:200"> <a href="sample.html">TOP</a> <br> <a href="cylas.html">Dynamic HTML</a> </div> <h2>コンテンツ</h2> </body> </html> ■フィルタ、特殊効果 ・サンプル falpha.filters(0).Opacityは、タグID「falpha」の 1個目のフィルタの「Opacity」の値という意味。 <html> <head> <title>透明度</title> <script language="javascript"> <!-- m = 100; n = 0; function pload(){ tset = setTimeout("pload()",10); if(m == 100 || n == 0){ n = 0; m = m - 5; falpha.filters(0).Opacity = m; falpha.filters(0).FinishOpacity = m; } if(m == 0 || n == 1){ n = 1; m = m + 5; falpha.filters(0).Opacity = m; falpha.filters(0).FinishOpacity = m; } } //--> </script> </head> <body onLoad="pload()"> <img src="img/0039.jpg" id="falpha" style="filter:Alpha(Opacity=100,FinishOpacity=100,style=2,StartX=0,StartY=0,FinishX=517,FinishY=65)"> </body> </html> ・透明度 filter:Alpha(Opacity=100,FinishOpacity=100,style=2, StartX=0,StartY=0,FinishX=517,FinishY=65) Opacity:透明度適用開始位置の透明度。0が透明、100が非透明 FinishOpacity:透明度適用終了位置の透明度。0が透明、100が非透明 style:フィルタタイプ。0が単一、1が線状、2が放射状、3が長方形 StartX:透明度適用開始X座標 StartY:透明度適用開始Y座標 FinishX:透明度適用終了X座標 FinishY:透明度適用終了Y座標 ・シャドウ 文字や画像にそのまま適用すると上手く表示されません。 テーブルのセル<TD>に適用すると表示されます。 filter:Shadow(Color=#000090,Direction=135) Color:影の色 Direction:影の方向。45度単位 ・ドロップシャドウ 文字や画像にそのまま適用すると上手く表示されません。 テーブルのセル<TD>に適用すると表示されます。 filter:DropShadow(OffX=0,OffY=0,Color=#900000,Positive=True) OffX:影の右方向の距離 OffY:影の下方向の距離 Color:影の色 Positive:影の適用対象。不透明部分がTrue、透明部分がFalse ・波 文字や画像にそのまま適用すると上手く表示されません。 テーブルのセル<TD>に適用すると表示されます。 filter:Wave(Add=True,Freq=3,LightStrength=50,Phase=100,Strength=3) Add:オブジェクトとの合成。Trueが合成、Falseが歪みのみ Freq:波数。数値が大きいほど細かい波 LightStrength:光の強さ。0~100で100が最大 Phase:波の開始位置。0が0度、25が90度、・・・、100が360度 Strength:振動幅。数値が大きいほど大きい歪み ・発光 文字や画像にそのまま適用すると上手く表示されません。 テーブルのセル<TD>に適用すると表示されます。 filter:Glow(Color=#0055DD,Strength=80) Color:発光色 Strength:発光の強さ ・ブレ 文字や画像にそのまま適用すると上手く表示されません。 テーブルのセル<TD>に適用すると表示されます。 filter:Blur(add=1,Direction=90,Strength=0) add:Trueが合成、Falseがブレのみ。 Direction:ブレの方向 Strength:ブレの強さ ・照明 filter:light単体では真っ黒(消灯状態)なので、以下のオプションを使います。 Xは光のX座標、Yは光のY座標、Zは光のZ座標(光の奥行き。大きいと広範囲に照明)。 filter:light AddAmbient(赤,緑,青,強さ):光の色、の強さ AddCone(光源X,光源Y,光源Z,焦点X,焦点Y,赤,緑,青,強さ,広がり):光源と焦点座標、色、強さ、広がり AddPoint(X,Y,Z,赤,緑,青,強さ):光のX、Y、Z座標と色、強さ ChangeColor(設定値,赤,緑,青,変化方法):変化させる色番号、光の色、変化の仕方(Trueは設定値を適用、Flaseは既存値に足す) ChangeStrength(設定値,赤,緑,青,変化方法):強調させる色番号、光の色、変化の仕方(Trueは設定値を適用、Flaseは既存値に足す) Clear:消灯 MoveLight(設定値,X,Y,Z,変化方法):座標変化させる色番号、光の座標、変化の仕方(Trueは設定値を適用、Flaseは既存値に足す) <html> <head> <title>照明</title> <script language="javascript"> <!-- m = 0; function pload(){ tset = setTimeout("pload()",100); m = m + 10; if(m > 500){ m = 0; clearTimeout(tset); } flight.filters(0).AddCone(0,0,0,150,40,100,150,200,80,m); } //--> </script> </head> <body onLoad="pload()"> <table><tr> <td style="filter:light()" id="flight"> <h1 style="color:#FF0000">HOMEPAGE</h1> <img src="img/0039.jpg"> </td> </tr></table> </body> </html> ・モノクロ filter:Gray <html> <head> <title>モノクロ</title> <script language="javascript"> <!-- m = 0; function iclick(){ if(m == 0){ fgray.style.filter = "Gray"; m = 1; }else{ fgray.style.filter = ""; m = 0; } } //--> </script> </head> <body bgcolor="#00ff55" id="fgray"> <img src="img/0039.jpg" onClick="iclick()"> <h1 style="color:#0000FF">HOMEPAGE</h1> </body> </html> ・X線 filter:Xray ・方向反転 filter:FlipH FlipH:左右方向反転 FlipV:上下方向反転 ・色反転 filter:Invert ・マスキング 透過GIFの透明部分に色を塗ります。 透過部分がないと効果がありません。 filter:Mask(Color=#2266DD) Color:透明部分の塗り潰し色 ・クロマキ filter:Chroma(Color=#FF0000) Color:透過する色 ・ブレンドトランジション filter:blendTrans(duration=0) duration:トランジション時間。秒数で指定。 filters(0).apply():トランジション適用開始 filters(0).play():トランジション開始 <html> <head> <title>ブレンドトランジション</title> <script language="javascript"> <!-- m = 0; function iclick(){ if(m == 0){ tblend.filters(0).apply(); tblend.src = "img/back.gif"; tblend.filters(0).play(); m = 1; }else{ tblend.filters(0).apply(); tblend.src = "img/home.gif"; tblend.filters(0).play(); m = 0; } } //--> </script> </head> <body> <img onClick="iclick()" id="tblend" style="width:192;height:38;filter:blendTrans(duration=2);" SRC="img/home.gif"> </body> </html> ・リビールトランジション 文字や画像にそのまま適用すると上手く表示されません。 テーブルのセル<td>に適用すると表示されます。 filter:revealTrans(duration=0,transition=0) duration:トランジション時間。秒数で指定。 transition:トランジション方法。効果番号。 (効果番号:0)ボックスイン (効果番号:1)ボックスアウト (効果番号:2)サークルイン (効果番号:3)サークルアウト (効果番号:4)ワイプアップ (効果番号:5)ワイプダウン (効果番号:6)ワイプライト (効果番号:7)ワイプレフト (効果番号:8)バーティカルブラインド (効果番号:9)ホライゾンタルブラインド (効果番号:10)チェッカーボードアクロス (効果番号:11)チェッカーボードダウン (効果番号:12)ランダムディゾルブ (効果番号:13)スプライトバーティカルイン (効果番号:14)スプライトバーティカルアウト (効果番号:15)スプライトホライゾンタルイン (効果番号:16)スプライトホライゾンタルアウト (効果番号:17)ストリップレフトダウン (効果番号:18)ストリップレフトアップ (効果番号:19)ストリップライトダウン (効果番号:20)ストリップライトアップ (効果番号:21)ランダムバーホライゾンタル (効果番号:22)ランダムバーバーティカル (効果番号:23)ランダム filters(0).apply():トランジション適用開始 filters(0).play():トランジション開始 <html> <head> <title>リビールトランジション</title> <script language="javascript"> <!-- function pload(){ setTimeout("pload()",2000); treveal.style.visibility = "hidden"; treveal.filters(0).apply(); treveal.filters(0).duration = 1; treveal.filters(0).transition = 23; treveal.style.visibility = "visible"; treveal.filters(0).play(); } //--> </script> </head> <body onLoad="pload()"> <table> <tr><td id="treveal" style="filter:revealTrans(duration=0,transition=0);visibility:hidden;"> <img src="img/0039.jpg"> </td></tr> </table> </body> </html> ・ページ移動トランジション <meta http-equiv="Page-Enter" content="blendTrans(duration=2)"> ページやサイトの移動時にページ全体をブレンドトランジション <meta http-equiv="Page-Enter" content="revealTrans(duration=2,transition=10)"> ページやサイトの移動時にページ全体をリビールトランジション Page-Enter:ページロード時 Page-Exit:ページアンロード時 Site-Enter:別サイトロード時 Site-Exit:別サイトアンロード時 各ページに連続して使用したり、新規ウィンドウを開く場合は、 上手く表示できないことがあります。 <html> <head> <title>ページ移動トランジション</title> <meta http-equiv="Page-Enter" content="revealTrans(duration=1,transition=23)"> <meta http-equiv="Page-Exit" content="blendTrans(duration=2)"> </head> <body> <a href="cylas.html">進む</a> </body> </html> ■その他 ・リンクの色など変更、アンカーホバー a:hover hover:マウスを合わせたとき link:通常のアンカーの色 visited:一度見たページのアンカーの色 active:アンカーをクリックしたときのアンカーの色 <style type="text/css"> a:hover{color:#77ff44;font-weight:bold;} </style> ・スクロールバーの色 scrollbar-face-color:表面の色 scrollbar-highlight-color:3D左上側の最外郭の1つ内側の色 scrollbar-3dlight-color:3D左上側の最外郭の色 scrollbar-shadow-color:3D右下側の最外郭の1つ内側の色 scrollbar-darkshadow-color:3D右下側の最外郭の色 scrollbar-arrow-color:スクロールバーの矢印の色 scrollbar-base-color:最下層の色 <style type="text/css"> body{ scrollbar-face-color:#FFFFFF; scrollbar-highlight-color:#0000FF; scrollbar-3dlight-color:#FFFFFF; scrollbar-shadow-color:#0000FF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-arrow-color:#FF8800; scrollbar-base-color:#FFFFFF; } </style> ・テキストボックスの入力モード テキストボックスのIME入力モード指定 ime-mode:inactive auto:デフォルト値。特に何もしない。ユーザによりモード変更可能。 active:日本語入力モード。ユーザによりモード変更可能。 inactive:英数字入力モード。ユーザによりモード変更可能。 disabled:英数字入力モード。ユーザによるモード変更不可能。 ・カーソル形状 cursor:auto auto:自動 crosshair:十字 default:矢印 hand:手 move:移動 text:テキスト入力用 wait:砂時計 help:ヘルプ n-resize:上矢印 s-resize:下矢印 w-resize:左矢印 e-resize:右矢印 ne-resize:右斜め上矢印 nw-resize:左斜め上矢印 se-resize:右斜め下矢印 sw-resize:左斜め下矢印 no-drop:ドロップ禁止 all-scroll:全スクロール col-resize:横方向リサイズ row-resize:縦方向リサイズ progress:進行中 not-allowed:禁止 vertical-text:縦書き url('URL'):オリジナル オリジナルのカーソルは、カーソルアイコンのデータを用意しURLを書きます。 拡張子が.cur(カーソル)、.ani(アニメーション)、ico(アイコン)などが使える。 例:style="cursor:url('img/banana.ani')" ・縦書き writing-mode:tb-rl tb-rl:縦書き lr-tb:横書き white-space:nowrapと併用すると途中で改行されない。 ・テーブル(<table>)で半角英数字を強制改行 URLなど長い半角英数字(abcdef・・・)の文字列は、 WIDTHを設定してもテーブル中では改行されず、セル幅が伸びます。 これを強制的に途中で改行させる場合に利用する。 IEで対応。その他のブラウザは基本的に非対応。 word-wrap: break-word break-word:(半角英数を途中で改行させる) normal:デフォルト(半角英数を途中で改行しない) ・スクロールバー表示 overflow:scroll scroll:スクロールバー表示 <html> <head> <title>スクロールバー表示</title> <script language="javascript"> <!-- i = 0; function dclick(){ if(i == 0){ ofscroll.style.overflow = "scroll"; i = 1; }else{ ofscroll.style.overflow = ""; i = 0; } } //--> </script> </head> <body> <div onClick="dclick();" style="width:400;height:300;background:#5511DD" id="ofscroll"> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> ようこそホームページへ<br> </div> </body> </html>