今日のメモ2017/12/21
いろこう ->色校正:印刷物の色が思った色出てるかどうかのチェック
retinaとか高解像度displayの話 幅は350pxだがドットは700ある。から、350pxの画像を350pxで表示すると引き延ばされるためにブレて見える。 700pxの画像を用意して、350pxで表示すると綺麗にみえる。
top:9.5pxを使うと、ブレるところがあった。 9pxを使うといけた と思ったがそれでも同じcssを使っているのに表示が微妙にズレるところがある。 iphone5sだけ線が細くなる部分がある。 デザインが大きく崩れるわけではないので一旦置く。 どうにかしたい。
divをタップしたときに青い枠が出てしまう https://www.yumemono.net/css-tap-highlight-color-does-not-work/ -webkit-tap-highlight-color:rgba(0,0,0,0); cursor:pointer; で解決した。
ウインドウの高さの取得 $(window).height()がスクロールバーを除いた高さ window.innerHeightがスクロールバー込みの高さ スマホの場合、上のバーや下のバーもあるので注意。
http://hayachi.github.io/hamburger_animation/ androidでみてもかくつかないアニメ。
-webkit-backface-visibility: hidden 3Dで要素をひっくり返す時に裏面をどうするかのプロパティらしい。 3Dでなくてもこれを設定することで影が出なくなる場合があるとか。
fastfontのプリロード font-loader的なjavascriptを使ったような。 使ってた。以前作ったページが役に立った。
cssのアニメーションでカクつく。 処理が重くてfpsが落ちているわけではないかもしれない。 左からにゅーっと右に棒が伸びるアニメ。 widthを0%から100%にするアニメはandroidでカクついてみえた。 translateを使って、親要素にoverflow:hiddenを指定して伸びているように見せることにしたらカクつかなかった。
いいボタンを作ること ->押したくなるボタンを作れるようになりたい。 コンバージョンへの入り口はボタンが多い。 そのボタンが押したくなるようなボタンなら必然的にコンバージョンは上がるだろう。
background-colorが前面にある要素より少しだけ大きくなりはみ出してしまう問題があった。 一回り大きく余白をとった要素を作り、その後ろに違う要素としてbackground-colorを元のものと同じように指定してz-indexで調節した、
画像の切り替えに関して、右から左にスライドするが、もともと二枚の画像は重なり合っていて、スライド時も画像自体は動かず、境界線だけが動いて違う画像がどんどん見えて来る感じにしたい。 子要素をabsoluteで固定して、 親要素のwidthを減らしていくことで、削れていくように見えた。
年賀サイトを進めているが、年内に終わるか本当に心配。 ということで人生で初めて終電まで働いた。 眠いと完全に効率が落ちている感じがするので良くないなーとは思いつつも、 完走できるかも怪しいレベルなので頑張らねば。
