webサイトつくるときに毎回ググっていることまとめ


そんなにwebサイト制作に慣れてないけど、何ヶ月かおきに数ページ程度
つくることがある。なので毎回ググったり、チェックわすれたりすることがあって
そういうことはまとめておいて毎回チェックするようにしたらいいかなと思ったのでまとめ

ひとまず今回つくって思い当たったことだけまとめた。
順次追加していく

#一般的なこと

##スマホの画面サイズどうしてたっけ問題
以下を参照する。
http://qiita.com/fnobi/items/4bec5ddf4ea83c5e1820

これは時と場合によって相談しながら決めるのがいいかなと思う

でもそろそろiPhone6とかAndroidとか増えてきたし、
上の記事に書いてあるとおり

>てなわけでエンジニアの皆さん、基本的には width=device-width を使うようにしましょう！
ほいでもってデザイナのみなさま、スマホサイトは 640pxまでコンテンツ幅減らす想定をしつつ、横750pxでデザイン して頂けると助かります。

がいいのではないかと思う。

最近はもっぱら、375pxでつくってそれ以下はzoomしてしまうというのが個人的なトレンド。

##シェアボタン
コピペ用
上から、Facebook, Twitter, Line
(jadeで書いた版) -> pugに。

```index.pug
a(href=`https://www.facebook.com/sharer/sharer.php?u=${シェアURL}`, title="facebook share", target="_blank" onclick="window.open(encodeURI(decodeURI(this.href)), 'FBwindow', 'width=554, height=470, menubar=no, toolbar=no, scrollbars=yes'); return false;" rel="nofollow"): .fb#fb
  img(src="img/fb.svg")
a(href=`https://twitter.com/intent/tweet?text=${encodeURIComponent(シェア文)}&url=${シェアURL}`, title="twitter share" onclick="window.open(encodeURI(decodeURI(this.href)), 'FBwindow', 'width=554, height=470, menubar=no, toolbar=no, scrollbars=yes'); return false;" rel="nofollow"): .tw#tw
  img(src= img/tw.svg")
  
//つかってないからまだjadeのまま  
a(href!="line://msg/text/#{シェア文}%20#{シェアURL}", title="line share"): .li#li
  img(src= img/li.svg")
```

※Twitterのシェア文はencodeURIComponentでエンコードしないとIEで消えるか文字化けする。

#css
最後まで色々悩まされるのは大体css。

##inline-block隙間問題

inline-blockに隙間ができて要素を並べた時にカラム落ちする

親要素に

```
font-size: 0
letter-spacing: -1px
word-spacing: -1px
```

を指定する。

`font-size: 0`のみだとsafariでカラム落ちする

IE9を捨てたらflex-boxがいい感じらしいので早くIE9捨てたい。

##Androidのfont-size問題

font-sizeが10以下を指定しても変化のない端末に遭遇した。

テキスト行が増えてレイアウトに影響がでたので思い切ってsvgにした。
(あんまり根本的な解決になっていない)

#font-size
http://www.nda.co.jp/memo/pxpt.html
変換メモ

#画面幅に応じて縦幅も比率固定して欲しい時のあれ
http://qiita.com/takanorip/items/c07a4c6b3dcf2be16775

#javascript

##IE、console.log問題
IEはconsole.logが残っていると、とまる。
覚えているけど大体無意識にやってしまう。

##画面サイズ取得
こちらを参照
http://qiita.com/ooyabuh/items/6b63f2b398dce12cd943

##Tween
TweenMax派です。
動いた実績があるコード↓

```main.js

$hoge = $('.hoge');
//to
TweenMax.to($hoge, 0.5, {opacity: 1, ease: Circ.easeOut, delay: 1.0});
//fromto
TweenMax.fromTo($hoge, 2, {scale: 1.5, delay: 3.0}, {scale: 1.0,  ease: Circ.easeOut, delay: 1.0});
//onComplete
TweenMax.to($hoge, 2, {scale: 1.5, delay: 3.0, onComplete: ()=>{
  console.log("complete");
}});
//css
TweenMax.to($hoge, 1, {css:{marginTop:0, rotation:0} , delay: 0.3, ease: Circ.easeOut});
//pixijs
TweenMax.to(this.hoge.position, 2, {x:posX, y:posY});

```

TweenMaxにかんしてはここによくまとまっているような気がします
http://qiita.com/ANTON072/items/a1302f4761bf0ffcf525#%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%A9%E3%82%A4%E3%83%B3

TweenMax タイムライン
http://hatsuka.info/coding/tweenmax01

##クリックイベント
なんか覚えられない

```
$('.btn').on('click', ()=>{
    console.log('hoge');
});
```

##スクロールして要素の位置に来たらなにか
```
$(window).scroll(()=> {
    const pos = $(window).scrollTop() + $(window).height();
    const trg = $('.first > .start').offset().top;
    console.log("pos  "+pos+"  trg  "+trg);
});
```

##ホバーイベント

```
$(trg).hover(
()=>{
  console.log(hover);
},
()=>{
  console.log(unhover);
});
```

##独自イベント

独自イベントだけじゃなくてイベント全般的にわかりやすい記事
http://qiita.com/hththt/items/aefbcc6eb191588dadff#%E7%8B%AC%E8%87%AA%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88


一回だけのイベントにつくりかえてみた
(発火したらremoveする)

```
this.event = document.createEvent('Event');
this.event.initEvent('myevent', true,true); //イベントタイプを指定
var target = document.getElementById('first');
target.addEventListener('myevent', function cb(e){
  console.log('fired');
  target.removeEventListener(e.type, cb, false);
}, false);

target.dispatchEvent(this.event);
//以降は発火しない
target.dispatchEvent(this.event);
target.dispatchEvent(this.event);
```


#メタ言語
sassとかstylusとかjadeとかslimとか
メタ言語のfor文とか配列とか変数とかは大体忘れてる。

##stylus

cssはstylus

###for文

```
widthArr = 233 231 243 230 231 253
 
for i in(1..6)
	.hoge
		n = i - 1
		width: widthArr[n]px
```

`for v in widthArr`てきな書き方もできると思うけど
個人的にはこっちのほうがすき。

###変数名を変数をつかって表す
特別な事情で
hoge0 = aaa.png, hoge1 = bbb.png, hoge2 = ccc.pngみたいな変数があったとする

```
for i in (0..2)
	.container{i}
		background-image: url(hoge+i)
```

のように変数名を変数を使って表せる。

おそらく出力はこんなかんじになる

```
container0{
	background-image: url(aaa.png)
}
container1{
	background-image: url(bbb.png)
}
container2{
	background-image: url(ccc.png)
}
```



##Pug

元:Jade

###for文
```
- for(var i=1; i<=12; i++){
  span(class=`q-${i}`)= i
- }
```

```
each v,i in qs
  - var cls = `${i}`
  div(class=cls)
```

どっちでもうごいた。
	

###jadeでHeadのテンプレートなどにページ別にそれぞれ値変えたいものがあるとき

スクリプトのパスとかタイトルとかはページごとに変わることへの対応。
以下を参考に
http://qiita.com/koki_cheese/items/c925022712ec7e2756ae

###変数
```
- var hoge = "hogehoge"
image(src=`${hogehoge}/hoge.jpg`)
```

変数展開の仕方がjade->pugになって少し変わった