CSS transformのmatrix()を一瞬で 完 全 理 解 できるやつ作ったよ。 | Ginpen.com

2018/11/14 65 users Matrix CSS Transform 一瞬 https

というわけでお探しのはこちらです。 Understanding transform:matrix() https://understanding-transform-matrix.ginpei.info/ スマホでも存分にご理解頂けます。 見た目 こんな感じ。 pic.twitter.com/GsxurJJbKI — 高梨ギンペイ (@ginpei_jp) November 13, 2018 この動画だけでも十分理解できそう。 matrix() とは 動... 続きを読む

DevToolsでz-index一覧できるやつ作ったよ。 | Ginpen.com

2018/06/21 99 users DevTools index ヤツ

Chrome用とFirefo用です。 GitHubでソースコード公開してます。 ginpei/devtools-z-index 見た目 Chrome版。 Firefox版はサブペインじゃなくてパネルとして追加するのでちょっとアレです。仕方なかった。 はじまり コードスニペット版。これはこれで手軽でよろしいね。 ページ中の要素を `z-index` の数字が大きい順に一... 続きを読む

JSファイル全体を括るfunctionについての話。（JavaScriptおれおれAdvent Calendar 2014 – 01日目） | Ginpen.com

2014/12/01 240 users function グローバルスコープ スコープ 変数 関数

これですね。これ何か呼び方あるの？ なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ（変数の有効範囲）は関数単位（function(){～}）になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変... 続きを読む

スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ！（Frontrend Advent Calendar 2013 – 06日目） | Ginpen.com

2013/12/06 430 users ハードウェアアクセラレーション Polymer GPU 周回

この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。（これ今後数年で大流行りしそうに思うので、未読なら是非！） さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが（周回遅れ）、いざアニメーションを実装してみても、なかな... 続きを読む

CSSアニメーションを勉強しないとなーと思いつつまだやってない人のために、五分くらいでぱっと分かるCSS Animationを説明するよ。 | Ginpen.com

2013/10/28 116 users Ｔｒａｎｓｉｔｉｏｎ CSSアニメーション マウスホバー

いえーいCSSでぐりぐり動かしてますか！ やろうやろうと思いつつなかなか手が出ないなんて事もありますが、CSS Animationについてそんな人のための簡単な導入です。 CSSでのアニメーションは二種類 実はCSSのアニメーション、と言っても二種類あります。 transition … マウスホバーとかの操作時に動くやつ animation … ずっと動き続けるやつ プロパティは割と似てる 今のと... 続きを読む

CSSでグラデーションを使うときにhsl()が便利すぎる。（CSS おれおれ Advent Calendar 2012 – 19日目） | Ginpen.com

2013/06/02 61 users hsl linear-gradient CSS オレオレ 色相

CSS おれおれ Advent Calendar 2012 – 19日目 CSS 3では色の指定にhsl()を使う事が出来ます。すなわち色相 (Hue; 0-359)、彩度 (Saturation; 0%-100%)、輝度 (Lightness; 0%-100%) による色の指定です。さらに不透明度を加えたhsla()もあります。 グラデーションをlinear-gradient()で実現するとき、... 続きを読む

jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com

2013/05/07 317 users jQuery submit Ajax jquery.ajax

仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するっての... 続きを読む

CSSでiOS風の選択ボタンをつくるチュートリアル。（CSS おれおれ Advent Calendar 2012 – 10日目） | Ginpen.com

2012/12/11 71 users rAdio Label チュートリアル CSS Name

CSS おれおれ Advent Calendar 2012 – 10日目 iOSの選択ボタン。HTMLでいうラジオボタン的なもの。”Segmented Control”というらしいです。 Segmented Control風ラジオボタン。 HTML こんな感じです。 <p> <span class="segmented"> <label><input type="radio" name="frui... 続きを読む

width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目） | Ginpen.com

2012/12/05 660 users position width 横幅 横スクロールバー CSS

CSS おれおれ Advent Calendar 2012 – 05日目 横幅いっぱいに広げようとしてwidth:100%を指定したら横スクロールバーが出ちゃった、という経験ありませんか？　その原因と仕組み、回避策についてお話しします。 わりとFAQな感じ。これは是非覚えておいてもらいたいです。というか知っておいてください。 はみ出した例 position:absoluteないしposition:... 続きを読む

jQueryの$()が多機能すぎる件について。5種類も仕事があるよ。（軽めのjQuery Advent Calendar 2012 – 01日目） | Ginpen.com

2012/12/01 146 users jQuery expression CONTEXT API

軽めのjQuery Advent Calendar 2012 – 01日目 jQueryってあるじゃないですか。便利ですよね。いろんなところで紹介されてるっていうかもう普通に使われてると思うんですけど。 jQuery() APIについてはこちら。 jQuery() – jQuery API jQuery(expression, context) – jQuery 日本語リファレンス jQuery(... 続きを読む

典型的なJavaScripter3+1種類と、それぞれの勉強法。 | Ginpen.com

2012/11/13 465 users JSer CSS 独断 Flash 偏見

一口にJSerといっても、色々な分野の人がいます。そこで、独断と偏見……というか主に偏見で三種類にまとめてみました。 あなたはどのJSerになりたいですか？ 三種類 アニメーションを作る人 アプリを作る人 サーバ側を作る人 基本的にプログラマ視点です。コーダー視点も最後に。 では、それぞれ見てみましょう。 アニメーションを作る人 Flashの代わりにJavaScriptやCSSを使う人。Flash... 続きを読む

jQuery 1.8の更新内容をまとめたよ。 | Ginpen.com

2012/08/13 356 users ベンダープレフィックス CSS 諸々 jQuery Blog

個人的に油断してたんですが、jQuery 1.8がリリースされましたね。 CSSのベンダープレフィックスを自動でほぼ補完してくれるようになったのが目玉機能でしょうか。作業量としては、セレクターエンジンSizzleとアニメーション関係を全面的に書き換えた事が大きそうです。なお諸々強化されているにも関わらず、ファイルサイズは減っています。（ちょっとだけどね。）　えらい！ jQuery Blog » j... 続きを読む

jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。 | Ginpen.com

2012/05/21 1011 users input要素 jsdo.it jQuery 共通 要素

必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通：要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽... 続きを読む

RSpecでRailsのテストをしてみるテスト。 | Ginpen.com

2012/02/14 84 users Rails rspec テストフレームワーク unit テスト

めもめも。 この記事はRubyもRailsもよくわかっていない人が自分のためのメモとしてだらだら書きました。リファレンスがよくわからなかったので、動かして試してみた感じです。 RSpecは（Railsに限らず）Rubyで動くテストフレームワーク。Railsに最初から入ってるTest::Unitよりも色々と良いらしい……けどそっちも使った事がないので比較はできません。 RubyじゃなくてRailsか... 続きを読む

JavaScriptをもっと上達したい人へ、最後のヒント | Ginpen.com

2012/01/25 76 users Engineer ヒント CSS JavaScript ドラム

高梨ギンペイ Takanashi Ginpei Follow @ginpei_jp RSSを購読 JavaScriptとかCSSとか書くよ！　フリーのWebエンジニアです。あとドラム叩きます。the pillowsが好き。 / Freelance web engineer, good at JavaScript and CSS. もっともっと... 続きを読む

JavaScriptをもっと上達したい人へのヒント（JavaScript おれおれ Advent Calendar 2011 – 24日目） | Ginpen.com

2011/12/24 384 users フレームワーク ライブラリー プログラマーさん オレオレ

JavaScript おれおれ Advent Calendar 2011 – 24日目 JavaScriptを書くプログラマーさんでも、JavaScriptも書くデザイナーさんでも。 僕なんかがおこがましいとは思うんですが。 いっぱい書く とにかく書く事です。何でもいいです。作りたいものがあれば作ってもいいし、面白そうなものを見かけたら真似してみましょう。 ライブラリーやフレームワークは躊躇なく使... 続きを読む

404 Blog Not Found:javascript - instanceofでは不十分な理由とtypeof()の再^3発明

2011/12/21 50 users typeof instanceof Object 一理 区別

一理あるけど… JavaScriptの型は6種類だけど大きく分けた2種類を絶対に覚えておくべき（JavaScript おれおれ Advent Calendar 2011 – 20日目） | Ginpen.com typeof(null)がobjectだったりするのはどうかと思いますが、ArrayとObjectの区別がつかなかったりするのはいいんじゃないですかね。そういうのはinstanceofの領... 続きを読む

jQuery 1.7の更新内容をまとめたよ。 | Ginpen.com

2011/11/04 421 users jQuery Core jQuery API 6.x 変更

jQuery 1.7が公開されたので、早速1.6.xからの更新内容をまとめてみました。 jQuery: » jQuery 1.7 Released （リリース記事） Version 1.7 – jQuery API （公式ドキュメント、1.7で変更があったもののみ） 1.7 all tickets – jQuery Core – Bug Tracker （1.7の全チケット） リリース記事の翻訳じ... 続きを読む

とてもとても簡単な、jQueryプラグインのつくりかた。 | Ginpen.com

2011/10/26 83 users 引数 jsdo.it jQueryプラグイン つくりかた たび

先日Yokohama.jsでちょろっとお話しして来ました。 先に完成品 こんな感じのものをつくります。 とてもとても簡単な、jQueryプラグインのつくりかた。 – jsdo.it – share JavaScript, HTML5 and CSS 仕様 クリックするたびに色が変わる、というものにしましょう。色は引数で渡します。 こんな感じで使います。 $('.rotate_colors').ro... 続きを読む

CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。 | Ginpen.com

2011/10/12 213 users prop attr jQuery CSS 苦手

CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。 もちろん、そうでない方にも親しんで頂きたいと思います。 最近この記事が話題のようです。 CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました この記事中にjQuery 1.6/1.6.1での .attr(... 続きを読む

jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。 | Ginpen.com

2011/05/20 102 users attr prop 後方互換 メソッド 議論

先日jQuery 1.6がリリースされましたが、案の定.attr()関連で議論になったようで、一週間後に後方互換を保つ更新が行われました。 jQuery: » jQuery 1.6.1 Released 1.6の更新内容は先日の記事をご覧頂ければ。 jQuery1.6の更新内容をまとめたよ。 | Ginpen.com 更新内容 jQuery 1.6では.prop()メソッドの追加と.attr()メ... 続きを読む

jQuery1.6の更新内容をまとめたよ。 | Ginpen.com

2011/05/04 136 users jQuery1.6 更新内容

昨日jQuery1.6が公開されたので、その内容をまとめてみました。 jQuery: » jQuery 1.6 Released だいたい原文にそってますが、翻訳ではありません。 変更点 既存コードに影響がある変更がいくつかあります。 data-*属性の自動マッピング ハイフン “-” を含む名前のとき、jQueryのdata()メソッドからアクセスするにはキャメルケースに変換してやる必要がありま... 続きを読む

CSS3のWeb Fontを使ってみたよ。 | Ginpen.com

2011/02/28 112 users fonts Web Font フォント CSS3 マシン

英語だけですが……、Google web fontsのリソースとGoogle Font APIを使うと、簡単にWeb Fontを使って、文字のまま装飾する事ができます。Web Fontって？CSS3で追加される機能で、サーバーに置いたフォントを使ったデザインを作れるようになるものです。今までもフォントを指定することはできましたが、利用者のマシンにそのフォントがインストールされていないと無意味でした... 続きを読む