Animate.css 機能一覧

css3

Animate.css CSSアニメーションのフレームワーク Animate.css の一通りの機能を試せるものを作った。上記のトップページで同じことができるが、セレクトボックスから機能を選ぶのが面倒だったのでラジオボタンにした。 See the Pen move box(with animate.…

2018-10-22

HTML5 inputのrange属性

javascript vue.js css3 html5

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 …

2018-10-06

Rubyのメソッド探索

ruby

Rubyがメソッドを探索する流れについて、色々な本やWebサイトをあたってみた。 www.shoeisha.co.jp 最初に読んだのがこの本だったと思う。第2章クラス、オブジェクト、モジュール項目6 Rubyが継承階層をどのように組み立てるかを頭に入れようがメソッド…

2018-07-20

本田さんのFizzBuzz

ruby

alfalfalfa.com 本田さんプログラミングの勉強しているってことは、FizzBuzz書いたりしているのかな、でも本田さんならこんなFizzBuzz書いてるんじゃないかなと妄想

2018-07-18

URLをパースしてくれるライブラリ

javascript

UdemyのVue.js講座を見ていたら以下のライブラリが便利そうだったのでメモ。 medialize.github.io thebaker.hatenablog.com

2018-06-26

Ruby で順列を求める

ruby

A, B, C, D, Eの5人から4人を選んで一列に並べる場合の並び方はいくつ？いわゆる順列の問題。Rubyにはpermutationメソッドがあるので、これを使って簡単に求められる。 https://ref.xaio.jp/ruby/classes/array/permutation # 5人から4人を選んで一列に並…

2018-04-30

【ポプテピピック】数多くの名誉ある○○メーカー

vue.js プログラミングアニメ

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

2018-03-21

ポプテピピック「数々の名誉ある賞」の載った帯の再現

css3

ちょっと前に話題になった、ポプテピピックの「数々の名誉ある賞」の載った帯をhtmlにした。これを元にちょっと遊べるものを作る予定。 See the Pen 【重要】数多くの名誉ある賞 by tamoriinu (@yokoyama) on CodePen. 元ネタ omoganews.com

2018-03-18

山手線を描く

javascript vue.js css3

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

2018-03-18

vue.jsのカスタムイベントの名前はキャメルケースでは動かない（例外あり）

javascript vue.js

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

2018-03-10

円状に並べたdotが点滅するやつ

now loadingなどでよく使われるものをcssで作成。 See the Pen flashing circle by tamoriinu (@yokoyama) on CodePen. 以下参考 Bouncing loader 30 Seconds of CSS 要素をcircle状に並べるmixin（これは結構便利） Placing Items on a Circle | CSS-Tricks