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
変換メモ

画面幅に応じて縦幅も比率固定して欲しい時のあれ

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になって少し変わった