2010年12月21日


CSS : 文字の回転と反転 ( matrix )

IE だけ勝手が違います。
そもそも、IE のMatrix は、IE5.5 の時からあるので、
座標系が CSS3系 とは違うようです。でも、IE9 を使えない OS をまだ
当分使わないといけないので、このようになるのは仕方無いと思います。
海を90度回転しています
海を180度回転しています
海を270度回転しています
海を横反転しています
海を横反転して90度回転しています
海を横反転して180度回転しています
海を横反転して270度回転しています
海を45度回転しています
<style type="text/css">
.mtx {
	display:block;
	font-size:16px;
	width:16px;
}
.rotation90 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, -1, 1, 0, 0, 0);
	-webkit-transform:matrix(0, -1, 1, 0, 0, 0);
	-o-transform:matrix(0, -1, 1, 0, 0, 0);
	transform:matrix(0, -1, 1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotation180 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(-1, 0, 0, -1, 0, 0);
	-webkit-transform:matrix(-1, 0, 0, -1, 0, 0);
	-o-transform:matrix(-1, 0, 0, -1, 0, 0);
	transform:matrix(-1, 0, 0, -1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rotation270 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, 1, -1, 0, 0, 0);
	-webkit-transform:matrix(0, 1, -1, 0, 0, 0);
	-o-transform:matrix(0, 1, -1, 0, 0, 0);
	transform:matrix(0, 1, -1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.mirror {
	/* 横反転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(-1, 0, 0, 1, 0, 0);
	-webkit-transform:matrix(-1, 0, 0, 1, 0, 0);
	-o-transform:matrix(-1, 0, 0, 1, 0, 0);
	transform:matrix(-1, 0, 0, 1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}
.mirror90 {
	/* 横反転90 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, 1, 1, 0, 0, 0);
	-webkit-transform:matrix(0, 1, 1, 0, 0, 0);
	-o-transform:matrix(0, 1, 1, 0, 0, 0);
	transform:matrix(0, 1, 1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1,mirror=1);
}
.mirror180 {
	/* 横反転180 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(1, 0, 0, -1, 0, 0);
	-webkit-transform:matrix(1, 0, 0, -1, 0, 0);
	-o-transform:matrix(1, 0, 0, -1, 0, 0);
	transform:matrix(1, 0, 0, -1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2,mirror=1);
}
.mirror270 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, -1, -1, 0, 0, 0);
	-webkit-transform:matrix(0, -1, -1, 0, 0, 0);
	-o-transform:matrix(0, -1, -1, 0, 0, 0);
	transform:matrix(0, -1, -1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3,mirror=1);
}
.rotation45 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	-webkit-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	-o-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.707,M12=0.707,M21=-0.707,M22=0.707,Dx=-2,Dy=8);
}
</style>

<table>
<tr>
<td><span class='mtx rotation90'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を90度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation180'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を180度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation270'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を270度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転しています</td>
</tr>
<tr>
<td><span class='mtx mirror90'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して90度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror180'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して180度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror270'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して270度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation45'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を45度回転しています</td>
</tr>
</table>
文字回転CSS ( 含IE9 ) では、IE9 に対応したSPAN を使った文字列内
の一部分回転を行っています。



posted by at 2010-12-21 15:51 | Comment(0) | 小ネタ | このブログの読者になる | 更新情報をチェックする

google.load で円グラフ

API キーに関しては以下のようにあるので、公開時は取得して下さい。
( テスト時には無くても動くので本番サイト以外のキーを取得しなくてもいいです )
Warning: You need your own API key in order to use the Google Loader. 
Without your own key, examples won't work. 
<script src="http://www.google.com/jsapi?key=APIキー" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages: ["piechart"]});
</script>

<div id="chart_div" style="width: 300px; height: 240px;"></div>

<script type="text/javascript">

	var data = new google.visualization.DataTable();
	data.addColumn('string', '対象');
	data.addColumn('number', '件数');
	data.addRows(3);

	data.setValue(0, 0, '対象A');
	data.setValue(0, 1, 2000);
	data.setValue(1, 0, '対象B');
	data.setValue(1, 1, 3000);
	data.setValue(2, 0, '対象C');
	data.setValue(2, 1, 1500);

	var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

	chart.draw(data, {width: 300, height: 240, is3D: true, title: '円グラフのタイトル'});

</script>



posted by at 2010-12-21 11:08 | Comment(0) | 小ネタ | このブログの読者になる | 更新情報をチェックする

2010年12月20日


縦書きCSS

mootools で縦横スライド( core のみ google.load ) を使って
縦書きを横スライドさせています。
( 何故か、縦のスライドは動きませんでした )
IE に関しては、標準モードでないと、「ー」が回転しなかったりしていますので注意です。

まず、縦書き用スタイルシート : 縦書きWebページプロジェクト - freefielder.jp
から css を取得して WEB 上に設置します。

ブログで設置できる事を確認しているものに関してはこちらを参照して下さい。

次に、縦書き変換スクリプト : 縦書きWebページプロジェクト - freefielder.jp
で通常のテキストを変換して DIV に縦と横幅を与えて、その中に変換した 
HTML をセットします。



この内容が縦に消えたり出現したりします
http://mootools.net/more/ でFx.Slide をチクしてラ
イブラリ
をビルドして追加実装して使用します
linear
Quad.easeIn/Quad.easeOut/Quad.easeInOut
Cubic.easeIn
Cubic.easeOut
Cubic.easeInOut
Quart.easeIn
Quart.easeOut
Quart.easeInOut
Quint.easeIn
Quint.easeOut
Quint.easeInOut
Pow
縦と横は必ず非表示したなら表示してから切り替え無いと
動かなくなるようです
以下の効果は不規則な動きをするのでテストしてからで無いと
エラになる可能性もあります
ページ全体を使ったサンプル


<link type="text/css" rel="stylesheet" href="http://lightbox.on.coocan.jp/tate-style.css"/>


posted by at 2010-12-20 22:10 | Comment(0) | 小ネタ | このブログの読者になる | 更新情報をチェックする

2010年12月19日


mootools で縦横スライド( core のみ google.load )


horizontal :
この内容が縦に消えたり出現したりします。
http://mootools.net/more/ で、Fx.Slide をチェックしてライブラリ
をビルドして追加実装して使用します

linear
Quad.easeIn or Quad.easeOut or Quad.easeInOut.
Cubic.easeIn or Cubic.easeOut or Cubic.easeInOut.
Quart.easeIn or Quart.easeOut or Quart.easeInOut.
Quint.easeIn or Quint.easeOut or Quint.easeInOut
Pow

縦と横は必ず非表示したなら表示してから切り替え無いと
動かなくなるようです。

以下の効果は、不規則な動きをするのでテストしてからで無いと
エラーになる可能性もあります

Expo.easeIn or Expo.easeOut or Expo.easeInOut.
Circ.easeIn or Circ.easeOut or Circ.easeInOut.
Sine.easeIn or Sine.easeOut or Sine.easeInOut.
Back.easeIn or Back.easeOut or Back.easeInOut.
Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut.
Elastic.easeIn or Elastic.easeOut or Elastic.easeInOut
<script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
google.load("mootools", "1.3.0");
</script>
<script src="http://lightbox.on.coocan.jp/js/mootools-fxSlide.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
window.addEvent('domready', function() {

	var myVerticalSlide1 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.linear
	});
	$('v_toggle1').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide1.toggle('horizontal');
		}
		else {
			myVerticalSlide1.toggle();
		}
	});

	var myVerticalSlide2 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeIn
	});
	$('v_toggle2').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide2.toggle('horizontal');
		}
		else {
			myVerticalSlide2.toggle();
		}
	});

	var myVerticalSlide3 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeOut
	});
	$('v_toggle3').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide3.toggle('horizontal');
		}
		else {
			myVerticalSlide3.toggle();
		}
	});

	var myVerticalSlide4 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeInOut
	});
	$('v_toggle4').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide4.toggle('horizontal');
		}
		else {
			myVerticalSlide4.toggle();
		}
	});

	var myVerticalSlide5 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Pow
	});
	$('v_toggle5').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide5.toggle('horizontal');
		}
		else {
			myVerticalSlide5.toggle();
		}
	});

});
</script>

<input id="v_toggle1" type="button" value="linear">
<input id="v_toggle2" type="button" value="Quad.easeIn">
<input id="v_toggle3" type="button" value="Quad.easeOut">
<input id="v_toggle4" type="button" value="Quad.easeInOut">
<input id="v_toggle5" type="button" value="Pow">
<br>
horizontal : <input id="horizontal" type="checkbox">

<pre id="vertical_slide">
この内容が縦に消えたり出現したりします。
http://mootools.net/more/ で、Fx.Slide をチェックしてライブラリ
をビルドして追加実装して使用します
</pre>
jsapi?key=APIキーを書けと Google では書かれていますが、他のサイトのキーを書いても
動いてしまうので( というか書かなくても動きます )。本来この処理でキーを書く事のメ
リットは、「問題が生じた時に Google からの連絡が可能ですよ」という内容です。他の
API では、以前「任意です」と書かれていたものもあったのですが、今は消えています


posted by at 2010-12-19 22:45 | Comment(0) | 小ネタ | このブログの読者になる | 更新情報をチェックする

onmouseover で、画像を透過して隠していたメッセージを表示する

画像の後ろに画像でもいいと思います。
こんにちは
<div style='position:relative;height:320px;'>

<div style='position:absolute;padding:20px;font-size:20px;font-weight:bold;'>
こんにちは<br>
</div>

<img
	src="http://lh3.ggpht.com/_IzfbcNjqGuE/TPzJxQkpL5I/AAAAAAAABFQ/A4uYtKe14-0/b15architecture_exteriors014.jpg"
	style='border:solid 1px #000000;position:absolute;'
	onmouseover='
	if ( navigator.userAgent.toLowerCase().indexOf("msie") > -1 ) {
		this.style.filter="alpha(opacity=30)";
	}
	else {
		this.style.opacity=.3;
	}
	'
	onmouseout='
	if ( navigator.userAgent.toLowerCase().indexOf("msie") > -1 ) {
		this.style.filter="alpha(opacity=100)";
	}
	else {
		this.style.opacity=1;
	}
	'
>

</div>


posted by at 2010-12-19 20:58 | Comment(0) | 小ネタ | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します