今日のメモ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時間くらいでいけた。