変数にをHTMLタグとして書く
- var text = "hogehoge<br>hogehoge"
p=text //- <br>がそのまま文字としてでる
p!=text //- <br>が改行タグになる
https://puchutech.hatenablog.com/entry/css-filter
$hoge = 10
$huga = 2
margin-top "calc(100% - %s / %s)" % ($hoge $huga)
https://teratail.com/questions/127558
white-space: pre-wrap
word-wrap:break-word
white-space nowrap
@kayframe 定義
@keyframes AnimationName
from
opacity 0
to
opacity 1
@keyframes AnimationName
0%
opacity 0
50%
opacity 1
100%
opacity 0
Animationタグ
引用> https://qiita.com/7968/items/1d999354e00db53bcbd8#no09-animation-プロパティ
(Animationについてはこの記事だいたいまとまっている)
セレクタ名 {
animation: animation-nameの値 animation-durationの値 animation-timing-functionの値 animation-delayの値 animation-iteration-countの値 animation-directionの値 animation-fill-modeの値 animation-play-stateの値;
}
セレクタ名 {
animation: 名前 開始から終了までの時間 進行の度合い 開始時間 繰り返し回数 再生方向 開始前・終了後のスタイル 再生・停止;
}
janpaepke/ScrollMagic#337
scroll magicのトリガーの位置を%で指定したいときはoffsetじゃなくてtriggerhookに0.0~1.0の値を入れる
const waitLoadingImage = (src)=>{
return new Promise((resolve)=>{
const image = new Image();
image.onload = ()=>{
resolve();
}
image.src = src;
})
}
https://qiita.com/cress_cc/items/3e820fe1695f13793df3
function yyyymmdd(y, m, d) {
var y0 = ('000' + y).slice(-4);
var m0 = ('0' + m).slice(-2);
var d0 = ('0' + d).slice(-2);
return y0 + m0 + d0;
}
いつもつかうやつ
https://github.com/js-cookie/js-cookie
import Cookies from 'js-cookie'
Cookies.set('foo', 'bar')
Cookies.set('name', 'value', { expires: 7 })
Cookies.get('name')
Cookies.remove('name')
いろいろ検討したけどカルーセルはこれが一番いいと思う
https://github.com/surmon-china/vue-awesome-swiper
https://hafilog.com/vue-for-loop
Vueコンポーネント再描画の方法
keyに値入れておいてそれを更新すると再描画される。
なのでdataに変数をもっておいて、更新したい時変数をインクリメントするなどした。
https://stackoverflow.com/questions/12637239/repeating-an-image-within-a-svg-mask
https://codepen.io/dudleystorey/pen/QvvEYQ
https://github.com/minoryorg/Noto-Sans-CJK-JP
https://qiita.com/hojishi/items/12b726f8b02ef3d713e4
https://www.cg-method.com/entry/photoshop-detect-fonts/
pngquant
フォルダを再帰的に読む方法
https://stackoverflow.com/questions/9647920/recursively-batch-process-files-with-pngquant
findで探してパイプする
find {dir} -name '*.png' -print0 | xargs -0 -P8 -L1 pngquant --ext .png -f --speed 1
実行前に対象ファイルを確認したいときは以下のようにechoすれば良さそう
find {dir} -name '*.png' -print0 | xargs -0 -P8 -L1 echo
xargsのオプション、-0はデリミタ文字(不要文字?)の削除 -Pは同時実行可能数 -Lは展開可能数らしい
xargsのオプションいろいろ
xargsのオプション無し、-Iオプション、-0オプションの挙動に関する勘違い
jpegoptim
再起云々はpngquantと同じでできる。
以下のリンクはjpgoptimの画質設定の比較。95くらいにしないとかなり劣化する
https://blog.ideamans.com/2017/11/jpg-diet-jpegoptim.html
よってコマンドは
find {dir} -name '*.png' -print0 | xargs -0 -P8 -L1 jpegoptim --strip-all -m95 -t
確認は
find {dir} -name '*.jpg' -print0 | xargs -0 -P8 -L1 echo