HTML5のinputタグ、range属性を触る機会があったのでメモ 素の状態 See the Pen input range type by tamoriinu (@yokoyama) on CodePen. CSSデザインを当てたもの See the Pen input range type by tamoriinu (@yokoyama) on CodePen. 参考: How To Create …

数多くの名誉ある○○メーカー 前に作ったポプテピピックの帯をカスタマイズできるようにした。 tamoriinu-3.hatenablog.com デフォルトでは某漫画家そっくりのフリー素材の方の画像になっているが、「画像を選択」ボタンで変更可能。 名誉あることを変更・追…

See the Pen 山手線 by tamoriinu (@yokoyama) on CodePen. この間見つけた以下のsass mixinが便利なので、山手線の沿線図を描いてみた。 Placing Items on a Circle | CSS-Tricks 吹き出しの位置とか結構適当。 色々他にも応用できそうな気がする。

github.com jp.vuejs.org タイトル通りでケバブケースかすべて小文字にする必要がある。 HTML attributes are case-insensitive だから。 なのでカスタムイベント以外のpropsに渡す値なども、ケバブケースにする。（ちょっと面倒臭い） 【動かない例】 jsfid…

qiita.com 上記のカルーセルを少しだけ変更。前後で端まできたら一巡するようにした。 それだけ。 See the Pen vuejs_carousel2 by tamoriinu (@yokoyama) on CodePen.

v-model を使うとStoreを通さずにdataが変わってしまう。 Storeパターンの制約を守るために以下のように:valueを更新する必要がある。 See the Pen Storeパターンにおけるv-modelへの対処 by tamoriinu (@yokoyama) on CodePen.

Codegridの連載を元にちょっとだけ変えたもの。 複数選択するとandで絞り込むSee the Pen playerSelecter by tamoriinu (@yokoyama) on CodePen.

前職ではいわゆる静的なWebサイトを主に作成していたので基本jQueryで事足りていたのだが、Webアプリ制作会社に移ってからはプロジェクトにVue.jsが使われており、Vue.jsのレールに乗るような書き方をする必要が出てきた。 最初は完全にjQuery脳だったためVu…

See the Pen data filtering by vue.js by tamoriinu (@yokoyama) on CodePen.

gihyo.jp上記の「フルーツの名前をリストするコンポーネント」を、記載されているコードを 元に作成してもエラーになる。（vueのバージョン1系でも2系でも駄目） どうにもスッキリしないので動くように直した。