非デザイナーなわたしのえび天調理方法!テフロンパンより about:blank がお気に入り

CSS でえびの天ぷら!
ちょっとネタっぽいですがそういうノリです!ウェブな内容ですw

1. about:blank を開く!

Chrome の about:blank

まず、何はともあれ Chrome で 「about:blank」を開きます!

2. デベロッパーツールを開く!

Chrome のデベロッパーツール

さらにデベロッパーツールを開きます!
例えるならこれがフライパンかな?

3. Edit as HTML!

デベロッパーツールを右クリック

body タグを選択した状態で右クリック!
そして「Edit as HTML」!

4. コードを書く!

デベロッパーツールでHTML編集

ここでコードを直接ガシガシ書いていきます!
body の背景はちょっとクリーム色に。(白だと殺風景で寒い)

5. div がベース!

デベロッパーツールでdivを書く

何でも良いですが今日は新鮮な div を1個使います!
合わせてスタイルも指定!
卵の黄身みたいw

6. box-shadow が大切!

デベロッパーツールで box-shadow 指定

貧乏人の味方 box-shadow で量を増やします!
もっこもこw

7. before と after も忘れずに!

デベロッパーツールで ::before ::after 追加

さらに before と after でえびの尻尾も忘れずに!
後着けサクサク!

8. transform:scaleX(-1) って便利!

transform: scaleX(-1) で反転

1匹じゃさみしいので2匹に!
transform の scaleX(-1) で反転!
一応完成!

9. レシピ!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<body style="background:#fff9cf;">
<div class="ebiten"></div>
<div class="ebiten" style="-webkit-transform:scaleX(-1);top:240px;left:290px;"></div>
<style>
.ebiten{
position:absolute;
top:200px;
left:300px;
width:40px;
height:34px;
background:#ffcf00;
border-radius:25px;
box-shadow:#ffcf00 34px 9px 0 5px,
#ffcf00 73px 17px 0 9px,
#ffcf00 115px 21px 0 10px;
}
.ebiten::before{
content:"";
display:block;
width:40px;
height:15px;
border-radius:25px;
background:#ff6f00;
margin-left:-35px;
margin-top:-8px;
-webkit-transform:rotate(45deg);
}
.ebiten::after{
content:"";
display:block;
width:40px;
height:15px;
border-radius:25px;
background:#ff6f00;
margin-left:-38px;
margin-top:-8px;
-webkit-transform:rotate(15deg);
}
</style>
</body>

10. JavaScript でサクっと揚げる!

JavaScript で揚げている様な動き

ヘイ!実はまだノンフライ!(びっくりだね!!)
えび天を油で揚げてる様な動きをやってみた!
外はサクサク中はプリップリのホクホクに!

使い方は雪スクリプトの設置方法の項を参照してください。

11. JavaScript のコード!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
(function(d,b,w){
	var q = d.createElement('div');
	q.innerHTML = '<style>html,body{overflow-x:hidden;}'+
	'.ebiten{position:absolute;width:40px;height:34px;background:#ffcf00;border-radius:25px;'+
	'box-shadow:#ffcf00 34px 9px 0 5px,#ffcf00 73px 17px 0 9px,#ffcf00 115px 21px 0 10px;}'+
	'.ebiten::before{content:"";display:block;width:40px;height:15px;border-radius:25px;background:#ff6f00;margin-left:-35px;margin-top:-8px;'+
	'-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}'+
	'.ebiten::after{content:"";display:block;width:40px;height:15px;border-radius:25px;background:#ff6f00;margin-left:-38px;margin-top:-8px;'+
	'-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);-o-transform:rotate(15deg);-ms-transform:rotate(15deg);}</style>';
	q.id = 'ebitenjs';
	b.appendChild(q);
	q = d.getElementById('ebitenjs');
	var h = w.innerHeight;
	var u = d.documentElement.scrollTop || b.scrollTop;
	var z = 9999;
	var t = new Array();
	var l = new Array();
	var y = new Array();
	var s = new Array();
	var g = new Array();
	var c = new Array();
	d.addEventListener('scroll',function(){u = d.documentElement.scrollTop || b.scrollTop;},false);
	for(var i=0;i<30;i++){
		var m = d.createElement('div');
		m.id = 'ebi'+i;
		t[i] = Math.random()*h+u;
		l[i] = Math.random()*w.innerWidth;
		var p = Math.random()*0.5+0.15;
		var x = ~~(Math.random()*9);
		if(x<5) x = p-(p*2); else x = p;
		var r = Math.random()*45;
		m.setAttribute('style','z-index:'+(z+i)+';top:'+t[i]+'px;left:'+l[i]+'px;-webkit-transform:scale('+x+','+p+') rotate('+r+'deg);-moz-transform:scale('+x+','+p+') rotate('+r+'deg);-o-transform:scale('+x+','+p+') rotate('+r+'deg);-ms-transform:scale('+x+','+p+') rotate('+r+'deg);');
		m.setAttribute('class','ebiten');
		q.appendChild(m);
		y[i] = Math.random()*40+5;
		s[i] = Math.random()*5+0.5;
		g[i] = d.getElementById('ebi'+i);
		c[i] = 0;
	}
	setInterval(function(){
		for(var i=0;i<30;i++){
			if(u<t[i]){
				if(y[i]>=c[i]){
					l[i] = l[i]+0.5+Math.random()*0.5;
				}else{
					l[i] = l[i]-0.5-Math.random()*0.5;
				}
				if((y[i]*2)<=c[i]){
					c[i] = 0;
				}
			}else{
				t[i] = u+h;
				l[i] = Math.random()*w.innerWidth;
			}
			t[i] = t[i]-s[i];
			g[i].style.top = t[i]+'px';
			g[i].style.left = l[i]+'px';
			c[i]++;
		}
	},45);
})(document,document.body,window);

前回のサイダーのスクリプトをベースにした手抜きです!詳しくは雪スクリプトを!今回は css3 の transform の scale と rotate を使いました。

12. えび天を降らす!

上(揚)げたら下げるでしょ?
って事でえび天を降らしまーす!

たーんと召し上がれ〜w

まとめ!

最近スクリプトネタ続きですが、年内は残り少ないのでハメを外して行こうと思います!

Chrome のデベロッパーツールでコード書くのに、特にメリットは無いのですが about:blank をブックマークに入れておけばすぐに開けるし PC 変わっても Chrome さえあればちょっとした事なら出来ますよ!程度にw

個人的には思いついたらすぐ形にしたいのですぐ書きはじめれてすぐ見れるあたりが気に入って、今回の様な小物ぐらいならこんな感じで使ったりします。覚えておいては損はないかなーとw

今回のネタは Ateitexeyou さんがこんな妄想するからでした!

お楽しみいただけたら幸いです…!JavaScript と CSS3 は楽しいw