別窓を開いてシェアしつつ、元々の窓ではシェアありがとう画面を表示する

<a href="https://www.facebook.com/sharer/sharer.php" target="_blank" class="shareBtn">Facebookでシェアする</a>
<a href="https://twitter.com/share?text=share!" target="_blank" class="shareBtn">Twitterでシェアする</a>
$(function(){
	$('.shareBtn').on('click', function(event) {
		window.location.href = 'thanks.html'
	});
});

ソーシャルボタンをきれいに横に並べるスニペット

ソーシャルボタンをきれいに横に並べるのに嵌ったので……。
ソーシャルボタンは種類が多いし、ときたまソースが変わるので、これがいつまで持つかはわからないのですが。

<div id="social">
	<div class="twitter">
	<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.com/" data-count="none">Tweet</a>
	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
	</div>
	<div class="facebook">
	<div class="fb-like" data-href="http://example.com/" data-width="80" data-layout="button" data-show-faces="false" data-share="false"></div>
	</div>
</div>
#social img {
	width: 100%;
	line-height: 0 !important;
	vertical-align:top;
}

#social .facebook,
#social .twitter{
	display: inline-block;
	height: 20px;
	overflow: hidden;
	line-height: 0 !important;
	vertical-align:top;
	width: 80px;
	text-align: right;
}

#social .facebook {
	width: 70px;
}

#social .facebook span{
	vertical-align:top !important;
}

クリッカブルマップの覚書いろいろ

昔懐かし手法、クリッカブルマップを使う機会があったので覚書です

usemapの挙動について

		<img src="img/mainimg_main01.jpg" usemap="#mainimg" alt="てすとだよ" />
		<map name="mainimg">
			<area shape="poly" coords="1,146,359,146,359,377,1,377" href="http://example.com" alt="">
			<area shape="poly" coords="359,147,1003,147,1003,378,359,378" href="http://example.com" alt="">
			<area shape="poly" coords="-1,377,641,377,641,611,-1,611" href="http://example.com" alt="">
		</map>

usemap=”#mainimg” の部分。
usemap=”mainimg”と#をいれなくても、chromeだと、ハッシュ# が無くても動いてしまうのです。
でもIE/FFで動かなくなるので、忘れずに入れましょう。

座標を取るのが楽になるPhotoshop拡張

座標を取る際は
吉本 集さん制作のPhotoshop拡張がとても便利です。
ドリームウィーバーでもできないことは無いのですが、px単位で位置を合わせるのが、Photoshopの方が容易です。
変な形とかにもできますし。
http://tsudoi.org/weblog/?p=1279

クリッカブルマップのロールオーバー

クリッカブルマップを利用して、ロールオーバーもできます。
たとえば、地図の色を変更する、なんてことができます。
こちらはjQuery必須です。
プリローダーを実装してあげると快適だと思います。
画像置換ではなく、cssスプライトで実装してもいいかもしれませんね~。

		<div id="aseanMap">
			<h3><img src="img/h3_01.gif" alt="ASEAN" width="609" height="33" /></h3>
			<div id="mapBox">
				<img src="img/pic_map_dummy.png" alt="asean" width="960" height="565" usemap="#rollover" id="mapImg" />
				<map name="rollover" id="rollover">
					<area shape="poly" alt="Singapore" id="Singapore" nohref="nohref" coords="194,377,212,377,212,388,277,388,277,458,194,458">
					<area shape="poly" alt="Cambodia" id="Cambodia" nohref="nohref" coords="176,126,231,126,231,144,261,141,239,196,236,213,185,223,159,170,176,151">
					<area shape="poly" alt="Vietnam" id="Vietnam" nohref="nohref" coords="336,114,336,187,302,187,213,256,204,215,255,180,223,96,209,77,189,72,193,45,171,40,148,6,151,1,263,12,264,22,227,50,270,114">
					<area shape="poly" alt="Thailand" id="Thailand" nohref="nohref" coords="84,144,59,144,59,73,68,73,127,45,142,84,143,84,196,84,207,92,207,106,226,124,225,132,166,170,165,194,132,181,130,182,120,241,145,279,171,292,171,301,158,312,111,289,101,277,82,272,104,210">
					<area shape="poly" alt="Malaysia" id="Malaysia01" nohref="nohref" coords="463,257,492,267,491,280,427,306,398,364,366,367,312,372,308,355,312,349,338,346,406,301">
					<area shape="poly" alt="Malaysia" id="Malaysia02" nohref="nohref" coords="166,279,235,279,235,355,201,355,215,368,176,379,117,297,122,290,157,299,166,290">
					<area shape="poly" alt="Philippines" id="Philippines" nohref="nohref" coords="515,90,540,86,540,14,638,14,638,111,580,111,598,134,621,205,529,238,519,203,514,147,495,143,447,227,435,223,435,222,435,216,481,133,472,109,473,25,497,12">
					<area shape="poly" alt="Indonesia" id="Indonesia" nohref="nohref"  coords="654,258,834,271,908,278,941,380,945,410,922,406,801,467,755,479,695,503,671,508,596,544,307,540,218,528,141,479,104,453,58,394,35,367,23,314,53,301,63,311,84,319,141,365,199,396,202,418,220,427,293,382,300,356,332,369,373,356,400,356,407,349,419,313,415,303,420,298,522,299,569,279">
				</map>
			</div>
		</div>
$(function(){
	jQuery.preloadImages = function(){
		for(var i = 0; i<arguments.length; i++){
			jQuery("<img>").attr("src", arguments[i]);
		}
	};
	
	$.preloadImages("img/map/Cambodia.png","img/map/Indonesia.png","img/map/Malaysia01.png","img/map/Malaysia02.png","img/map/Philippines.png","img/map/Singapore.png","img/map/Thailand.png","img/map/Vietnam.png");
	
	//areaのマウスオーバーにて画像を置換
	$('area').hover(
		function(){
			$('#mapImg').stop();
			var areaId = $(this).attr('id');
			$('#mapImg').attr('src', 'img/map/' + areaId + '.png');
		},
		function(){
			$('#mapImg').stop();<ol>
</ol>


			$('#mapImg').attr('src', 'img/pic_map_dummy.png');
	});
});

参考サイト様

http://black-flag.net/jquery/20121003-4217.html
http://logic.moo.jp/data/archives/740.html
http://cgi-lab.net/javascript/89-image-map.html

googleMapの共有リンクをIE9以下に対応させたい場合は、IE9以下の環境で共有リンクを生成しよう

タイトルの通り。

IE10以上で現在表示できるgoogleMapは、新しいgoogleMapなので、
対応ブラウザはGoogle Chrome、Firefox、Safari 6以上
対応OSは、Windows Vista以上(Firefox以外はWindows XPにも対応)とMac OS X

出典
http://internet.watch.impress.co.jp/docs/news/20140220_636083.html

なのだけど、共有リンクをIE9以下に対応したい場合もある。
そんな時は、IE9以下の環境でgoogleMapを開いて共有リンクを作ればいい。
IE9以下なら旧googleMapが表示されるので、
表示される共有URLも旧googleMap用のものだ。
ちなみにIE10以上の環境だと、旧共有URLも新googleMapで開くことができる。

けどこの下位互換が保たれるのがいつまでなのかは不明……。

Flashの上にライトボックスUIを使う場合の設定

Flashの上にライトボックスUIを使う場合。
Firefoxで見た時に、ライトボックスの背景の上に動画が表示されてしまうことがあります。
swfを表示するobjectタグとembedタグに、wmodeオプションを付加しておきましょう。

wmode="transparent"

参考ページです。
http://www.drk7.jp/MT/archives/001434.html

youtube動画の上にライトボックスUIを使う際の設定と同じですね。
http://kachibito.net/web-design/youtube-zindex-with-jquery.html

あと、確認していませんがなんだか追加で不都合も発生するみたいです。
http://d.hatena.ne.jp/nacbox/20100729/1280387880
http://labs.spiffield.net/archives/158

Media Element.JSをレスポンシブ(拡大縮小)対応する方法

IE8からAndroidまでワンソースで対応できちゃう
Media Element.JS
っていう動画プラグインがある。
WordPressの動画再生部分のコアにも採用されてるところからも、
優秀さが伺えるんだけど、
それのレスポンシブ対応に迷ったのでメモ。

記述があったのはこちら
http://coolestguidesontheplanet.com/videodrome/mediaelementjs/

普通に設置して、
縦横指定するところに
style=”width:100%;height:100%;”
width=”100%” height=”100%”
を追加。
これで、縦横幅は親要素依存にできます。
タネがわかれば簡単なのだけど、すごく目鱗だな……!

<video id="my_video_1"  style="width:100%;height:100%;" controls="controls" width="100%" height="100%"
 preload="auto" poster="my_video_poster.png"
 <source src="my_video.mp4" type='video/mp4'>
</video>

youtubeの横幅をストレッチ可能にする

素晴らしいです。助かりました。有難うございます。

<div class="video-container">
	<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

出典
http://html5-css3.jp/tips/youtube-html5video-window.html

IE8でテーブルのpaddingがおかしかったけどtable-layout: fixed;で治った【その後追記あり】

IE8でテーブルのthやtdの paddingが計算されていないような挙動をしていた。
でも

table-layout: fixed;

で治った。

【追記】
だけど描画方法を直すと横幅の見た目が変わるので注意が必要。

そもそもの原因は、
table-layout: fixed;が無い状態で、
paddingを設定したtdの隣のtdのpテキストが、
横幅より長かったのがいけなかったらしい。なんだそれ……。

下記みたいな▼▼
td class=”index”にwidthとpaddingを設定した
ソースを

						<table class="formtable">
							<tr>
								<td class="index"><br></td>
								<td colspan="3">
									コンテンツ
								</td>
							</tr>
							<tr>
								<td class="index"><br></td>
								<td colspan="3">
									<p class="attention">長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト</p>
								</td>
							</tr>
						</table>

こんなふうに▼▼
二つのテーブルに分けたら解消した。なんでやねん……。

						<table class="formtable">
							<tr>
								<td class="index"><br></td>
								<td colspan="3">
									コンテンツ
								</td>
							</tr>
						</table>
						<table class="formtable">
							<tr>
								<td class="index"><br></td>
								<td colspan="3">
									<p class="attention">長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト</p>
								</td>
							</tr>
						</table>

【2015年1月追記】
IE8限定の現象。
tableのtdに対してbox-sizing:border-boxを設定した状態で、
横のpaddingを%で指定するとうまくいかない。
こちらは、px指定にすることによって回避。

参考サイト様
http://www.htmq.com/style/table-layout.shtml
http://html-coding.co.jp/knowhow/tips/000219/

IE8以前でもテキストエリアを角丸内側シャドウにしてと言われた日のためのコード

そんな日がいつ来るんだろう?とは思いますが。
css3を補助する系のjsは、別の不都合を引き起こしたりするので敬遠しています。
なので背景画像を使ってみました。
リセットcssは効かせた状態で作っています。

マークアップはこんな感じ

<span class="bg">
	<input type="text" class="textTest" />
</span>

cssはこんな感じです。

span.bg{
	background: url(../img/bg_test01.png) center top no-repeat;
	width:212px;
	height:31px;
	display:block;
	padding:8px;
}

span.bg input{
	width:212px;
	height:31px;
	line-height:31px;
	border:0;
	background:#fffcd2;
}

【SP限定】border-imageでいろんなワクをつくろう。

PCでは対応状況が悪いので使い物にならないが、
スマホでのコーディングでは有力かもしれない。
アンドロイドでの、特殊枠画像で、画像がずれたりしないのだ!!

*{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

div{
	border-style: solid;
	border-width: 30px 25px 20px 25px;
	-moz-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	-webkit-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	-o-border-image: url(../img/bg_form.png) 30 25 20 25 stretch round;
	border-image: url(../img/bg_form.png) 30 25 20 25 fill stretch round;
}

下記の解説とジェネレータが秀逸。

http://www.htmq.com/css3/border-image.shtml
http://border-image.com/