スタイルシート,CSS,ホームページ作成,サイト制作 - サンプル

更新:

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



このエントリーをはてなブックマークに追加