はてなブックマーク

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。 たまーに実装するクリッカブルマップ。 もう枯れた技術になりつつあるのか、レスポンシブ対応するとなるとプラグイン選びが意外と悩まかったりします。 定番の「jQuery RWD Image Maps」が正直微妙 長く定番だった「jQuery RWD Image Maps」ですが、時代は脱jQuery。 案件によってはパフォーマンスなどの観点から、jQuery非依存でレスポンシブなクリッカブルマップを実装したいんじゃ！ というシーンも少なからずあるんじゃないかと思います。 ただこのプラグインにはそれ以外にも（個人的に）致命的に使いづらい点があります。 jQueryのバージョンに依存する 「jQuery RWD Image Maps」は古いプラグインのため、jQueryのバージョンが新しいと動作しないケースがあります。 ※jQu

モーダルウインドウを背景固定にしてスクロールバー分のガタつき問題を解決しつつ、iOS Safariにも対応してしかもjQuery非依存にしたいワガママなアナタへ捧ぐ愛のコード JavaScript こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。 もはやモーダルウインドウの実装なんて当たり前の要件となってきた昨今、 サクッとプラグインを使えば、世の中の優秀なフロントエンド開発者が実装した機能を簡単に使うことができますね。 ただそれでも、JSに対する興味や情熱から、自前のコードで実装したいなんてこともあるかもしれません（無い？）。 今日はそんなお話。 追加機能が増えると意外と悩ましいモーダルウインドウの実装 モーダルウインドウは単に表示するだけならかなりシンプルに実装が可能です。 過去当サイトでは以下の通りjQuery版・jQuery非依存版で超シンプルなモーダルウインド

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。 こまのんVue（※こま（けぇこたぁいいんだよ）のん（びり）Vue（.js超入門））第3回。 第1回、2回ではちっとも楽しさを感じられなかったVue.js。 今回、もしかするとそんなあなた（そしてぼく）のアンテナがピクリと反応するかもしれません。 ディレクティブによるデータバインディングとメソッド 後述しますがディレクティブというのはHTML中に出てくるv-○○の部分のこと。 vueでアレコレするためにHTML側から出すサインのようなものです。 イメージの湧きにくい横文字かもしれませんがただそれだけのことなんで、まずはソースを見ていきましょう。 Resultもいじって見て下さい。 やっていること ボタンクリックでイベントを発生させる そのイベントでテキストを「ごちそうさまでした」に変更 そのイベントでボタンテキストを「済」

CSS transform / opacity / transition 周りの意図しない挙動・不具合・バグフィックスまとめ [ 随時更新 ] CSS こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。 要素をアニメーションさせる時に毎度お世話になるCSSのtransformやopacity。描画とロジックをCSSとJSに分離するためにも、なくてはならない存在だと思ってます。 しかし多用した場合、他のソース部分と干渉して意図しない挙動になることもしばしば。毎度毎度調べるのも面倒なので記事で簡潔にまとめていくことにしました。 あくまで自分用メモなので解説は少な目かつ順不同です（苦笑）。 意識しておいた方が良い前提 transformやopacity指定をした要素はスタックコンテキストを生成する スタックコンテキストとは何ぞや？というのはMDNさんにでもお任せするとして… 重

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。 個人的にテキストアニメーションが好きです。 このサイトでも「Textillate.js」というプラグインを使用してますが、もっとさりげないエフェクトのものが欲しいな〜と思っていました。 Textillateもいいんですけど、ちょっと動きが大げさなんですよね。 というわけで。 エフェクトも実装もシンプル！軽量テキストアニメーションjQueryプラグインを作ってみた 多機能ではないですがちょっとしたJSとCSSの記述で使用できます。 名付けて「Textyle.js」（テキスタイル）。 シンプル機能なので当たり前ですがサイズも1KB以下と軽量です。 詳細は後述しますが、上下左右（斜め含む）からの移動とフェードが可能。エフェクト後に発生させるコールバックの指定も可能です。動きは↓こんな感じ。 特徴 指定要素内テキストをプラグイン

コピペで実装！脱jQueryでも簡単モーダルウィンドウ［HTML / CSS / Javascript］ CSS こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。 以前書いた↓の記事。おかげさまでこのサイトトップクラスでアクセスの多いエントリーとなっていますmm コピペで実装！モーダルウィンドウのサンプル［HTML / CSS / jQuery］ 非jQuery依存のモーダルウィンドウサンプル 脱jQueryが叫ばれて久しいですが、今回は非jQuery依存のモーダルウィンドウサンプルとしてコードを書き換えてみました。 機能的には以前と同様。 最低限のスタイリング＆領域外クリックでモーダルクローズ機能を備えています。 見た目は好きにカスタマイズしてもらえれば宜しいかと。 よくわからない方も安心して下さい。コピペで使えますよ（ﾆｯｺﾘ）。 [注意（iOSデバイスでデモを確認

こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。 様々な条件で要素を指定できる疑似クラス。便利です。 大体が感覚的に使えてわかりやすいんですが、一部気を付けるべきものもあります。 何となくどういう挙動をするかはわかっていても、実際使ってみると？？？となることもしばしば。 というわけで今日はnth-of-type疑似クラスのちょっとした注意点です。 nth-of-type指定が意図する挙動と違う！その仕様とは 考え方・前提として、名前の通りこの疑似クラスは指定した要素のタイプに深く関係します。 んで、これがわかっていないと下記のような使い方をした場合に混乱してしまいます。 See the Pen nth-of-typeがうまく効かない？？ by mycreatesite (@mycreatesite) on CodePen. 上記ではtargetという名前を付けたクラス名

こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。 モーダルウィンドウ（ポップアップウィンドウ）の実装はついついプラグインに頼りがちですが、そういったものに頼らずに実装するケースもあります。 その度に一からコーディングするのも少し手間なので自分用も兼ねてプレーンなモーダルウィンドウのサンプルコードを残しておきます。 プレーンなモーダルウィンドウサンプル モーダルにも色々な仕様があるので実際は仕様に合わせたカスタマイズが必要になると思いますが、本当にプレーンなもので良ければ↓のコードそのままでもいいかと。 必要に応じて各指定を要カスタマイズです。 最低限ですが、領域外クリックでモーダルを閉じる機能のみ付けています。 See the Pen pure modal by mycreatesite (@mycreatesite) on CodePen. ↑をカスタマイズしたものが