スタイルシート,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>
