chuck0523/fontPicker3.html

## fontPicker3.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
	<title>fontPicker</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<style>
		body {
			margin: 0;
			padding: 0;
			width: 100%;
			background-image: url('bgImg.jpg');
			background-size: 300%;
		}
		.wrapper {
			overflow: hidden;
		}
		.titleLabel {
			position: absolute;
			top: 5%;
			right: -40%;
			width: 100%;
			height: 60px;
			background-color: #c00;
			box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
			font-size: 35px;
			color: #fff;
			text-align: center;
			line-height: 60px;
			-webkit-transform: rotateZ(25deg);
			-moz-transform: rotateZ(25deg);
			-ms-transform: rotateZ(25deg);
		}
		.fontContainer {
			float: left;
			box-sizing: border-box;
			margin: 5% 5% 70px;
			padding: 3%;
			width: 90%;
			border-radius: 5px;
			background-color: rgba(0,0,0,0.3);
		}
		.font-box {
			float: left;
			box-sizing: border-box;
			margin: 0 2% 2% 0;
			width: 18%;
			height: 50px;
			background-color: #5aa;
			border-radius: 3px;
			box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
			font-size: 20px;
			color: #fff;
			text-align: center;
			line-height: 50px;
			overflow: hidden;
			cursor: pointer;
		}
		.font-box:hover {
			font-size: ;
		}
		.fixedLabel {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 70px;
			background-color: rgba(0,0,0,0.7);
			text-align: center;
		}
		.fixedTextarea {
			margin-top: 17px;
			width: 70%;
			max-width: 90%;
			height: 30px;
			font-size: 14px;
			resize: horizontal;
		}
		.selectText {

		}
		.selected {
			background-color: #c55;
		}
		.bgImg {
			position: absolute;
			top: 0;
			background-image: url('bgImg.jpg');
			background-size: contain;
			width: 100%;
			height: 1000px;
		}
		@media screen and (max-width:768px) {
			body {
				background-size: 400%;
			}
			.titleLabel {
				right: -40%;
				top: 2%;
				height: 40px;
				font-size: 20px;
				line-height: 40px;
			}
			.font-box {
				width: 23%;
				height: 40px;
				font-size: 11px;
				line-height: 40px;
			}
			.fixedTextarea {
				width: 70%;
				font-size: 13px;
			}
		}
		@media screen and (max-width:480px) {
			body {
				background-size: 700%;
			}
			.titleLabel {
				top: 1%;
				height: 30px;
				font-size: 10px;
				line-height: 30px;
			}
			.font-box {
				width: 31%;
				height: 40px;
				font-size: 10px;
				line-height: 40px;
			}
			.fixedTextarea {
				width: 70%;
				font-size: 11px;
			}
		}
	</style>
</head>
<body>
<div class="wrapper">
	<div id="titleLabel" class="titleLabel">Font Picker</div>
	<div id="fixedLabel" class="fixedLabel">
		<textarea id="fixedTextarea" class="fixedTextarea"></textarea>
		<button id="selectText" class="selectText">Select</button>
	</div>
	<div id="fontContainer" class="fontContainer"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	var fonts = ['sans-serif', 'arial', '"arial black"', '"arial narrow"', '"arial unicode ms"', '"Century Gothic"', '"Franklin Gothic Medium"', '"Gulim"', '"Dotum"', '"Haettenschweiler"', '"Impact"', '"Ludica Sans Unicode"', '"Microsoft Sans Serif"', '"MS Sans Serif"', '"MV Boil"', '"New Gulim"', '"Tahoma"', '"Trebuchet"', '"Verdana"', 'serif', 'Batang', '"Book Antiqua"', '"Bookman Old Style"', 'Century', '"Estrangelo Edessa"', 'Garamond', 'Gautami', 'Georgia', 'Gungsuh', 'Latha', 'Mangal', '"MS Serif"', 'PMingLiU', '"Palatino Linotype"', 'Raavi', 'Roman', 'Shruti', 'Sylfaen', '"Times New Roman"', 'Tunga', 'monospace', 'BatangChe', 'Courier', '"Courier New"', 'DotumChe', 'GlimChe', 'GungsuhChe', 'HG行書体', '"Lucida Console"', 'MingLiU', '"ＭＳ ゴシック"', '"ＭＳ 明朝"', 'OCRB', 'SimHei', 'SimSun', '"Small Fonts"', 'Terminal', 'fantasy', 'alba', '"alba matter"', '"alba super"', '"baby kruffy"', 'Chick', 'Croobie', 'Fat', 'Freshbot', 'Frosty', 'GlooGun', 'Jokewood', 'Modern', '"Monotype Corsiva"', 'Poornut', '"Pussycat Snickers"', '"Weltron Urban"', 'cursive', '"Comic Sans MS"', 'HGP行書体', '"HG正楷書体-PRO"', '"Jenkins v2.0"', 'Script', '"MS UI Gothic"', '"ＭＳ Ｐゴシック"', '"ＭＳ ゴシック"', '"ＭＳ Ｐ明朝"', '"ＭＳ 明朝"', 'メイリオ', '"Meiryo UI"', '游ゴシック', '游明朝', 'Osaka'];
	var log = function(x){console.log(x);}
	var fontsLen = fonts.length;
	for(var i = 0; i < fontsLen; i++) {
		var fontText = fonts[i];
		if(fontText.slice(0,1) == "\"") {
			fontText = fonts[i].slice(1, -1);
		}
		var fontBox = $('<div />').addClass('font-box').css({
			'font-family': fonts[i]
		}).text(fontText);
		$('#fontContainer').append(fontBox);
	}
	$('.font-box').click(function(){
		//一度カンマを外す
		var text = $('#fixedTextarea').text().replace(/","/g, '""');

		$(this).toggleClass('selected');

		var fontText = '\"' + $(this).text() + '\"';

		if($(this).hasClass('selected')) {
			text += fontText;
		} else {
			text = text.replace(fontText, '');
		}
		text = text.replace(/""/g, '","');
		$('#fixedTextarea').text(text);
	});

	$('#selectText').click(function() {
		$('#fixedTextarea').select();
	});

});
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1" />
	<title>fontPicker</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<style>
	body {
	margin: 0;
	padding: 0;
	width: 100%;
	background-image: url('bgImg.jpg');
	background-size: 300%;
	}
	.wrapper {
	overflow: hidden;
	}
	.titleLabel {
	position: absolute;
	top: 5%;
	right: -40%;
	width: 100%;
	height: 60px;
	background-color: #c00;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
	font-size: 35px;
	color: #fff;
	text-align: center;
	line-height: 60px;
	-webkit-transform: rotateZ(25deg);
	-moz-transform: rotateZ(25deg);
	-ms-transform: rotateZ(25deg);
	}
	.fontContainer {
	float: left;
	box-sizing: border-box;
	margin: 5% 5% 70px;
	padding: 3%;
	width: 90%;
	border-radius: 5px;
	background-color: rgba(0,0,0,0.3);
	}
	.font-box {
	float: left;
	box-sizing: border-box;
	margin: 0 2% 2% 0;
	width: 18%;
	height: 50px;
	background-color: #5aa;
	border-radius: 3px;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.7);
	font-size: 20px;
	color: #fff;
	text-align: center;
	line-height: 50px;
	overflow: hidden;
	cursor: pointer;
	}
	.font-box:hover {
	font-size: ;
	}
	.fixedLabel {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 70px;
	background-color: rgba(0,0,0,0.7);
	text-align: center;
	}
	.fixedTextarea {
	margin-top: 17px;
	width: 70%;
	max-width: 90%;
	height: 30px;
	font-size: 14px;
	resize: horizontal;
	}
	.selectText {

	}
	.selected {
	background-color: #c55;
	}
	.bgImg {
	position: absolute;
	top: 0;
	background-image: url('bgImg.jpg');
	background-size: contain;
	width: 100%;
	height: 1000px;
	}
	@media screen and (max-width:768px) {
	body {
	background-size: 400%;
	}
	.titleLabel {
	right: -40%;
	top: 2%;
	height: 40px;
	font-size: 20px;
	line-height: 40px;
	}
	.font-box {
	width: 23%;
	height: 40px;
	font-size: 11px;
	line-height: 40px;
	}
	.fixedTextarea {
	width: 70%;
	font-size: 13px;
	}
	}
	@media screen and (max-width:480px) {
	body {
	background-size: 700%;
	}
	.titleLabel {
	top: 1%;
	height: 30px;
	font-size: 10px;
	line-height: 30px;
	}
	.font-box {
	width: 31%;
	height: 40px;
	font-size: 10px;
	line-height: 40px;
	}
	.fixedTextarea {
	width: 70%;
	font-size: 11px;
	}
	}
	</style>
	</head>
	<body>
	<div class="wrapper">
	<div id="titleLabel" class="titleLabel">Font Picker</div>
	<div id="fixedLabel" class="fixedLabel">
	<textarea id="fixedTextarea" class="fixedTextarea"></textarea>
	<button id="selectText" class="selectText">Select</button>
	</div>
	<div id="fontContainer" class="fontContainer"></div>
	</div>
	<script type="text/javascript">
	$(document).ready(function(){
	var fonts = ['sans-serif', 'arial', '"arial black"', '"arial narrow"', '"arial unicode ms"', '"Century Gothic"', '"Franklin Gothic Medium"', '"Gulim"', '"Dotum"', '"Haettenschweiler"', '"Impact"', '"Ludica Sans Unicode"', '"Microsoft Sans Serif"', '"MS Sans Serif"', '"MV Boil"', '"New Gulim"', '"Tahoma"', '"Trebuchet"', '"Verdana"', 'serif', 'Batang', '"Book Antiqua"', '"Bookman Old Style"', 'Century', '"Estrangelo Edessa"', 'Garamond', 'Gautami', 'Georgia', 'Gungsuh', 'Latha', 'Mangal', '"MS Serif"', 'PMingLiU', '"Palatino Linotype"', 'Raavi', 'Roman', 'Shruti', 'Sylfaen', '"Times New Roman"', 'Tunga', 'monospace', 'BatangChe', 'Courier', '"Courier New"', 'DotumChe', 'GlimChe', 'GungsuhChe', 'HG行書体', '"Lucida Console"', 'MingLiU', '"ＭＳゴシック"', '"ＭＳ明朝"', 'OCRB', 'SimHei', 'SimSun', '"Small Fonts"', 'Terminal', 'fantasy', 'alba', '"alba matter"', '"alba super"', '"baby kruffy"', 'Chick', 'Croobie', 'Fat', 'Freshbot', 'Frosty', 'GlooGun', 'Jokewood', 'Modern', '"Monotype Corsiva"', 'Poornut', '"Pussycat Snickers"', '"Weltron Urban"', 'cursive', '"Comic Sans MS"', 'HGP行書体', '"HG正楷書体-PRO"', '"Jenkins v2.0"', 'Script', '"MS UI Gothic"', '"ＭＳＰゴシック"', '"ＭＳゴシック"', '"ＭＳＰ明朝"', '"ＭＳ明朝"', 'メイリオ', '"Meiryo UI"', '游ゴシック', '游明朝', 'Osaka'];
	var log = function(x){console.log(x);}
	var fontsLen = fonts.length;
	for(var i = 0; i < fontsLen; i++) {
	var fontText = fonts[i];
	if(fontText.slice(0,1) == "\"") {
	fontText = fonts[i].slice(1, -1);
	}
	var fontBox = $('<div />').addClass('font-box').css({
	'font-family': fonts[i]
	}).text(fontText);
	$('#fontContainer').append(fontBox);
	}
	$('.font-box').click(function(){
	//一度カンマを外す
	var text = $('#fixedTextarea').text().replace(/","/g, '""');

	$(this).toggleClass('selected');

	var fontText = '\"' + $(this).text() + '\"';

	if($(this).hasClass('selected')) {
	text += fontText;
	} else {
	text = text.replace(fontText, '');
	}
	text = text.replace(/""/g, '","');
	$('#fixedTextarea').text(text);
	});

	$('#selectText').click(function() {
	$('#fixedTextarea').select();
	});

	});
	</script>
	</body>
	</html>