今日のメモ2017/12/18
pixi.js触ってみたい。 webGLにおける2D表現に強いらしい。 webGLが使えない場合はcanvasにfallbackさせられるらしい。 画像の切り替わりに関して、雲が出てきて晴れたら画像が変わっている〜みたいな表現もできそう
前回の未解決に関して divの位置が逆転 ->現象が再現できないので一旦捨てる
画面中央に出したかったimgが50%だとずれるが100%にするといい位置にくる ->画像のサイズは関係なく、paddingが親要素にかかっていただけだった。 たまたま100%にするとpadding分ずれていただけ。 translate(50%)してpadding分ずらすことで解決。 left: 50% - 25px; ではエラーになるので left: calc(50% - 25px)で対応、
inline-blockにしてwidh:50%を二つ並べても横に並ばない
50%ずつのはずなのに横に並ばない。
htmlにおける改行が問題なので、
とすることで回避することができる。
が、改行してマークダウンしたいところなので、
としてwrapperクラスにfont-size:0をかけることで改行の分を吸収することができる。 もちろん、中の要素で文字を書く際はfont-sizeを指定しないとfont-size:0のままなので注意
basic認証 https://qiita.com/yuwaita/items/e406c645ae8d0cc3c3fa 簡単にbasic認証はかけることができた。 一度ログインすると再入場しても再び認証を問われないのはセッションに情報が保持されているから chromeにおいては履歴削除でセッションを切ることができた
ページのローディング画面を作成 今回作っているページは画像が多いので、ロードが完了するまで別の表示をしておきたい ->とりあえず$(window).on('load',function(){ });でロードを検知する。 これをはじめ、$(window).load(function(){});でやろうとしていたためエラーがでてしまっていた。
jqueryをCDNで使おうとしたところ、タグの中にintegrityという属性があって気になった。 Subresource Integrity XSS(クロスサイトスクリプティング) を防ぐための文字列を格納しているらしい。
atomのremote-ftpにおいて、 ローカルの /MAMP/htdocs/site/以下のファイルを リモートの /works/に配置したいのに/works/site/が作られ、それ以下に配置されてしまう。 ->atomのprojectディレクトリとして、/MAMP/htdocs/を指定していたのが問題だった。 addProject で /MAMP/htdocs/site/ をprojectディレクトリにすることで/works/に直接配置できるようになった。
imgはデフォルトでdisplay:inline-block要素
インハウス <-> アウトソーシング
社内のデザイナーと連携して進める仕事を振ってもらった。 ・デザイナーの感覚値を数字にしてうまく表現するには？ ->イメージをちゃんと共有し合う ->話し合うだけでなく、photoshopで手動で動かしてもらうことも可能 ->イメージの近いサイトやページを共有し合う
自分の場合はまだ手が遅いため難しいが、簡単に実装して確認してもらうのもいいかも
1日実際に進めてみてわかったのが、 デザイナーが「こんなことはwebで表現できないかも」と思い、 アイデアを意識的・無意識的に変更してしまっている場合があるということ
僕はできることなら、デザイナーが思いついた表現は100%実装できたら良いなと思っている。 とりあえずアイデアを全部ぶつけてきてほしいと思っている。 遠慮されずにあれこれ言いたくなるエンジニアになりたい。 その上で、エンジニア目線で面白いアイデアを出せたらいいなーとも思う。 ->この辺りについては後日ちゃんとした文章で書きたい。 デザイナー向けのプログラミング入門勉強会とかしてみたい。
文字の色をグラデーションで変えたい 普通の文字なら、 color:rgba(0,0,0,0); background-image:url(); background-clip: text; で対応出来そう。 ->今回はデザインを施した文字を使うので、抜きたい部分が透明のpngを用意してもらった。 その後ろにbackground-color:lenear-gradient(); で指定。これで抜いた部分にグラデーションがかかる。 background-size:100% 200% にして、background-positionを順次変えていくことで、 抜いた部分のグラデーションがどんどん変化していくようになる。
書いた部分を抜くのを、クリッピングマスクというらしい。
transitionってどっちに書く？ -> .class{ width:100px; transition:width 1s ease; } .class:hover{ width: 200px; transition: none; }
とすることで、 通常100px -> hover -> すぐに200pxに -> leave -> 1sかけて100pxに
変更後にかかっているtransitionのルール(hoverした時なら:hover内のnone)に応じたアニメーションが施される。 よって、mouseleaveすると:hoverがなくなるので、width 1s easeのルールでアニメーションする。
