今日のメモ2017/12/15

今日はcssと格闘しつつ、 画像切り替えのおしゃれかっこいい表現を探した日になった。

中身が全てdisplay:noneになっていたため高さがなく、divの位置が逆転？？　 min-height:1pxを挿入で対応 ->再現できなくなっているので後日再確認 -> komepiyo.hatenablog.com

隣接セレクタ p + ul{ color:red; } なら、

のようなpの直後にあるulのみ、color:redが適応される

画面中央に出したかったimgがずれる position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); でやったがずれる。 -100%にすると思った位置に表示された。 32pxの画像をとしているのが問題？ ->後日再確認 komepiyo.hatenablog.com

ビデオ会議zoom www.nelco.com slack連携させてで社でも使えるようにする？ という話があがった。

cssが散らかってきたのでどうにかしたい。 新機能を追加する際に特定の要素をhtml上から消すことがあるが、 その要素にかかっているcssがcommon.css上にある場合は消しておきたい。 しかし、他のページでも同じセレクタでルールが適応される要素があったらスタイルが崩れてしまう。 怖いので残しておく、が続くとどんどん無意味なcssが量産されてしまう 何かしらのツールを使って整理するべきな気がする。

imgをdivで囲んで枠を作る divのwidthを決めて、height:autoにしてimgのwidth100%とか

foreachについて javascriptはarr.foreach( function(idx,val,arr){} ); jqueryは$obj.each( function(idx){} );

jqueryのクラス指定でドットつけわすれがち

vhについて勉強する https://dev.classmethod.jp/ria/html5/css-length-viewport/

hoverは $obj.mouseenter(func).mouseleave(func);

http://mypro.co.jp/ ソースにコメントも豊富なので参考にしたい

javascriptのdefferedとかpromiseとか勉強したい

Pjaxについて勉強したい

いい感じのサイト

2017wrapped.com のカーソルが可愛い

taotajima.jp とにかくいかつい 全てが良い

www.mdcenter.co.jp 文字の変わり方が面白いのはもちろん、戻り方も好き T<->Iボタンがいい スクロールが思ったより激しい

vimeo.com ノイズ感かっこいい

codepen.io anime.jsアツい、遊びでも使いたい

www.kungyokudo.co.jp のスライドでスライドするまでの時間がわかるのは新鮮

https://www.clicktorelease.com/code/css3dclouds/www.clicktorelease.com 雲がでてきて画像切り替わるのいいかも

tympanus.net これもいい