SQLの窓

2015年12月24日


BUTTON 要素と CSS だけでアイコンボタンを表現する 『BUTTONS』

実際は、A 要素もボタンになるのですが、ここではアイコンボタンのみ考えます。現在 CDNJS でホスティングされています。

アイコンに関しては、Font Awesome よりダウンロードできますが、これも //netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css を使うことができます ( ライセンスページ )

アイコンの種類と名前に関しては、こちらを参照して下さい

画像として簡単に手にいれたい場合は、こちら(フリーフォントで簡単ロゴ作成)でダウンロードできます( フォントのライセンスは SIL Open Font License 1.1 です )

  
  


サイズ : button-tiny



サイズ : button-small / 色 : button-primary



サイズ : 指定なし / 色 : button-action



サイズ : button-large / 色 : button-highlight



サイズ : button-jumbo / 色 : button-caution



サイズ : button-giant / 色 : button-royal



表現方法 : button-3d



表現方法 : button-raised



表現方法 : button-longshadow-right



表現方法 : button-glow



表現方法 : button-3d と button-border



表現方法 : button-glow と button-border


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Buttons/2.0.0/css/buttons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css">

<button class="button button-square button-tiny"><span class="fa fa-glass"></span></button>
<button class="button button-box button-tiny"><i class="fa fa-music"></i></button>
<button class="button button-circle button-tiny"><i class="fa fa-search"></i></button>

<button class="button button-primary button-square button-small"><i class="fa fa-envelope-o"></i></button>
<button class="button button-primary button-box button-small"><i class="fa fa-heart"></i></button>
<button class="button button-primary button-circle button-small"><i class="fa fa-star"></i></button>

<button class="button button-action button-square"><i class="fa fa-star-o"></i></button>
<button class="button button-action button-box"><i class="fa fa-user"></i></button>
<button class="button button-action button-circle"><i class="fa fa-film"></i></button>

<button class="button button-highlight button-square button-large"><i class="fa fa-th-large"></i></button>
<button class="button button-highlight button-box button-large"><i class="fa fa-th"></i></button>
<button class="button button-highlight button-circle button-large"><i class="fa fa-th-list"></i></button>

<button class="button button-caution button-square button-jumbo"><i class="fa fa-check"></i></button>
<button class="button button-caution button-box button-jumbo"><i class="fa fa-remove"></i></button>
<button class="button button-caution button-circle button-jumbo"><i class="fa fa-search-plus"></i></button>

<button class="button button-royal button-square button-giant"><i class="fa fa-search-minus"></i></button>
<button class="button button-royal button-box button-giant"><i class="fa fa-power-off"></i></button>
<button class="button button-royal button-circle button-giant"><i class="fa fa-signal"></i></button>

<button class="button button-3d button-box button-giant"><i class="fa fa-gear"></i></button>
<button class="button button-3d button-primary button-circle button-giant"><i class="fa fa-trash-o"></i></button>

<button class="button button-raised button-action button-box button-giant"><i class="fa fa-home"></i></button>
<button class="button button-raised button-highlight button-circle button-giant"><i class="fa fa-file-o"></i></button>

<button class="button button-longshadow-right button-caution button-box button-giant"><i class="fa fa-clock-o"></i></button>
<button class="button button-longshadow-right button-royal button-circle button-giant"><i class="fa fa-road"></i></button>

<button class="button button-glow button-box button-giant"><i class="fa fa-download"></i></button>
<button class="button button-glow button-primary button-circle button-giant"><i class="fa fa-arrow-circle-o-down"></i></button>

<button class="button button-border button-3d button-box button-giant"><i class="fa fa-gear"></i></button>
<button class="button button-border button-3d button-primary button-circle button-giant"><i class="fa fa-trash-o"></i></button>

<button class="button button-border button-glow button-box button-giant"><i class="fa fa-arrow-circle-o-up"></i></button>
<button class="button button-border button-glow button-primary button-circle button-giant"><i class="fa fa-inbox"></i></button>


関連する記事

A 要素と CSS だけでボタンを表現する 『BUTTONS』



posted by lightbox at 2015-12-24 15:21 | HTML / CSS | このブログの読者になる | 更新情報をチェックする

2015年12月14日


FileSaver.js と canvas-toBlob.js を使って、canvas で表示されているイメージを保存する

デモページ


FileSaver.js を使って Canvas の保存を行うには、canvas-toBlob.js を読み込んで toBlob メソッドを canvas に対して実行する必要があります。( デモページでは、iframe 側に canvas があるので、iframe 側で canvas-toBlob.js を読み込みます )

デモページでは、canvas は iframe 内にあるので、jQuery を使って $( $("#birds").get(0).contentWindow.document.body ).find("canvas").get(0).toBlob という参照になっています。
※ birds は iframe の id です

保存コード
	$("#getpng").on( "click", function(){
		$( $("#birds").get(0).contentWindow.document.body ).find("canvas").get(0).toBlob(function(blob) {
			saveAs(
				blob
				, "three_fly.png"
			);
		}, "image/png");
	} );


関連する記事

ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存



タグ:javascript jquery
posted by lightbox at 2015-12-14 09:00 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年12月12日


Three.js r73 での Canvas で平面を飛翔させる為の詳細デモ

デモページ

アニメーション開始は右上のボタン
※ リロードするとアニメーション前の初期状態に戻ります

▼ 飛翔画像


以前、v57 頃の時に作成した平面の『蝶』の画像を飛翔させるデモです。バージョンがかなり変わって前のままでは動作しなくなったものを少し修正してさらに使いやすくかつ解りやすくしました。『飛翔』そのもののコードは、Three.js 内で今も使われているもので昔から全く変わっていません。この部分は、boid.js として外部ファイルとして取り出してあります。

ただ、Canvas のレンダリング部分(CanvasRenderer.js)は v73 では外部ファイルとなって Three.js 本体からは外されていました。また、さらに実行の為に Projector.js というファイルも必要になっていました。

HTML 部分
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="http://winofsql.jp/WinOfSql.ico">

<script src="three.min73.js"></script>
<script src="CanvasRenderer.js"></script>
<script src="Projector.js"></script>
<script src="boid.js"></script>

</head>
<body style="margin:0">
<div style="position:absolute;width:98%">
<input
	type="button"
	value="アニメーション開始"
	style="position:relative;float:right;"
	onclick="window.animate();this.style.display='none'"
	title="ページをリロード(再表示)するとアニメーションは止まります">
</div>
<div id="container"></div>

<script src="birds73.js"></script>

</body>
</html>


Three.js 実行環境部分(birds73.js)
// *************************************************
// Three.js の環境設定
// *************************************************
var SCREEN_WIDTH		= window.innerWidth * 0.98;
var SCREEN_HEIGHT		= window.innerHeight * 0.98;
var SCREEN_WIDTH_HALF	= SCREEN_WIDTH  / 2;
var SCREEN_HEIGHT_HALF	= SCREEN_HEIGHT / 2;

var camera, scene, renderer,
birds, bird;

var boid, boids;

var stats;

// お決まりの初期処理とアニメーション開始
init();
// animate 内の render が実行されても、init の処理が完了していないと描画されません
// なので、アニメーション無しの1回限りの描画は、setTimeout か、画像の最終イベント内で実行します
//animate();

function init() {

	camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
	camera.position.z = 450;

	scene = new THREE.Scene();

	birds = [];
	boids = [];

	// 背景画像・人物画像用ラッパー
	var parent = new THREE.Object3D();

	// *************************************************
	// 背景画像の読み込み
	// *************************************************
	var image = new Image()
	image.onload = function () {

		var texture = new THREE.Texture( this );
		texture.needsUpdate = true;
		var material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});

		// 平面
		var mesh = new THREE.Mesh(new THREE.PlaneGeometry(1200, 1200, 1, 1), material);

		// 画面奥
		mesh.position.z = -400;

		// 大きさ調整
		mesh.scale.x = 1.5;
		mesh.scale.y = 1.5;

		// 回転
		mesh.rotation.x = 0;
		mesh.rotation.y = 0;

		// ラッパーに平面追加
		parent.add( mesh );

		// *************************************************
		// 人物画像の読み込み
		// *************************************************
		var image = new Image()
		image.onload = function () {

			var texture = new THREE.Texture( this );
			texture.needsUpdate = true;
			var material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});

			// 平面
			var mesh = new THREE.Mesh(new THREE.PlaneGeometry(778, 623, 1, 1), material);

			// 画面前
			mesh.position.z = 300;

			// 表示位置調整
			mesh.position.x = 80;
			mesh.position.y = -42;

			// 大きさ調整
			mesh.scale.x = 0.3;
			mesh.scale.y = 0.3;

			// 回転
			mesh.rotation.x = 0;
			mesh.rotation.y = 0;

			// ラッパーに平面追加
			parent.add( mesh );

			// シーンにラッパー(画像2枚)追加
			scene.add(parent);

			// *************************************************
			// 飛翔画像の読み込み
			// *************************************************
			var image = new Image()
			image.onload = function () {

				texture = new THREE.Texture( this );
				texture.needsUpdate = true;
				material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});
				material.side = 2

				// 200の飛翔物体
				for ( var i = 0; i < 200; i ++ ) {

					boid = boids[ i ] = new Boid();
					boid.position.x = Math.random() * 400 - 200;
					boid.position.y = Math.random() * 400 - 200;
					boid.position.z = Math.random() * 400 - 200;
					boid.velocity.x = Math.random() * 2 - 1;
					boid.velocity.y = Math.random() * 2 - 1;
					boid.velocity.z = Math.random() * 2 - 1;
					boid.setAvoidWalls( true );
					boid.setWorldSize( 500, 500, 400 );

					// 飛翔画像を貼り付けたマテリアルを平面に適用
					birds[ i ] = new THREE.Mesh( new THREE.PlaneGeometry(30, 30, 2, 1), material );

					// オリジナルの特殊処理
					bird = birds[ i ]
					bird.phase = Math.floor( Math.random() * 62.83 );

					// 飛翔物体単位でシーンに追加
					scene.add( bird );

				}

				// 初回表示
				render();
			};
			// 飛翔画像
			image.src = "002.png";
			
		};
		// 人物画像
		image.src = "girl.png";

	}
	// 背景画像
	image.src = "moon.jpg";


	renderer = new THREE.CanvasRenderer();
	renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

	document.addEventListener( 'mousemove', onDocumentMouseMove, false );
	document.body.appendChild( renderer.domElement );

	window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth * 0.98, window.innerHeight * 0.98 );

	render();

}

// マウスによる、飛翔物体の反応処理
function onDocumentMouseMove( event ) {

	var vector = new THREE.Vector3( event.clientX - SCREEN_WIDTH_HALF, - event.clientY + SCREEN_HEIGHT_HALF, 0 );

	for ( var i = 0, il = boids.length; i < il; i++ ) {

		boid = boids[ i ];

		vector.z = boid.position.z;

		boid.repulse( vector );

	}

}

// Three.js のお決まりの処理
function animate() {

	requestAnimationFrame( animate );

	render();

}

function render() {

	// 飛翔物体の処理
	for ( var i = 0, il = birds.length; i < il; i++ ) {

		boid = boids[ i ];
		boid.run( boids );

		bird = birds[ i ];
		// 旧版では無かった処理
		bird.position.copy( boids[ i ].position );

		// 飛翔物体の飛翔用の傾け処理
		bird.rotation.y = Math.atan2( - boid.velocity.z, boid.velocity.x );
		bird.rotation.z = Math.asin( boid.velocity.y / boid.velocity.length() );

		// 画像を x 軸で90度回転して、横に寝かせる
		bird.rotation.x = (180 * Math.PI / 180)/2;

		// オリジナルの特殊処理
		bird.phase = ( bird.phase + ( Math.max( 0, bird.rotation.z ) + 0.1 )  ) % 62.83;

		// 平面画像のはばたき処理
		bird.geometry.vertices[ 0 ].z = Math.sin( bird.phase ) * 15;
		bird.geometry.vertices[ 2 ].z = Math.sin( bird.phase ) * 15;

		// 0  1  2
		// 3  4  5
		// セグメントが 2x1 なので、0番と 2番を動かすと、羽の先が動きます。
		// 羽全体を動かすのであれば、3番と5番も同時に値を変更してもいいです

	}


	renderer.render( scene, camera );

}



birds73.js も殆どは Three.js のサンプルと変わりませんが、Three.js では鳥に見立てた頂点を持つオブジェクトが使用されています。こちらでは、平面を 2 セグメントに分けて、頂点を6つ持ったオブジェクトの 0 番と 2番を 動かせて『飛翔』させています。
※ 詳細は、ソースコード内のコメントに書かれてあります

画像の配置

画像は全て canvas 内に配置しているので、Google Chrome や Firefox ならばそのまま保存して、その時の画像を取得する事ができます。月画像は奥に、人物画像は手前にありますが、飛翔物体がかなり手前に来た場合は人物を突き抜けるのはご愛嬌です。

画像のロードは 3種類あるので 3段階で行っています。背景 => 前景 => 飛翔画像と、各画像がロードされてから次の画像の処理へと移っています

Window サイズ変更時

全て Canvas 内なので Window サイズにあわせて表示は縮小されますが、アニメーションはそのまま実行されます。もともとは、IFRAME 内で表示する事を想定しており、お好きなサイズでページに埋め込む事ができます。



posted by lightbox at 2015-12-12 21:43 | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする

2015年12月07日


広告から感染するウィルスに対する具体的な対処法について

そもそも感染する原因は、以下の3つのソフトウェアの脆弱性が原因です。

Flash
Adobe リーダ
Java

これらのソフトウェアは、ブラウザが使用するので、ブラウザで広告を表示している時に感染します。脆弱性は日々発生するので、常に最新にする必要がありますが、どこをどうすれば最新になるかという事を認識して、日々意識して対応する必要があります。

自分は、Google Chrome を使う事を前提としているので、以下のような対処方法を取っています。

◎ Flash は Google Chrome 内臓のものを使い、Google Chrome を常に最新にする。

これは、Adobe リーダも同様で、Google Chrome は内臓で PDF ビュアーを持っているので、( chrome://plugins/ で確認できます ) Flash と Adobe Reader は Windows にインストールしていません
( Flash 使わないのであれば、この Flash も無効にするといいです )

◎ Java は、コントロールパネルから、WEB で使用しない設定にする



Java のプラグインを使ったアプリケーションは、現在では殆ど存在しないのですが、PC を購入時には古い Java がインストールされて、ブラウザで使用可能になっているおそれがあります。自分が確認した PC では、Java 7 の古いバージョンがインストールされており、『ブラウザから使用しない設定』そのものが無く、Java そのものをアンインストールしました。( 必要ならば最新をインストールしなおして、自動更新かつ WEB で使用しない設定 にします )

◎ Windows Update の新しいものは常に自分で更新をこころがける

Windows アップデートは、コントロールパネルより開いて、『更新プログラムの確認』を自分で実行します(その後、重要な更新があれば更新を実行)。これをしないと、タイムラグで更新が少々遅れる可能性もあります

◎ IE の扱いも注意する

たとえ、Google Chrome を使用していても、Windows である以上 IE を削除はできないので、IE 用の Flash がインストールされている可能性があります。Google Chrome を使用するのであれば、IE 用の Flash は削除します。ただ、Windows8 の場合だと、最初から Flash が組み込まれていて削除できないようなので、IE の アドオンの管理で無効にします。
( Windows 側から自動的に IE が開く場合もあるので管理が必要です )



なので、Windows10 は経験が無いので不明です

※ Firefox を使用する場合は、Google Chrome に準じるようなソフトウェアに対する理解が必要です


あと、効果があるかどうかは解りませんが、Windows Defender がコントロールパネルにあるのならば、『リアルタイム保護』が有効かどうかチェックします

Adobe の更新とか対応は昔からおもいっきり胡散臭いです。Adobe からの更新に期待するのではなく、ブラウザの更新を主体に考える必要があります

▼ Gigazine
2015年07月15日 10時55分00秒
凶悪な脆弱性が発見されたFlash PlayerをFirefoxが標準でブロック開始


ちなみに

自分は、過去 Flash の更新を怠って普通に普通のサイトを閲覧してウィルスに感染した事が一度だけあります。つまり、『脆弱性』をなめているととんでも無い事になります。

その時は、しょぼいウィルスだったので手作業で駆除して、現在その PC は他の OS から隔離して運用しています。( 基本的に感染してもかまわないという運用です )

あと、定期的に トレンドマイクロ オンラインスキャン を実行してウイルスの有無を確認していますが、幸運にも今まで感染した事はありません。(もし、感染したらそのまま購入して駆除するつもりです)

あともう一つウィルスの大きな感染経路

メールの添付ファイルには注意です。そもそも、こういったメールが送られて来るのは日常茶飯事なので、メール自体も WEB メールを使って上記のいままでの運用でカバーしています。

最後に

UAC は一番上です。


そして、とにかく一般的に、PC と普段接続していない媒体にバックアップしておけば被害を最小限にはできます。オンラインストレージの場合は自動ではなく意図的に定期的に自分でバックアップを取ります。リムーバル HDD があるのならば大きなファイルを対象に利用して、普段は接続しない事です。

※ DVD等の媒体は壊れる可能性があるし時間がかかるので HDD が良いですね



posted by lightbox at 2015-12-07 13:35 | Windows | このブログの読者になる | 更新情報をチェックする

2015年12月05日


クリックしたコンテンツ以外を暗転する jQuery TOOLS の expose プラグイン

デモページ


jQuery TOOLS は、他にも沢山のプラグインが利用できるプラグインライブラリです。cdnjs でホスティングされているのでダウンロードも必要ありません。
※ 但し、jQuery は、1.7.1 が埋め込まれているので、他のバージョンの jQuery を使用するには cdnjs を使わずに 1.2.6 のライブラリのみを使用して特別な記述をする必要があります( 記事最後にあります )

配布サイト側で紹介されている 1.2.6 は古いのでバグがあり、そのままでは使用できないので注意して下さい、また、ドキュメントページからのダウンロードは壊れていてできないので GitHub からする必要があります

デモページでは、jQuery UI を使用していますが、jQuery TOOLS より後に jQuery UI を読み込まないと、jQuery UI が動作しないので注意して下さい。

ドキュメント
ダウンロードページ(GitHub)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tools/1.2.7/jquery.tools.min.js"></script>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/redmond/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script>
// jQuery 初期処理
$(function() {

	// タブ
	$( "#mytabs" ).tabs({
		active: 0,
		show: { effect: "slide" },
		hide: { effect: "slide",direction: "right" }
	})
	.css({ margin: "30px 300px 0 30px" });

	// アコーディオン
	var target_acc = 0;
	if ( typeof(localStorage["old_active_acc"]) != 'undefined' ) {
		target_acc = parseInt(localStorage["old_active_acc"]);
	}
	$( "#acc" ).accordion({
		heightStyle: "content",
		active: target_acc,
		activate: function( event, ui ) {
			localStorage["old_active_acc"] = $( this ).accordion( "option", "active" );
		}
	});

	$(".expose").click(function() {
		$(this).expose({
			color: "#202020",
			opacity: 0.5,
			closeOnEsc: true
		});
	});

});
</script>




1.2.6 を使用した特別な記述
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
$.extend({browser:{version: 11,msie: (window.navigator.userAgent.toLowerCase()).indexOf("msie")>-1}});
</script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/le-frog/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>


そもそも、1.2.6 の問題は、jQuery の新しいバージョンで廃止された、jQuery.browser を使用しているからなので、新しいバージョンでエラーにならないように、jQuery の名前空間に登録してから、1.2.6 を読み込みます。

使用されているのは、IE かどうかの判断と、IE が 6 より大きいかの判断なので、jQuery.browser.version には 11 をセットしています。

使用する jQuery に、jQuery.browser が存在するのであれば、この必要はありませんが、オリジナルは4年前で更新が止まっているので、jQuery TOOLS 全体を運用したいのであれば、jQuery 対応は自分でしたほうが賢明だと思います。

GitHub からダウンロードする場合は、個別にソースコードを編集して pack して使用するといいと思います。

▼ toolbox.expose.js
	/* one of the greatest headaches in the tool. finally made it */
	function viewport() {
				
		// the horror case
		if ((window.navigator.userAgent.toLowerCase()).indexOf("msie")>-1) {
			
			// if there are no scrollbars then use window.height
			var d = $(document).height(), w = $(window).height();
			
			return [
				window.innerWidth || 							// ie7+
				document.documentElement.clientWidth || 	// ie6  
				document.body.clientWidth, 					// ie6 quirks mode
				d - w < 20 ? w : d
			];
		} 
		
		// other well behaving browsers
		return [$(document).width(), $(document).height()]; 
	} 

ダウンロードして書き換えて単独で使用すると、jQuery UI の後に読み込んでも動作しました


posted by lightbox at 2015-12-05 12:53 | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする
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 終わり