SQLの窓

2013年02月19日


jQuery ajax の JSON としての処理と SELECT エレメントの動的作成

jQuery を使った ajax の処理で、サーバー側からコンボボックスの内容を JSON として読みだして、SELECT 要素の中に動的に OPTION 要素を作成します。

dataType : "json"

もどされるデータがそのまま JSON オブジェクトとして jQuery 側で作成してくれていますので、グローバルな変数として window.mydata = result; を実行して再利用可能にしています。

まず、エレメントを作成してから jQuery のオブジェクトに変換して処理しています。

▼ op は DOM のエレメント
op = document.createElement("option");

▼ $(op) は、jQuery のオブジェクト
$(op).attr("value", i+1);

▼ OPTION要素にテキストノードを追加
$(op).append(window.mydata.ken[i]);

▼ SELECT 要素に DOM エレメントを追加
$("#target1").append(op);

最後に、jQuery を使って、コンボボックスの任意のデータを選択状態にしています。これは、一般的な記述で書くと、documnet.getElementById("target1").selectedIndex = 27 になります。

もうひとつのコンボボックス

比較の為に、県のデータを JavaScript の変数として直接定義して処理しています。

<style type="text/css">
#target1 {
	width: 200px;
	border-radius: 6px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {

	$.ajax({
	// javascript の実行分を書いたテキストを呼び出す
		url: "http://lightbox.on.coocan.jp/ken.php",
		cache: false,
		dataType: "json"
	}).done( function( result, textStatus, jqXHR ) {
		// result がそのまま JSON オブジェクトです
		window.mydata = result;
		var op = null;
		// 空のオプション( 文字列を使用 )
		$("#target1").append("<option value='0'></option>");
		for( var i = 0; i < window.mydata.ken.length; i++ ) {
			op = document.createElement("option");
			$(op).attr("value", i+1);
			$(op).append(window.mydata.ken[i]);
			$("#target1").append(op);
		}

		// JavaScript 用プロパティなので、attr で実行するとエラー 
		$("#target1").prop("selectedIndex",27);
		// $("#target1").get(0).selectedIndex = 27; // DOM を使う場合

	});
});

window.myData2 = { "ken" : ["北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"]};

$( function() {
	var op = null;
	// 空のオプション( 文字列を使用 )
	$("#target2").append("<option value='0'></option>");
	for( var i = 0; i < window.myData2.ken.length; i++ ) {
		op = document.createElement("option");
		$(op).attr("value", i+1);
		$(op).append(window.myData2.ken[i]);
		$("#target2").append(op);
	}

	// JavaScript 用プロパティなので、attr で実行するとエラー 
	$("#target2").prop("selectedIndex",1);
	// $("#target2").get(0).selectedIndex = 1; // DOM を使う場合

});


</script>
<select id="target1">
</select>
<hr />
<select id="target2">
</select>
jsdo.it での実行
jsdo.it でのソースコード

以下はコンボボックス用のデータをクロスドメインで呼び出す事を想定しているコードです。このコードを使うには、IE は IE10 である必要があります。
<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/plain; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

print '{"ken" : ["北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"]}';

?>

Access-Control-Allow-Origin: * によってクロスドメインが可能になりますが、XMLHttpRequest で処理するには IE は IE10 である必要があります。IE9(IE8) でクロスドメインの呼び出しは、XDomainRequest を使用する必要があります。

IE9(IE8) は、インターネットの設定(「ドメイン間でのデータソースのアクセス」を有効)を行うと、無条件にクロスドメインの処理ができるようになります。但し、その場合でも jQuery を使う場合は $.ajax を実行する前に $.support.cors = true を実行する必要があります。
関連する記事 prototype.js でクロスドメインの Ajax の読み込みテスト
タグ:jquery AJAX
posted by lightbox at 2013-02-19 14:31 | Ajax:jQuery | このブログの読者になる | 更新情報をチェックする

2013年02月18日


prototype.js でクロスドメインの Ajax の読み込みテスト

Opera が動くようになっていたので更新しました

表示は、console.log で行っています。各ブラウザの開発者ツールを開いた状態でボタンをクリックして下さい。
IE : F12 => スクリプトタブ ( その後ページをリロード )
Firefox : Firebug のコンソール
Chrome : F12( または CTRL + SHIFT + I )からコンソール
Safari : CTRL + ALT + I からコンソール
Opera : CTRL + SHIFT + I からコンソール
結局 IE8 用に prototype.js を改造するはめになりました。テストした URL は、「Access-Control-Allow-Origin: *」 を返すようにしていますが、prototype.js 内で、ヘッダーを変更している為、セキュリティ回避の為、そのままでは エラーになるのでsetRequestHeaders を無効にしています。( 偽装を拒否する為のようです )
IE8 の場合、インターネットオプションで、「ドメイン間でのデータソースのアクセス」を有効にしてやると、Access-Control-Allow-Origin が無くても XMLHttpRequest でアクセスできるようになります。Access-Control-Allow-Originの有無で制御したい場合は、XDomainRequest を使用する必要があります

但し、XDomainRequest は、XMLHttpRequestとでは、イベントに互換性が無いようなのでこのような変更が必要になります。
<script type="text/javascript" src="http://lightbox.on.coocan.jp/prototype_x.js"></script>
<script type="text/javascript">
Ajax.Request.prototype.setRequestHeaders = function() {}
function testCall() {
new Ajax.Request('http://lightbox.on.coocan.jp/ver.php', {
	method: "get",
	asynchronous: true,
	onComplete: function(response) {
		console.log(response.responseText);
	}
});
}

</script>
<input type="button" value="実行" onclick='testCall();'>

以下は変更部分です
var Ajax = {
  getTransport: function() {
    return Try.these(
      function() {return new window.XDomainRequest()},
      function() {return new XMLHttpRequest()},
      function() {return new ActiveXObject('Msxml2.XMLHTTP')},
      function() {return new ActiveXObject('Microsoft.XMLHTTP')}
    ) || false;
  },

  activeRequestCount: 0
};
--------------------------------------------
      if ( Prototype.Browser.IE ) {
          var ieparam1 = this.options.onComplete;
          var ieparam2 = this.transport;
          this.transport.onload = function() { ieparam1(ieparam2) };
      }
      else {
          this.transport.onreadystatechange = this.onStateChange.bind(this);
      }

関連する記事

prototype.js を クロスドメイン対応にするパッチ
Google の prototype.js を使う

▼ クロスドメインで呼び出されるコード
<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/javascript; Charset=shift_jis" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

$ver = phpversion();
print "document.write( '$ver' );";

?>

旧更新日付 : 2011-04-16



posted by lightbox at 2013-02-18 17:09 | prototype.js | このブログの読者になる | 更新情報をチェックする

2013年02月16日


CSS3 : box-shadow の影分身の解説

box-shadow を使って、本体の DIV の影をいくつも複製して、それぞれにサイズや色や透過の処理を施す事ができます。

ここでは、本来の影としての『ぼかし処理』は使用せずに、影分身がどういうふうに行われるかが良く解るようにコードを作成しました。
最初の一つ目だけが、border で枠線を引いていますが、影は二つを重ねてボーダーと同じ表現をしています。

影は追加すると、後ろへ重なり隠れます。ですから、ボーダーを作る場合は順序は重要です。

数はいくらでも作成できるので、模様やアイコンを作成するのに有効ですし、複数の DIV や文字そのものも組み合わせて行く事ができます。
CSS でアイコンを作るサイト http://one-div.com/
<style type="text/css">
#target1 {
	/* 最初の DIV にボーダー指定 */
	margin: 0 0 0 50px;
	width: 100px;
	height: 100px;
	border-radius: 20px; /* 形状が影にも反映される */
	border: solid 5px #909090;

	-webkit-transform:skew(40deg);
	   -moz-transform:skew(40deg);
	    -ms-transform:skew(40deg);
	     -o-transform:skew(40deg);
	        transform:skew(40deg);
}

#target2 {
	/* 最初の DIV */
	margin: 0 0 0 50px;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	border: solid 5px #909090;

	box-shadow:	
			/* グレーの同じサイズの影 */
			110px 0px 0px 0px  rgba(144,144,144,1)
			;

	/* DIV に対する特殊形状効果( 当然影にも反映される ) */
	-webkit-transform:skew(40deg);
	   -moz-transform:skew(40deg);
	    -ms-transform:skew(40deg);
	     -o-transform:skew(40deg);
	        transform:skew(40deg);
}
#target3 {
	/* 最初の DIV */
	margin: 0 0 0 50px;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	border: solid 5px #909090;

	box-shadow:	
			/* 白の少し小さい影 */
			110px 0px 0px -5px rgba(255,255,255,1),
			/* その後ろにグレーでボーダーを再現 */
			110px 0px 0px 0px  rgba(144,144,144,1)
			;

	/* DIV に対する特殊形状効果( 当然影にも反映される ) */
	-webkit-transform:skew(40deg);
	   -moz-transform:skew(40deg);
	    -ms-transform:skew(40deg);
	     -o-transform:skew(40deg);
	        transform:skew(40deg);
}
#target4 {
	/* 最初の DIV */
	margin: 0 0 170px 50px; /* 170px は、影のぶんマージンを取って表示場所を確保 */
	width: 100px;
	height: 100px;
	border-radius: 20px;
	border: solid 5px #909090;

	box-shadow:	
			/* 影なので、後ろへ後ろへと重なる */
			110px 0px 0px -5px rgba(240,240,240,1),
			160px 50px 0px 0px  rgba(255,0,0,1),
			210px 100px 0px 0px  rgba(0,255,0,1),
			260px 150px 0px 0px  rgba(0,0,255,1)
			;

	/* DIV に対する特殊形状効果( 当然影にも反映される ) */
	-webkit-transform:skew(40deg);
	   -moz-transform:skew(40deg);
	    -ms-transform:skew(40deg);
	     -o-transform:skew(40deg);
	        transform:skew(40deg);
}
</style>
<div id="target1"></div>
<div id="target2"></div>
<div id="target3"></div>
<div id="target4"></div>
コードのテスト

http://jsdo.it/sworc/ecgp


タグ:CSS3
posted by lightbox at 2013-02-16 15:52 | CSS3 | このブログの読者になる | 更新情報をチェックする

Flash Player のインストーラをダウンロードする方法

Flash のダウンロード( インストール ) も紆余曲折あったみたいですが、結局今はダウンロードしてインストールするようになっています。ただ、今日ポップアップからダウンロードしたものの URL は後述の個別で行うものとは名前が違っていたのを書きとめておきます。

http://aihdownload.adobe.com/bin/live/install_flashplayer11x32axau_mssd_aih.exe( axau となっているのが特殊 )
Google Chrome で操作していますが、結局、Mozilla 分はインストールされず、個別にダウンロードしてインストールしました。
公式ダウンロード 注意するのは、ダウンロードページでデフォルトで McAfee をインストールするようにチェックしてあるので外すところです。あと、ウィルス対策ソフトがインストールされている等、ダウンロードが開始されないかもしれないのはケースバイケースで対処が必要となります。 Adobe - 別のバージョンのAdobe Flash Playerをインストール このダウンロード時に、開発者ツールのネットワークを開いておくと URL を確認できますが、ダウンロードそのものはトラブルがなければそのままこのページで行うといいです。 インストール後は以下のページで確認です Adobe - Flash Player
右上のボックス内のバージョンが、表示しているブラウザにインストールされているバージョンで、その下の表の記述が、リリースされている各ブラウザ毎の最新バージョンなので、比べてボックス内が低い場合は個別にインストールが必要になります。
このページは、Flash 上で右クリックすると表示されるメニューの一番下をクリックすると移動する場所です

過去の情報 http://fpdownload.adobe.com/get/flashplayer/current/install_flash_player_ax.exe http://fpdownload.adobe.com/get/flashplayer/current/install_flash_player.exe 【2011/12/06】変更 ※ URL 変わってました http://aihdownload.adobe.com/bin/install_flashplayer11x32ax_aih.exe http://aihdownload.adobe.com/bin/install_flashplayer11x32_aih.exe 【2012/11/22】変更 ※ URL 変わってました ▼ 上は IE 用で、下は Mozilla 系用です。(一番下は Google Chrome) http://aihdownload.adobe.com/bin/live/install_flashplayer11x32ax_mssd_aih.exe http://aihdownload.adobe.com/bin/live/install_flashplayer11x32_mssd_aih.exe http://aihdownload.adobe.com/bin/live/install_flashplayer11x32_mssa_aih.exe ▼ Mac 10.6-10.8 http://fpdownload.adobe.com/get/flashplayer/pdc/11.5.502.110/install_flash_player_osx.dmg ▼ Mac 10.4-10.5 http://fpdownload.adobe.com/get/flashplayer/pdc/10.3.183.43/install_flash_player_10_osx.dmg ▼ Linux 64bit http://linuxdownload.adobe.com/adobe-release/adobe-release-x86_64-1.0-1.noarch.rpm ▼ Linux 32bit http://linuxdownload.adobe.com/adobe-release/adobe-release-i386-1.0-1.noarch.rpm 正確な URL を取得する方法 Google Chrome で http://get.adobe.com/jp/flashplayer/otherversions/ で必要なインストーラを選択してから、F12 のデベロッパーツールでボタン部分のリンクを表示して右クリックからアドレスを取得します。 その後、新しいタブを開いて F12 で再びデベロッパーツールを開いてからネットワークタブを開いて取得したアドレスをアドレスバーに書き込んでダウンロードを実行させます。 ダイアログが開くのでそれは閉じて、ネットワークのログの一番最後に exe へのリンクが表示されているのでそれを開いて正確な URL を取得します。 ※ この画像は Mac のを取得した時のものです。
タグ:Flash
posted by lightbox at 2013-02-16 14:26 | 記録 | このブログの読者になる | 更新情報をチェックする

2013年02月15日


Chrome リモート デスクトップ。出先から自宅、出先から仕事場へのアクセスする為の環境と注意事項( 出先は拡張のみ )

『Chrome リモート デスクトップ』は、インターネットを使って PC に対してリモートアクセスするという、とんでも無いものですが、インストールした人のアカウントと、PIN の設定による専用パスワードで二重に守られます。

性能は思った以上にすぐれていました。十分に実用に耐えるので、今までこのようなアプリケーションを知らない人でもストレス無く自然に使えます。

ただ、設定というかインストール時に誤解を生みそうな手順があるので、以降の内容でそれを明確にします。解らない人は全部インストールしてしまえば良いのですが、常駐のプログラムが増えてしまいますし、知らずに出先で他人の PC にインストールしてしまったらえらい事です。

インストール

Chrome リモート デスクトップ


拡張として追加した時点では、クライアント側のソフトウェア( 操作する側 )のみのインストールとなります。


( 新しいタブを表示するとこのような表示になります )

【重要】
設定で、 PC をリモートでアクセスするようにした時にのみ サーバーアプリケーションが≪別途≫インストールされます。

▼ 最初の起動時


▼ 拡張アプリの承認


既に【他の PC】にサーバーアプリまでをインストール済であれば以下のように表示されます。



つまり、全ての PC にサーバー側のアプリをインストールする必要は無く、以降の処理は必要ありません。( 必要なのは、操作される側のみです )

▼ サーバーアプリのインストール画面


▼ サーバーアプリのインストール実行


この後、『リモート接続を有効にする』をクリックすると、PIN の入力になって、6ケタ以上の数字を入力するとインストール開始されてサービスに登録されて以降ずっとそのサービスは動き続けます。


▼ 『プログラムと機能』の Chrome リモート デスクトップ


このソフトウェア(サーバーアプリ)は、『プログラムと機能』からアンスンストールする事のできる一般的なソフトウェアです。しかし、一旦インストールすると『サービス』として常時実行されるので注意して下さい。たとえ、Google Chrome の拡張を削除しても『サービス』はそのまま実行し続けます。

必要無いと思った場合は、『プログラムと機能』からアンインストールする必要があります。

▼ サービスで実行中の Chrome リモート デスクトップ


▼ プロセスで実行中の Chrome リモート デスクトップ

( 二つのプロセスが存在します )


リモート処理

操作するだけなら、UltraVNC や Windows のリモートデスクトップと比べて遜色ありません。同じ部屋にある WindowsXP にサーバー側のアプリもインストールして ADSL で操作してみましたが、10年前の RealVNC より高速で綺麗に表示されます。当然インターネットのトラフィックに依存して固まったようになる事はありますが、画面が乱れるような事はありません。

※ サーバー側の PC が XP なのか、ドラッグ時のカーソルが黒い四角になりましたが・・・

WindowsXP をリモートで操作した画面


下部に表示されている Disconnect ボタンは、サーバー側で表示されているものです。こちら側からの特殊な操作は、上部にメニューがあり、『Ctrl + Alt + Del』『PrintScreen』があります。
( こちら側からのリモートに対するクリップボードへの転送操作は普通に動作しますが、あちらからこちらへのクリップボード転送はできないようです )

また、表示は基本は Google Chrome 内なので、Chrome を小さくすれば小さくなります。さらに、Chrome は最大化機能があるので、メニューより最大化が可能になっています。


注意事項

日本語の入力の変換キーが、スペースのみとなっています( 変換キーは動作しません )
日本語入力は、一般的な操作は特に問題無く動くようですが、Windows としての特殊なキー操作は動作しない事が多いと思います。

データ交換をしたい場合は、現状では SkyDrive のリモートドライブを使うか Google を含むオンラインストレージの共有機能を使うといいでしょう。

ごく自然に簡単に、自宅のHDにアクセスする SkyDrive

Google の正式ヘルプ

Chrome リモート デスクトップ アプリ - Chrome ヘルプ

解りづらい記述ではありますが、一通りの解説がされています。

▼ 報告されている問題( HELP より )
❶ 共有しているパソコンに、指定されたアクセス コードを使って接続できず、長時間にわたって [アクセス コードを確認しています] というメッセージが表示される。

❷ リモート共有セッション中に速度が低下するか、パフォーマンスが安定しない。

❸ 共有しているパソコンの音声が聞こえない。

❹ Mac OS X 10.5(Leopard)、Linux、または Chrome OS を搭載したパソコンでリモート アクセスを設定できない。

❺ Chrome リモート デスクトップをホストからアンインストールしたが、その後もホストのリストでオフラインとして表示される。

❻ Google アカウントのパスワードを変更したら、リモートのパソコンにアクセスできなくなった。

❼ リモートのパソコンに接続しているときに、特定のキーボード ショートカット(Ctrl+W、Ctrl+N など)を使用できない。

❽ 認証プロキシを利用している場合に、リモート接続用にパソコンを設定できない。

❾ Windows パソコンでリモート接続を有効にしようとすると、「リモート アクセス サービスを開始できませんでした」というエラー メッセージが表示される。
対応状況については、HELP をご覧下さい
posted by lightbox at 2013-02-15 22:21 | Google Chrome | このブログの読者になる | 更新情報をチェックする

2013年02月14日


Microsoft の Windows Live で、追加の @live.jp アドレスを取得する / 余程のポピュラーな単語以外はあっさり取得???

ログインしてアカウント設定

https://account.live.com/summarypage.aspx

▼ まず、通知をクリックします


今なら短いのがまだ取れるかも

これについて良く知らなかったのでおそるおそるやってみたら、3つのアドレス(エイリアス)を追加する事ができました。結構取得した人がまだまだ少ないようで( .jp なので日本国内が想定されるから )余程のポピュラーな単語以外はあっさり取得できる可能性があります。

実際取得できたうちの2つは、おそらく通常は絶対無理なもので、残りの一つは逆さワードではありますが、5文字のもので、自分が Twitter で使っている5文字アカウントが取得できました。

通知から、メールの受信設定の管理



表現がとても分かりにくいのですが、メールの受信設定の管理をクリックすると以下の画面が出て、電子メール アドレスの追加 をクリックしてやっと追加画面に切り替わります。そのリンクの下には追加した『エイリアス』の一覧が表示されています。



エイリアスとは
別名の事で、いくつ追加してもメールとして管理できる場所は一つで、例えばオンラインで言うと、全て  に到着します。自分の場合、主となるメールアドレスは @hotmail.co.jp ですが、もっと解りやすく短い3つのメールアドレスで連絡先を紹介できるという事です。
実際は、ラジオボタンをチェックするまでコンボボックスは表示されていません。hotmail.co.jp と live.jp が選択できますが、最初に表示されているのが hotmail.co.jp なので live.jp に変更します。 そして、左側の入力フィールドに好きな文字列を入力して、追加ボタン をクリックすると既にあるものか無いものかがチェックされて、無かったら登録されます。 ( 既にある場合 ) 無事追加されると Outlook にメッセージ ちゃんとメールが来るかどうかは、▼ で試してみましたが、全て OK です。 ( URL を 一つ 任意のメールアドレスに送れるツールです / さくらインターネットのサーバから送信 ) このツールは、主に PC から スマホに URL を送りたい時に使用しています。 実は、live.com も hotmail.com も取れる 概要から『個人情報の編集』で、ホームの国を米国にすると、live.com と hotmail.com が選択できるようになります。 試しに Twitter のアカウント文字列を live.com で取ってみたら取れたので、これで別名は4つになりました。しかし、さすがに米国では短い文字列は取るのは無理ですが、逆に日本語をローマ字にしたものはガンガン取れる・・・かも(解らないです)です。
但し、国を変更すると、既に登録されていた住所等の情報がリセットされてなくなるので注意です。
タグ:microsoft
posted by lightbox at 2013-02-14 21:16 | WEBサービス | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

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

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

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

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


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

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

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

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

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



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり