今日のメモ2017/12/26
font-feature-settings:"palt"; これで句読点やカッコのスペースを詰められる
font-size:0; letter-spacing:0; レタースペーシングを広げた場合もinline-blockの改行で隙間にできる
text-align:rightで右に配置していた文章をフォントサイズやレタースペーシングをいじったせいで文章がガタガタになったが、 文章をもつ要素にtext-align:justifyでいい感じに収まった。
簡単なhtmlならすっと組めるようになっていた。 合計8枚ある写真を、横に3枚ずつ並べ、真ん中の写真の中心をブラウザの中心通るようにして配置し、 あまりの二枚は真ん中と左に寄るようにーが素早く組めるようになっていた。 一ヶ月前ではかなり時間がかかっていただろう事だけに、とても嬉しい。
jqueryのanimateで使うeasingは自作できるらしい。 jQuery.easing.myEasing2 = function(x, t, b, c, d) { return x === 1 ? 1 : 1 - Math.pow( 2, -10 * x ); } と定義しておけば、myEasing2で呼び出せるようになる。
pxは画面の解像度のあのピクセル。 ptは印刷で使われてきた単位らしい。 1pt = 1/72インチらしい。
jqueryオブジェクトのcssの一気に追加する方法 $(セレクタ).css({ "background" : "red", "color": "blue", });
jqueryで動的に追加された要素に対してイベントを紐付ける場合は $("document").on("click",".target",function(){ //action; }); でいける。
mediaqueryのmin-widthの数値は「を含む」指定。 @media screen and (min-width:0px) and (max-width:100px) みたいに記述。これなら0pxから100pxのときに適応される。
white-space: nowrap; を親要素にもつinline,inline-blockの子要素は折り返さない。
@mediaつかって上書きする、left:50がimportantを使わないと上書きできなかった？ 他のプロパティは上書きできた ->ケースを探して後日検証。
inline-blockの要素を、100%になるようにして横並びにさせていたが、(43.5%と56.5%のように) ある部分で100%を超える内容になってしまった。 どう対策していいかわからないので片方の横幅パーセンテージを少し落とした。(43.5% , 56.4%)
ポインタ乗せたら変化する事をロールオーバーっていうらしい。 ボタンの色が変わったりするあの現象自体をいうらしい。
中央寄せにしたい要素が中央によらない。 かなりハマったので一旦捨てる。なくても動くは動くので捨てる。 とりあえず完成させる事を目指す。
パラパラと画像が何枚も順次表示されるのをループで。必要な型で画像パスを差し替えるだけでパッと利用できるように。 パラパラするところまではいけた。2時間くらいでいけた。
今日のメモ2017/12/25
どうしたら自分の時間設定が上手くいく？ 何分かかるかの見通しがまだできないし、100%時間を使いきれていない感じがある。 時間を100%有効に使うには？ この作業にはこれくらいの時間をかけてみようと毎回考えながらやってみる ぴったりに収まるようになってきたらとてもいい。そこから更に時短できればもっと素晴らしい。 明日からこの作業にどれくらい時間をかける、をやってみる。
15分でできる単位に分解してtrelloで管理 成功/失敗を評価、する仕組み作りたい。 トレロだと機能単位で管理している感があるから。 タイマー付きで、何回ごとに休憩はさんだりとかできるように。 100%フルコミットできるような。
時間管理やってみたけど、全然上手くいかない。 予定通り進まなさすぎてつらい。 どうしたらいいかわからないのが困る。 テディベア方式だったかをやってみる。 詰まった時はどういう問題が今起きているのかを明文化するやつ。 ベアプログラミングというらしい。
現在の問題は、 端末によって、css 製アローアイコンの表示がずれてしまう問題。 iPhoneXだとずれない。多分750pxで作っているから。 zoomのせいでずれている気がする。 線が細くなったりするのはもしかしたら仕方ない？一旦置いておくのもいいか。 ずれてしまっているのはどうにかしたい。 topとbottomでずれるのは良くない気がする。 androidだけでずれている。 topを30degにして、 bottomを31degにすると合う。 しかしそうするとiphoneでずれる。
進まないので一旦捨てる
年賀サイトのPCとスマートフォンはデザインも結構違う上にすべての写真を大きいものに差し替えるので、 PCはソース別で作る。 で、.htaccessでUAをとってふり分ける。
font-heightに於いて、 数値のみで指定すると1.5なら150%と同値になる。
font-sizeはブラウザで最小が決まっているが、transform:scaleを使えばさらに縮小できる。
本文のところまとめきれなかった。 デザインで上がってきたフォントが思ったより小さく、 上手く横にならべられない。 変なスペースが空いてしまう。 transform:scaleによる隙間かと思われる。これをしっかり並べる。 のは難しそう。
before要素に padding-top:75%と指定すると、widthの幅の75%が保証される。 なので、中身がabsoluteだけで構成されていても調節ができるようになる。
OGP画像 Open Graph Protocol ツイッターやフェイスブックなどのハイパーリンクと一緒に表示されている画像とかのこと
デザイン系の会社で初の飲み会に参加した
今年の忘年会はうまい肉を食うことになったらしい。
自分はまだ、使えるかどうかを試されているアルバイトの身なので、 忘年会行きたいです！！とはとても言いにくかったが、「くる！？」と誘ってもらったので行ってきました。 人生で食べた焼肉の中で一番美味しかった... シャトーブリアンは人生初だったかもしれない。
が、流石はいい肉。脂ものっていてすぐにお腹がいっぱいになった。 めちゃくちゃうまいのに食べられないジレンマ。
参加メンバーのうち、二人が年賀状の本稿？を刷りに遠くまで出かけており、 かつ渋滞に巻き込まれてしまったために、退店40分前に到着。 二人ともほぼ徹夜だったのにもかかわらず、脂を胃に放り込み、この後始発まで一緒に騒ぐことになる。 今年で25歳になった僕の約10歳年上の二人だが、本当にすごい。 他の参加メンバーも結局朝の6時までに肉を食べて酒を飲んでボウリングをしてカラオケまでこなしたのだから、すごい。 自分はというと前日もそれなりに寝ていたのにヘロヘロになっている。
そんな飲み会の中で刺さった話などをまとめておく。
僕に対して代表がいいな、と感じたのは、 ・ふとクロアチアに一人で行こうとしたりするそのフットワークの軽さ ・コードの美しさは差し引いても、制限時間内にカタチにすることができたという事実 らしい。 性格についても褒めてもらえた。 デザイナーの意図する動きを作りたい、と思えることはフロントエンドとしてあまり多くないケースらしいので伸ばしていきたい。 自身、クリエイターに憧れている部分があるのでデザイナーの考えていることや見えている世界を早く取り込みたいと思っている。
代表としての自分とクリエイターとしての自分 経営者としては残業させたくないし、しっかり睡眠を取ってほしい。 が、クリエイターとしての自分としてはもっと一緒にガンガン楽しいことをしたい、いいものを作っていこうぜ、と言いたい。らしい。
君らは2年後絶対に化ける。その可能性を感じたからこそ採用した。 僕とほぼ同世代のアシスタントディレクターとアシスタントデザイナーがいるのだが、 その3人に向けて言ってくれた言葉。 若いからこそ知らなくて当たり前、だから聞いたら社内/外を問わず教えてくれる人は沢山いる。 恥ずかしがったりせずにどんどん聞いて、吸収するべき。 プラス実践を積んでいけば確実に界隈ではモテる存在になれる。 だからこそ、今からでも離れていかないようにする方法を経営者の自分としては考えなくてはならないくらい。とのこと。 それだけ自分たちのことを見てくれていたのが嬉しかった。 そして期待されていることが嬉しい。 大きく期待を超えられるようになりたいと思っているし、そう思わせてくれているのが嬉しい。
何日もかけたらいいものができるのは当たり前。それをもっと短い限られた時間でできるようになれるなら価値がある。 代表が元いた会社でスーパーマンな経営者に言われた言葉らしい。
理不尽に思える作業があるかもしれないが、デザインに関しては確実に結果に結びつくと思ってやっている。不安ならすぐに聞いてほしい。ちゃんと答えられる自信があるからこそ実行しているから。 しんどくなったとしても絶対に結果に結びつくから、その喜びを知ってほしい、とのこと。
欲しがれ！欲しがるならなんでもあげたい。
とにかくアツかった。 全員がかっこよかった。 それぞれの信念があって、得意な分野があって、苦手なこともあって、 掛け合わせあいながら、補い合いながら、この輪に入って大きな仕事をこなせたらもっと楽しいんだろうなあとずっと考えていた。 いいものを作りたい、と全員が思っていて結果に結びける能力があって、 というメンバーと一緒に仕事できていたことがとても幸せ。 僕自身も自分らしくありたいし、それを伸ばした上で更にいろんなことをできるようになって、 楽しみたい。
そのためにはまず手を早く動かせるようになりたい。 変なところでつまづかないようになりたい。 英語がもっとできたら読める文章が増えるなあとは痛感させられている。 一度つまづいたところもちゃんと技術として吸収してマスターしていければ、早くなるはず。 早く進められればそれほど時間が取れて、よりよい動きを追求する時間に充てられる。
酒も入っていたためにうろ覚えな部分や今は忘れている部分があるかもしれないのが悔しい。 けど、とにかくアツかった。 アツくてかっこいい人たちの中で一緒に何か進めていけるならこれ以上の幸せはない。
とりあえず週明けに面談。内容は今回のアルバイト期間は12月いっぱい、ということだったので これからどうするか、ということ とってもらえるならどんどん吸収させてもらいたいし還元したい
眠いので寝る！！！
週明けから、今やっている年賀サイトを3日間で完成、という図が到底見えない...。 もっと密度の濃い作業時間になるようにしたい。
今日のメモ2017/12/22
実装実装実装の１日だった。 そしてやはりスマートフォンのデバイス毎の表示の違いの問題に悩まされた。
昨日の横に開けるスライドはできた。 スライドをいい感じにする。 スライドしてパッとメインコンテンツが出てくるように、 ロードの間で後ろにレンダリングしていくようにした。 後ろに要素自体はあるのでスクロールできないようにモーダルの後ろにあるメインコンテンツをposition:fixedにすることでスクロールは止められた。 が、しかしながらiphone7やiphoneXで、webフォントのフォントサイズが崩れるという事態が起きた。 ロードのタイミングの問題なのだろうか。
webフォントはfonts.comのCDNを使っている。 フォントのロード完了のタイミングを知るためにwebfontloaderを使っている。 が、組み込み方が悪いのか、ロードが終わらず、タイムアウトも走らない時があった。
afterは元の要素が親要素の役割。 top:0なら親のtop:0にくっつく rotateする際の基準点をtransform-originで動かせる
mixinの使い方を忘れたので練習 @mixin name(arg){ @content; }
keyframesに引数渡したいところ。いい方法を探す。
cssに複数のアニメーションを登録したい 条件1で右から出てきて、 条件2左へ抜けて、 条件3で形を変える とか。
jqueryをつかわずにネイティブで書いてみる $(window).scroll()は document.documentElement.scrollTop || document.body.scrollTop らしい。
今日のメモ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を減らしていくことで、削れていくように見えた。
年賀サイトを進めているが、年内に終わるか本当に心配。 ということで人生で初めて終電まで働いた。 眠いと完全に効率が落ちている感じがするので良くないなーとは思いつつも、 完走できるかも怪しいレベルなので頑張らねば。
今日のメモ2017/12/20
自社サイトのコーディングを行った。
コンテンツの出現時に浮遊感を与えたい。 例えば http://taotajima.jp/works では全コンテンツがスクロールに合わせて上下している。 参考に中央の2項目が真ん中にきていて、 下スクロールなら上のものは離れていき、下のものがくっついてくる 上スクロールならその逆が起きる。
widthを0から100にするanimationだと左から右に伸びる absoluteで位置を指定している場合はright:0を使うことで、右から左へ伸びるようになる。
前回はcanvasにjqueryで書いたハンバーガーメニューのアニメーションを 今回はcssで挑戦。
cssでabsoluteの要素に対してtop:20px、height:5px とすると、20pxから25pxに対しての高さになる。
真ん中からにゅにゅっと出てくるバツ印について、 cssのみでやろうとするとmargin:0 50% -> margin:0のアニメーションでがたつく 4本で中央からそれぞれ斜めに伸びる感じでやってみる うまくいかない。結構がたがたしてしまう。 アンドロイドとpcでがたつく。zoom倍率の問題？
https://codepen.io/designcouch/pen/hyFAD この辺とか参考になりそう
スクロール取得 https://nkmrkisk.com/archives/789 わかりやすい
スクロールすると$("targ").offset()が逐一変化してしまう。 ->zoomをかけていたせいだった。 $("targ").get(0).offsetTop; で行ける。
$(".targ").height();で高さが取れるが、heightが付いてくる ->parseInt( $(elm).css('margin-left') ); でpx取り除ける
zoomを使っているからか、offsettopが表示されている値と異なるので注意。 zoomにかけている比率をかけると実際に表示されている比率に合うようになった。
自分でpng書き出しやjpg書き出しもフロントエンドがやれるといいらしい。
自社の案件?を進める。 1時間で1ページのマークダウンいけるか挑戦 結局2時間半もかかってしまった。 もっと早く組めるようになりたい。
が、少しずつ早く組めるようになってきたような気がする。
今日のメモ2017/12/19
昨日の枠が出てしまう問題は一旦置いておく。 スマホで確認すると枠が見えない。(PCから確認しようとすると見える) PCのデザインを進めていく段階で探りを入れることにする。
今日はレスポンシブデザインと戦った日だった。 iPhone6の横幅解像度が750pxで、最近はそれ以上の機種もシェアを占めてきたということで、 デザイナーは横幅750pxで作業を進めていた。 今までは640pxベースだった。
で、用意された画像の横幅は510pxだったのだが、元々の大きさの画像をRetina用に2で割って3をかけたものらしい。 (このプロセスの意味がまだちゃんと理解できていない)
今回、デザイナーに「こんなのつくって」と渡された資料には、 横幅を750pxで考えた時にここのマージンは20pxで、画像の大きさは340pxでー と書いてあった。
なんとなく でcssをn%で〜と今までやってきたが、そういうわけにはいかない。
meta viewportをしっかり理解した上でどうするかを考える必要があった。
viewport
->widthで指定された横幅でhtmlを描画する。
width=250としてだったとすると、
幅750pxのデバイスで見ると、3倍引き伸ばされて表示されるため
のwidthが60pxになる。
viewport width=device-widthとすると、
デバイスの長さとしての横幅を取得できる。
よって、iPhoneなどでも実際の解像度は750pxでも実機の幅としては375pxの場合、
375pxとして描画してくれるようになる。
Googleはdevice-widthで指定して、その他要素を%で指定する方法を推奨している。
device-widthで指定した(もしくは取得した)数値は$(window).widthなどでも取得できるようになっている。(実際その幅で描画しているということ)
が、今回は750pxの時に〜という絶対値でもらっている。 width=750で対応しても良かったのだが、device-widthを使っておきたかったので jsでdevice-widthをとってきて、750pxとの比を htmlのzoomに入れた。 $('html').css('zoom', $(window).width / 750 ); そうすることで、もらった資料どおりにcssを組み立てられるようになる。
とりあえずスマホ版から作っているが、 windowをリサイズするたびに計算しなおせるようにーということだったので、 $(window).on('resize',function(){ $('html').css('zoom', $(window).width / 750 ); }); ともしておいた。
リキッドデザイン ->ウインドウサイズが変わると、中の要素の大きさも変わるデザインのこと レスポンシブデザインは、いろんなデバイスに対応させたデザインのこと
iphoneだと一番下の要素のmargin-bottomが効かない ->android/PCの場合はちゃんとmargin-bottomは効いていた。 調べてみたが解決方法がわからなかったので、無理やりもうひとつ下に要素を作って回避。 どうにかする方法はないのだろうか...
を思考停止でコピペしていたためにハマった部分 width=750として350のデバイスで表示させようとすると、ズームした状態で表示されてしまう。ピンチアウトすると思った通りのデザインになる。 より小さい場合は思った通りに動いてるっぽい。 もともと端末の幅が350だったとすると、 viewport=250 ->全ての大きさが, 350/250倍される。 viewport=500 ->全ての大きさが,350/500倍されているが、最初の画面ではみ出してしまう。 なぜはみ出すのか、でかなりハマってしまっていた。 ->inisial-scale=1.0を指定していたため。 initial-scaleを消すと思ったように動いてくれた。 あとpcではviewport効かない。 chromeならスマホモードにしたら効くようになった。
attrのwidthとcssのwidthの違い？ 特になし？ 同時に指定した場合にはcssの方が優先される。
hamburgerメニューを前回canvasにjavascriptから直で書いたが、 cssだけで実装できるようになりたい
