フロントエンドコーディング時に便利なジェネレーターサイト（随時更新） - Qiita
更新履歴 追加 2024/04/01 「Epic Easing」を掲載しました 2024/03/07 「Filter Blend」を掲載しました 2024/03/04 「Tooltips & Speech Bubbles」を掲載しました 2023 2023/07/04 「CSS Box Shadows Generator」を掲載しました 2023/06/29 「Regulex」を掲載しました 2023/04/05 「Colorable」を掲載しました 2023/03/09 「Scrollbar.app」を掲載しました 2022 2022/10/04 「CSS Shadow Palette Generator」を掲載しました 2022/09/07 「Wayback Machine」を掲載しました 2022/05/31 「Min-Max-Value Interpolation」を掲載しました
混沌を極める jQuery のコードをいかにして Vue.js に頼らずに整理したか - Qiita
序 師走ですね。年の瀬が近づいてくると、酔っ払った元社員に絡まれることが稀によくあります。 私は jQuery から Vue.js への置き換えで何をやらかしたのか - Qiita 可能ならいきなりフロントエンドのライブラリを導入するよりも jQuery のみで MVVM パターンへ移行したほうがよかったかなぁと今になると思います。 結局のところ、jQuery で苦しんでいたのは、複雑な「状態」が表示やイベントハンドル系のコードとごっちゃになっていたから です。 うん、分かる。当時、この取組みを「大変そうだなー」と思いながら横で眺めていました。 まさか、続きを自分でやることになるとは夢にも思っていませんでしたが(｡◉ᆺ◉) ごあいさつ どうも、 @cesare と申します。 クラウドワークスでサービスの開発や運用を手がける傍ら、たまに機械学習とか VR とかに手を出して遊んでいます。 この
20160930 フロントエンド高速化 業務編 (社内勉強会)
スタートアップやプロダクトの成功に必要な「アイデア×プロダクト×実行×チーム×運」の 5 つの項目について解説した概要のスライドです。急成長するプロダクトの初期に役立てていただければと思います。 プロダクトマネージャーやスタートアップの CEO の方向けにどうぞ。 ※ Japan Product Manager Conference 2016 の登壇資料です
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
![[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips](https://cdn-ak-scissors.b.st-hatena.com/image/square/2305f06c940fb5e398486ead4dbf84a83e3fa8a8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102301.png)
レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 : 森のコーディング
2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、 どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css → 768pxで切り替えたい → @media screen and (max-width: 768px) → ちゃんと768pxで切りかわる js → 768pxで切り替えたい → if($(window).innerWidth() < 768){ → 78
[2015年3月時点のホバーエフェクト総まとめ(CSS3/jQuery)] 他 海外のCSS情報 | WEBデザインすーぷ
2015年3月6日 CSS 250以上ののjQuery＆CSS3Hoverエフェクト（Plugins＆チュートリアル） 250+ jQuery & CSS3 Hover Effects (Plugins & Tutorials) jQuery and CSS3 made a big difference in the webdesign industry. Lot of new features added to make dynamic websites. Hover effects are often used in websites to add usability. jQueryとCSS3がwebデザイン産業における大きい相違を作りました。新しいたくさんの特性がダイナミックなウェブサイトを作るために付け加えられました。Hoverエフェクトが有用性を加えるためによくウェブサイトで使わ
![[2015年3月時点のホバーエフェクト総まとめ(CSS3/jQuery)] 他 海外のCSS情報 | WEBデザインすーぷ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8837365c90b4b16c12024bcc2473ddfc6727d696/height=288;version=1;width=512/http%3A%2F%2Fi0.wp.com%2Fweb.html-css-javascript.com%2Fwp-content%2Fuploads%2F2015%2F03%2Fi5.jpg%3Ffit%3D723%252C240)
jQueryでaリンクにイベントを設定するモダンな書き方を教えてください リンクにクリックイベントを設定するとき 最初 <a href="#" onClick="jump(1);">ページ１<…
jQueryでaリンクにイベントを設定するモダンな書き方を教えてください リンクにクリックイベントを設定するとき 最初 <a href="#" onClick="jump(1);">ページ１</a> <a href="#" onClick="jump(2);">ページ２</a> function jump(page) { location.href = 'http://hoge' + page; } としてましたが、なんとなくjQueryでロード時にイベントを設定する方が良いのかなと思って、以下のように直しました $(function(){ $("#one").click(function(){ location.href = 'http://hoge' + 1; }); $("#two").click(function(){ location.href = 'http://hoge' +
jQueryでテーブルソートを簡単かつオシャレに作るならAnimated Table Sorterプラグインにおまかせ！
Home › プログラミング › jQueryでテーブルソートを簡単かつオシャレに作るならAnimated Table Sorterプラグインにおまかせ！ jQueryでテーブルソートを簡単かつオシャレに作るならAnimated Table Sorterプラグインにおまかせ！ テーブルソートってサーバ側で実装すると地味に面倒な作業ですよね。 クライアント側でチャチャッと出来ちゃえば作る側も嬉しい、ユーザーも嬉しいと一石二鳥。 そんな時にオススメなのが、簡単にクライアント側でテーブルソートが実装出来ちゃうAmimated Table Sortを紹介したいと思います。 プログラミングやWordPressを習得するのに一番近道な方法とは？
jQuery セレクトボックスである値を選んだときだけテキストボックスを有効化する方法 - TechNote
今後もよく使いそうなのでメモ。 photo credit: "Cowboy" Ben Alman via photopin cc 例えば下図のように、左のセレクトボックスで「その他」を選択したときのみ右のテキストボックスがabledとなるようにはどのように書けばよいか？ html <select name="sample" id="sample_select"> <option value="1">いち</option> <option value="2">に</option> <option value="3">さん</option> <option value="4">よん</option> <option value="5">その他</option> </select> その他：<input type="text" name="sampleother" id="sample_inpu
jQueryでスクロールするとヘッダーを固定させる
最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。 よく使うのでメモがわりに掲載します。 基本は簡単なので覚えておけばいろいろ応用できるかと思います。 デモはこちら 仕組みは、<header>の高さ分（デモでは80px）スクロールすると<nav>にfixedクラスが追加されることで固定されます。 header { width: 100%; height: 80px; color: #333; background: #EEE; } nav { width: 100%; color: #FFF; background: #333; } nav.fixed { position: fixed; left: 0; top: 0; } $(function() { //ロード or スクロールされると実行 $(window).on('load scrol
モーダルウィンドウ「Simple Modal」が動かない。jQueryとMooToolsのコンフリクト解消法 | weblovelog
モーダルウィンドウ「Simple Modal」が動かない。jQueryとMooToolsのコンフリクト解消法 おしゃれなモーダルウィンドウを実装出来る「Simple Modal」を、既存のサイトに使用しようと思った時問題発生。 デモではちゃんと動くのに、既存サイトに移すと… グラデはかかってボックスの原型らしきものは現れるのに、そこからうにょーんと動いてくれない。 なんでっ！？いろいろ触って原因判明。 最初から入っている https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js これを消してやると動いた。おまえかぁ〜犯人は！！ でも、困った。 このサイトは大規模企業サイトで、jqueryもたくさん使っちゃってるし、私の一存でこれを消したり書き換えたりなんてことは不可能なのです。 じゃあ、「Simple Modal」なん
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方 – bl6.jp
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方です。レスポンシブWebデザインにも活用できるので覚えておくと役立つかと思います。例えば、画面幅が500px以下の場合にだけ適用したいといったことがjQueryを使えばとても簡単にできるので便利ですね。 width()を使う ウィンドウサイズを取得するにはwidth()を活用していきます。以下は500px以下の場合、文字が赤に変わる例です。 <script> $(function() { var w = $(window).width(); var x = 500; if (w <= x) { $('#sample').css({ color: 'red' }); } }); </script> HTML <p id="sample">サンプル</p> ただし、これだと画面を読み込んだ時点でのサイズで判定されるので、読
初心者向けのjQuery入門講座
使い方 まず最初にチェックするコンテンツです。どのような考えをもとにプログラムを組み立てていくか、設計力を学びます。 サンプル 使い方で学んだことを生かして、簡単なサンプルの作成を学んでいきます。 プラグイン jQueryで利用できる便利なプラグインを紹介していきます。 リファレンス jQueryのリファレンスです。辞書代わりにご利用ください。 使用例 企業サイトでのjQueryの使用例を紹介していきます。 始めに jQueryはデザイナーにも利用しやすいjavaScriptプラグインです。このサイトはhtmlやcssを充分に理解しており、さらに基礎的なjavaScriptをマスターしている方を対象に記事を書いています。 現在はスマートフォン用のゲーム制作に注力しているため、本サイトの更新は休止状態（2014年3月が最終更新）です。ゲーム制作に関するブログ：スマゲー作るよ！はほぼ毎日更新し
私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど）
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
Web制作時に備えておくと便利なチートシートのまとめ（iOS, Android, Bootstrap, WordPress, Git, Sublime Text, Emmetなどいろいろ）
iOS/Androidの各デバイスやエレメントの規格、BootstrapやFoundationなど人気のフレームワーク、WordPressのテーマファイル、Git/GitHubの便利な機能、Sublime TextやEmmetの使い方をまとめたチートシートなど、フロントエンドのWeb制作者に役立つチートシートをまとめました。 Web制作時によく使うサイズとかスニペットとかショートカットとか、チートシートを印刷してすぐに見られるようにしておくと便利ですよね。 チートシートの目次 iOS デザイン チートシート Swift チートシート Android チートシート Android デザイン チートシート Twitter Bootstrap 3 チートシート Foundation チートシート WordPress 時短用チートシート WordPress テーマ開発用チートシート GitとGit
レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」:phpspot開発日誌
VenoBox - responsive jQuery modal window plugin レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 LightBox派生スクリプトは多々ありますが、レスポンシブでクールなフラットデザインで、地図、動画、画像、iframeなどなんでも埋め込めるので、今の時代にかなり使いやすそう。 関連エントリ フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 スワイプできるLightBox実装jQueryプラグイン「Swipebox」 LightBoxはここまで進化したよ「VisualLightBox」
jQueryを高速に動作させるためのポイント５つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近東京にこなれてきたどうも僕です。何がこなれてきたって？電子マネーさ！東京ならSuica、Edy、Waon、なんでもタッチで買えちゃうんだぜ！コンビニで清算するとき、「支払いはEdyで」と一言、そして、読み取り機にソフトタッチ。支払いのシャリーンという音とともに僕の白い歯がキラーンとかがやくのさっ！ そんな東京にこなれてきた僕が、今日はjQueryを使う上で気をつけておきたいポイントを何点か紹介しようと思うよ！ jQueryって便利だけど、もとはJavaScriptで、インタプリタ言語で、コンパイル時に最適化なんてされないから、書き方一つで意外とパフォーマンスに差が出てくるんだよね！開発時は高スペックのPCで見てるから気づかないかもしれないけど、あなたのサイト、低スペックマシンとかモバイル端末でみたら、もっさもさかもよ！ っというわけで、jQueryを使う上で気をつけたいポイントを挙げて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
finefinefine.jp
ノンプログラマーのためのjQuery入門
