SQLの窓

2018年01月23日


(C#) / VS2010 または VS2012 : TKMP.DLL(3.1.2 または 3.1.8)を使った、『さくらインターネット』用メール送信テンプレート



OneDrive よりダウンロード

テンプレートには、3.1.2 が入っていますが、Windwos10(64) + Visual Studio 2012 C# でテスト(2018-01-23)しました。


さくらインターネット

現在スタンダードを運用していますが、月額 515円 容量 100GB です

メールメールアドレスを無制限で作成できます(当然容量内ですが)。
メールボックスの容量を1MBから2048MBまで任意に指定できます。
※ サーバのディスク容量がひっ迫していると、しきい値内であってもメールは届きません。
ウェブメール ※ 一応あります( そんなに力を入れてるとは思えないです ) ❸ メーリングリストは10個 コスト 月額515円 ( 年間一括支払いの場合、5,142円 ) レンタルサーバーとしては、さくらのブログの内容が Seesaa ブログの劣化版である事をのぞけば、結構いたれりつくせりだと思っています。 基本仕様一覧 Ruby は 1.8.x なんで、ちょっと古いと思っています。 データベース使用量は、こんなふうに昔から記述されています。
基本的に制限は設けておりませんが、共用データベースサーバでは使用量の目安がございます。
目安以上の容量を使用された場合、他のお客様への影響がでたり、障害が発生した場合、データの復旧が正常に行えない 可能性がございます。
SSL は 共有SSL が使えます。気軽にログイン部分等、暗号化可能です。 CRONの設定数は 5 です
MailClass mc = new MailClass()
{
    SmtpServer = "初期ドメイン",
    Port = 587,
    User = "ユーザ名@ドメイン",
    Pass = "パスワード",
    Protocol = AuthenticationProtocols.TLS
};

var result = mc.SendMail(
    "宛て先",
    "ユーザ名@ドメイン",
    this.subject.Text,
    this.body.Text,
    null,   // 必要な場合、宛先を日本語で
    null,   // 必要な場合、差出人を日本語で
    (MailClass.MailClassErrorArg _e) =>
    {
        this.error.Text = _e.Message;
    }
);

MailClass.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using TKMP.Writer;
using TKMP.Net;

namespace TKMP_SendMail_Sakura1 {
	class MailClass {
		private MailWriter mw = null;

		public string SmtpServer { get; set; }
		public int Port { get; set; }
		public string User { get; set; }
		public string Pass { get; set; }
		public AuthenticationProtocols Protocol { get; set; }

		private string err_message = "";

		public class MailClassErrorArg {
			public string Message { get; set; }
		}

		public delegate void MailClassError(MailClassErrorArg e);

		public bool SendMail(string To, string From, string Subject, string Body, string To_J, string From_J, MailClassError mce) {
			bool bResult = true;

			mw = new MailWriter();

			try {
				mw.ToAddressList.Add(To);
			}
			catch (Exception ex) {
				bResult = false;
			}
			if (!bResult) {
				if (mce != null) {
					MailClassErrorArg e = new MailClassErrorArg() { Message = "宛先が正しくありません" };
					mce(e);
				}
				return bResult;
			}

			// From が未指定や正しくない文字列の場合
			try {
				mw.FromAddress = From;
			}
			catch (Exception ex) {
				// ユーザが正しければ、以下のように設定しても『ユーザ名 <メールアドレス>』に変換される
				mw.FromAddress = "______@hotmail.co.jp";
			}

			TextPart tp = new TextPart(Body);
			mw.MainPart = tp;

			if (To_J != null) {
				mw.Headers.Add("To", To_J + " <" + To + ">");
			}
			else {
				mw.Headers.Add("To", To);
			}
			if (From_J != null) {
				mw.Headers.Add("From", From_J + " <" + From + ">");
			}
			else {
				// Hotmail では、自動的に 『ユーザ名 <メールアドレス>』に変換される
				mw.Headers.Add("From", From);
			}

			mw.Headers.Add("Subject", Subject);
			mw.Headers.Add("X-Mailer", "TKMP Version 3.1.2");

			var logon = new TKMP.Net.AuthLogin(User, Pass);
			SmtpClient sc = new SmtpClient(SmtpServer, Port, logon);
			sc.AuthenticationProtocol = Protocol;

			try {
				if (!sc.Connect()) {
					err_message = "接続に失敗しました";
					bResult = false;
				}
				else {
					sc.SendMail(mw);
					sc.Close();
				}
			}
			catch (Exception ex) {
				err_message = ex.Message;
				bResult = false;
			}
			if (!bResult) {
				if (mce != null) {
					MailClassErrorArg e = new MailClassErrorArg() { Message = err_message };
					// このメソッドの引数である、ErrorHandler デリゲートを呼び出す
					mce(e);
				}
			}

			return bResult;
		}

		public bool SendMail(string To, string From, string Subject, string Body, string To_J, string From_J) {
			return SendMail(To, From, Subject, Body, To_J, From_J, null);
		}

		public bool SendMail(string To, string From, string Subject, string Body) {
			return SendMail(To, From, Subject, Body, null, null, null);
		}

	}

}

関連する記事

VS2010(C#) : TKMP.DLLを使った、メール送信テンプレート




posted by lightbox at 2018-01-23 21:23 | VS(C#) | このブログの読者になる | 更新情報をチェックする

2017年11月26日


C# でDXライブラリを使って簡単なシューティングをクラス化して標準化 / メインループとプレイヤー (4)



C# でDXライブラリを使って簡単なシューティングをクラス化して標準化 / メインループとプレイヤー (3) で、Game、Player という二つのクラスで、左右の矢印キーでプレイヤーの画像が左右に動く処理を標準化しました。

この Player クラスの機能をそのまま使って、背景を表示する Background クラスを追加します。背景画像はこちらからダウンロードできますが、サイズは 1007x1007 という中途半端なサイズになっています。

この画像はパターン画像で、左端が右端に続き、上端が下端に続く画像で、適当に作ったのでこのようなサイズになっています。ただ、1007 の幅なので、ゲーム画面の幅はこれ以内でないとうまく動作しないので注意して下さい。

Background クラス

背景は、プレイヤーの動きと逆に動くようになっています。また、背景は常に画面いっぱいに表示されるので、DrawRectGraph で描画しています。左端と右端を同時に更新する必要があるのですが、パターン画像なので、二つのエリアに分けて描画します。(矢印キーをずっと押し続けると、プレイヤーは画面の端で止まりますが、背景はずっと横スクロールし続けます)

現在横の動きだけなので二つの DrawRectGraph を使用していますが、縦の動きを入れる場合はさらに二つの DrawRectGraph が必要になる予定です。
		// *******************
		// コンストラクタ
		// *******************
		public Background(Game game, string name, int offset) {

			this.game = game;

			// 画像の読み込み
			image = DX.LoadGraph(name);

			// 画像のサイズを取得
			int w, h;
			DX.GetGraphSize(image, out w, out h);
			graph_w = w;
			graph_h = h;

			// 背景の初期位置
			x = 0;
			y = 0;

			move_offset = offset;

		}

		public int image { get; set; }
		public int graph_w { get; set; }
		public int graph_h { get; set; }
		public int x { get; set; }
		public int y { get; set; }
		public int move_offset { get; set; }
		public Game game { get; set; }

		// *******************
		// 描画
		// *******************
		internal void draw() {

			DX.DrawRectGraph(0, 0, this.graph_w - this.x, this.y, this.x, this.graph_h - this.y, this.image, 0, 0);
			DX.DrawRectGraph(this.x, 0, 0, this.y, this.graph_w, this.graph_h - this.y, this.image, 0, 0);

		}

		// *******************
		// 左移動
		// *******************
		internal void left() {

			this.x -= this.move_offset;

			// 背景は一周する
			if (this.x < 0) {
				// 左へ消えた部分は、右から出て来る
				this.x = this.graph_w;
			}

		}

		// *******************
		// 右移動
		// *******************
		internal void right() {

			this.x += 5;

			// 背景は一周する
			if (this.x >= this.graph_w) {
				// 右へ消えた部分は、左から出て来る
				this.x = 0;
			}

	
		}
	}


Background クラスを追加したメイン処理( Program クラス内 ) は以下のようになります

Program 内の処理

処理としては逆向きのメソッドをそれぞれ配置しただけのものになっています
			// メインゲームインスタンス作成
			Game game = new Game(800, 600);

			// 初期化
			game.init();

			// 背景インスタンス作成
			Background background = new Background(game, "field.png", 5);

			// プレイヤーインスタンス作成
			Player player = new Player(game, "player.png", 5);

			game.start(
				// *******************
				// 主処理
				// *******************
				(int counter) => {

					// 右矢印キー
					if (DX.CheckHitKey(DX.KEY_INPUT_RIGHT) == 1) {

						player.right();
						// player と 逆向き
						background.left();

					}

					// 左矢印キー
					if (DX.CheckHitKey(DX.KEY_INPUT_LEFT) == 1) {

						player.left();
						// player と 逆向き
						background.right();

					}

				},
				// *******************
				// 描画処理
				// *******************
				() => {

					background.draw();
					player.draw();

				}

			);



posted by lightbox at 2017-11-26 20:17 | VS(C#) | このブログの読者になる | 更新情報をチェックする

C# でDXライブラリを使って簡単なシューティングをクラス化して標準化 / メインループとプレイヤー (3)



C# でDXライブラリを使って簡単なシューティングをクラス化して標準化 / メインループとプレイヤー (2) では、Player クラスを作成し、Player に依存する情報を Player クラス内にプロパティとして保存しました。

以下では、そのプロパティを使って、Player クラス内でデータを処理する為の right、left、draw メソッドを作成しています。

Player クラス
	class Player {

		// *******************
		// コンストラクタ
		// *******************
		public Player(Game game, string name, int offset) {

			this.game = game;

			// 画像の読み込み
			image = DX.LoadGraph(name);

			// 画像のサイズを取得
			int w, h;
			DX.GetGraphSize(image, out w, out h);
			graph_w = w;
			graph_h = h;

			// プレーヤーの初期位置
			x = game.screen_w / 2 - h / 2;
			y = game.screen_h - 70;

			move_offset = offset;

		}

		public int image { get; set; }
		public int graph_w { get; set; }
		public int graph_h { get; set; }
		public int x { get; set; }
		public int y { get; set; }
		public int move_offset { get; set; }
		public Game game { get; set; }

		// *******************
		// 描画
		// *******************
		internal void draw() {

			DX.DrawGraph(this.x, this.y, this.image, DX.TRUE);

		}

		// *******************
		// 右移動
		// *******************
		internal void right() {

			this.x += this.move_offset;
			if (this.x + this.graph_w > game.screen_w) {
				this.x = game.screen_w - this.graph_w;
			}

		}

		// *******************
		// 左移動
		// *******************
		internal void left() {

			this.x -= this.move_offset;
			if (this.x < 0) {
				this.x = 0;
			}

		}
	}


そして、以下ではこの Player クラスのメソッドを使用して、Program クラス内の記述を簡略化しています。
			// メインゲームインスタンス作成
			Game game = new Game(800, 600);

			// 初期化
			game.init();

			// プレイヤーインスタンス作成
			Player player = new Player(game, "player.png", 5);

			game.start(
				// *******************
				// 主処理
				// *******************
				(int counter) => {

					// 右矢印キー
					if (DX.CheckHitKey(DX.KEY_INPUT_RIGHT) == 1) {

						player.right();

					}

					// 左矢印キー
					if (DX.CheckHitKey(DX.KEY_INPUT_LEFT) == 1) {

						player.left();

					}

				},
				// *******************
				// 描画処理
				// *******************
				() => {

					player.draw();

				}

			);

関連する記事

C# でDXライブラリを使って簡単なシューティングをクラス化して標準化 / メインループとプレイヤー (4)




posted by lightbox at 2017-11-26 17:51 | VS(C#) | このブログの読者になる | 更新情報をチェックする

C# でDXライブラリを使って簡単なシューティングをクラス化して標準化 / メインループとプレイヤー (2)



C# でDXライブラリを使って簡単なシューティングをクラス化して標準化 / メインループとプレイヤー (1) では、メインループと初期化部分を Game クラスとしてクラス化しました。(Game クラスの start メソッド内で、キーアクションの処理部分と描画部分を分けて、start の引数の無名ブロックを呼び出すようにしました。)

今回は、それに引き続いてプレイヤーを左右矢印キーで左右に動くようにしている部分をクラス化し、Player クラスを作成します。

プレイヤーの初期処理は、使用する画像の決定と一回のキー押下でどのくらい移動するかの距離を設定する事にしました。また、初期位置を画面下部中央に設置する為に、スクリーンサイズが必要になるので、Game クラスのインスタンスも同時に引き渡しています。

Player クラス
ここでは情報をプロパティとして定義しています。

1) image : 画像ハンドル
2) graph_w : 画像幅
3) graph_h : 画像高さ
4) x : 描画座標
5) y : 描画座標
6) move_offset : キー押下による移動距離
7) game : Game クラスのインスタンス
	class Player {

		// *******************
		// コンストラクタ
		// *******************
		public Player(Game game, string name, int offset) {

			this.game = game;

			// 画像の読み込み
			image = DX.LoadGraph(name);

			// 画像のサイズを取得
			int w, h;
			DX.GetGraphSize(image, out w, out h);
			graph_w = w;
			graph_h = h;

			// プレーヤーの初期位置
			x = game.screen_w / 2 - h / 2;
			y = game.screen_h - 70;

			// キー押下による移動距離
			move_offset = offset;

		}

		public int image { get; set; }
		public int graph_w { get; set; }
		public int graph_h { get; set; }
		public int x { get; set; }
		public int y { get; set; }
		public int move_offset { get; set; }
		public Game game { get; set; }
	}


次に、この Player クラスを使用して、Program クラスの記述を変更すると以下のようになります。

ただ、この時点ではまだ Player の処理が Program クラス での記述に依存してしまっているので、キーの処理と描画の処理を Player クラスのメソッドとして変更する必要があります
			// メインゲームインスタンス作成
			Game game = new Game(800, 600);

			// 初期化
			game.init();

			// プレイヤーインスタンス作成
			Player player = new Player(game, "player.png", 5);

			game.start(
				// *******************
				// 主処理
				// *******************
				(int counter) => {

					// 右矢印キー
					if (DX.CheckHitKey(DX.KEY_INPUT_RIGHT) == 1) {
						player.x += player.move_offset;
						if (player.x + player.graph_w > game.screen_w) {
							player.x = game.screen_w - player.graph_w;
						}
					}

					// 左矢印キー
					if (DX.CheckHitKey(DX.KEY_INPUT_LEFT) == 1) {
						player.x -= player.move_offset;
						if (player.x < 0) {
							player.x = 0;
						}
					}

				},
				// *******************
				// 描画処理
				// *******************
				() => {

					DX.DrawGraph(player.x, player.y, player.image, DX.TRUE);

				}

			);

関連する記事

C# でDXライブラリを使って簡単なシューティングをクラス化して標準化 / メインループとプレイヤー (3)



posted by lightbox at 2017-11-26 17:06 | VS(C#) | このブログの読者になる | 更新情報をチェックする

2017年11月25日


C# でDXライブラリを使って簡単なシューティングをクラス化して標準化 / メインループとプレイヤー (1)



まずプロジェクトですが、DXライブラリのダウンロードから、C# 用をダウンロードしてそのまま動作する場合はそれでもいいですが、Visual Studio の 2010 では動かないので普通にプロジェクトを Windows アプリケーションで作成します。

次に、bin の下の実行場所に DxLib.dll と DxLib_x64.dll と DxLibDotNet.dll をコピーして、DxLibDotNet.dll を参照すれば使えるようになります。



以下のソースコードに関しては、player.png が必要ですが、シューティングゲーム用ドット絵フリー素材よりダウンロードして作成しました。


(DxLib.dll と同じ場所に保存します)

こちらはクラス化した C# テンプレートです。プロジェクトをテンプレートで作成したら、DxLib.dll と DxLib_x64.dll と DxLibDotNet.dll と player.png をコピーして DxLibDotNet.dll を参照します


クラス化なしのベタコード

このコードで、自機が左矢印キーと右矢印キーで左右に移動します。
using DxLibDLL;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace DX_001 {

	static class Program {

		[STAThread]
		static void Main() {

			// ウインドウモードで起動( コメントにするとフルスクリーン )
			DX.ChangeWindowMode(DX.TRUE);

			// スクリーンサイズ
			int screen_w = 800, screen_h = 600;
			DX.SetGraphMode(screen_w, screen_h, 32);

			// DXライブラリの初期化
			if (DX.DxLib_Init() < 0) {
				return;
			}

			// 描画先を裏画面に変更
			DX.SetDrawScreen(DX.DX_SCREEN_BACK);

			// 画像の読み込み
			int player = DX.LoadGraph("player.png");

			// 画像のサイズを取得
			int player_graph_w, player_graph_h;
			DX.GetGraphSize(player, out player_graph_w, out player_graph_h);

			// プレーヤーの初期位置
			int x = screen_w / 2 - player_graph_w / 2, y = screen_h - 70;

			int payer_move_offset = 5;

			// メインループ
			while (DX.ProcessMessage() != -1) {

				// ESC で終了
				if (DX.CheckHitKey(DX.KEY_INPUT_ESCAPE) == 1) {
					break;
				}

				// 右矢印キー
				if (DX.CheckHitKey(DX.KEY_INPUT_RIGHT) == 1) {
					x += payer_move_offset;
					if (x + player_graph_w > screen_w) {
						x = screen_w - player_graph_w;
					}
				}
				// 左矢印キー
				if (DX.CheckHitKey(DX.KEY_INPUT_LEFT) == 1) {
					x -= payer_move_offset;
					if (x < 0) {
						x = 0;
					}
				}
				// 上矢印キー
				if (DX.CheckHitKey(DX.KEY_INPUT_UP) == 1) {
				}
				// 下矢印キー
				if (DX.CheckHitKey(DX.KEY_INPUT_DOWN) == 1) {
				}
				// スペースキー
				if (DX.CheckHitKey(DX.KEY_INPUT_SPACE) == 1) {
				}

				// 画面をクリア
				DX.ClearDrawScreen();

				// プレイヤーを描画
				DX.DrawGraph(x, y, player, DX.TRUE);

				// 裏画面の内容を表画面に反映する
				DX.ScreenFlip();
			}

			// DXライブラリの後始末
			DX.DxLib_End();
		}
	}

}


このままいろいろ機能を実装して行くと、とてもメンテしにくいコードになるので、まずゲームの本体である初期化とメインループをクラス化し、メインループ用の start メソッドの引数の無名処理を呼び出すようにしました。

Game クラスを作成して使用
	static class Program {

		[STAThread]
		static void Main() {

			// メインゲームインスタンス作成
			Game game = new Game(800, 600);

			// 初期化
			game.init();

			// 画像の読み込み
			int player = DX.LoadGraph("player.png");

			// 画像のサイズを取得
			int player_graph_w, player_graph_h;
			DX.GetGraphSize(player, out player_graph_w, out player_graph_h);

			// プレーヤーの初期位置
			int x = game.screen_w / 2 - player_graph_w / 2, y = game.screen_h - 70;

			int payer_move_offset = 5;

			game.start(
				// *******************
				// 主処理
				// *******************
				(int counter) => {

					// 右矢印キー
					if (DX.CheckHitKey(DX.KEY_INPUT_RIGHT) == 1) {
						x += payer_move_offset;
						if (x + player_graph_w > game.screen_w) {
							x = game.screen_w - player_graph_w;
						}
					}

					// 左矢印キー
					if (DX.CheckHitKey(DX.KEY_INPUT_LEFT) == 1) {
						x -= payer_move_offset;
						if (x < 0) {
							x = 0;
						}
					}

				},
				// *******************
				// 描画処理
				// *******************
				() => {

					DX.DrawGraph(x, y, player, DX.TRUE);

				}

			);



		}
	}


Game クラス

public void start(main_action call, draw_action draw) として定義されているので、内側から call と draw を呼び出して呼び出し元のコードを実行させます。

こうする事によって、ループ処理の中をキー処理と描画処理を分けて解りやすく記述できるようになります。

呼び出し元は、ラムダ式で単純なブロックを作成して記述が可能です。
class Game {

	// 外部呼出し用
	public delegate void main_action(int counter);
	public delegate void draw_action();

	// メインループカウント
	private int loopCount = 0;

	// スクリーンサイズ
	public int screen_w;
	public int screen_h;

	// *******************
	// コンストラクタ
	// *******************
	public Game(int w, int h) {
		screen_w = w;
		screen_h = h;
	}

	// *******************
	// 初期化
	// *******************
	public void init() {

		// ウインドウモードで起動( コメントにするとフルスクリーン )
		DX.ChangeWindowMode(DX.TRUE);

		// スクリーンサイズ
		DX.SetGraphMode(screen_w, screen_h, 32);

		// DXライブラリの初期化
		if (DX.DxLib_Init() < 0) {
			return;
		}

		// 描画先を裏画面に変更
		DX.SetDrawScreen(DX.DX_SCREEN_BACK);

	}

	// *******************
	// メインループ開始
	// *******************
	public void start(main_action call, draw_action draw) {


		// メインループ
		while (DX.ProcessMessage() != -1) {

			// ESC で終了
			if (DX.CheckHitKey(DX.KEY_INPUT_ESCAPE) == 1) {
				break;
			}

			// 外部を呼び出し
			call(loopCount);
			loopCount++;
			if (loopCount > 100000) {
				loopCount = 0;
			}

			// 画面をクリア
			DX.ClearDrawScreen();

			// 外部を呼び出し(描画処理用)
			draw();

			// 裏画面の内容を表画面に反映する
			DX.ScreenFlip();

		}

		// DXライブラリの後始末
		DX.DxLib_End();

	}

}


関連する記事

C# でDXライブラリを使って簡単なシューティングをクラス化して標準化 / メインループとプレイヤー (2)


posted by lightbox at 2017-11-25 22:07 | VS(C#) | このブログの読者になる | 更新情報をチェックする

2017年11月06日


Visual Studio 2012 : 表示メニューから、ツールボックス等のコマンドが消えてしまった場合の個別登録

原因は解りませんが、きっとどこかに Visual Studio のデフォルト状態のメニューの定義があると思うのですが、見つける事ができていません。(コマンドの追加に『リセット』とかあるので)

良く使うウインドウ表示コマンドを、自分で登録してみます。

▼ メニューをカスタマイズするコマンドの場所

(これが消えていたら、どうしていいかは現在未調査)

▼ 表示する位置の決定


この Visual Studio は正常なので、『出力』も『ツールボックス』もあります。無い場合はこのあたりを選択してコマンドの追加ボタンをクリックします。

▼ コマンドの選択


ウインドウの表示コマンドは、『表示』の中にあると思います。画像のスクロールバー位置を参考に探して下さい。



posted by lightbox at 2017-11-06 10:47 | VS(C#) | このブログの読者になる | 更新情報をチェックする
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 終わり