フロントエンドコーディング時に便利なジェネレーターサイト（随時更新） - 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 フロントエンド高速化 業務編 (社内勉強会)
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
[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 セレクトボックスである値を選んだときだけテキストボックスを有効化する方法 - 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で現在のウィンドウサイズの取得と判定をして処理を変えるやり方 – 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入門
kanazawa.js v1.0 〜JavaScriptコトハジメ〜（2011年2月5日開催）で使用したスライドです。Read less
レスポンシブで何でも埋め込める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を使う上で気をつけたいポイントを挙げて
コンテンツスライダー、カルーセルスライダーにもなるjQueryプラグイン | ECサイト｜システム開発会社｜スターフィールド
webサイトのメインビジュアルやバナーの箇所で使われる便利なプラグインを紹介します。 プラグインのダウンロードはこちらから jQuery content slider carousel image slideshow | bxSlider こちらのいいところはカルーセルスライダーになったり、コンテンツスライダーになったり、どちらでも使用できる所です。 まずはDEMOをご覧下さい DEMO 基本的な使い方としては、 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type='text/javascript' src='js/jquery.bxSlider.js'></script>
レスポンシブWebデザインの制作現場でよくつかうjQueryスライドショーのサンプルコード | cherry-pick BLOG | 株式会社cherry-pick
以前かいたjQueryの記事「jQueryのスライドショーやカルーセルを探してるならこれ使っときんさい！」がSRE BLOG内でアクセス数ダントツ1位を記録しています！ せっかくなので、サンプルコードを掲載してもっと活用してもらおうと企みました！ 前回の記事の流れを追うかたちで、よく使うものをご紹介していきます。 エフェクト美しきNivo Slider 何回も言ってますが、エフェクトがきれいで表示切り替えのエフェクトをランダムに設定することができます。テーマもあらかじめいくつか用意されているので、サッとカッコよくしたいときには重宝します。 次の例では、defaultテーマを使用しています。 また、imgタグにdata-thumbを指定すると、サムネイル表示による切り替えもできます。かんたんです。 HTML <!-- #nivo-slider --> <div id="nivo-slider
jQuery＋CSSによるカルーセルパネルの作り方 (1/3)
「カルーセルパネル」は、画像などのコンテンツを並べたパネルを左右にスライドさせて切り替えるUIです。Amazonの「この商品を買った人はこんな商品も買っています」で利用されているので、名前は知らなくてもご存じの方は多いでしょう。カルーセル（Carousel：回転木馬）は、メリーゴーラウンド（merry-go-round）のことで、パネルをスライドしていくと一周して元のスライドに戻ることから「カルーセルパネル」と呼ばれています。今回はjQueryでカルーセルパネルを作成する方法を解説します。 HTML/CSSでカルーセルのベースを作成する 今回作成するカルーセルパネルのHTML／XHTML（以下、HTML）は次のようになっています。カルーセル全体を囲むdiv要素を配置し、id属性に「carouselWrap」を設定します。div要素の内側にはパネルを左方向にスライドさせる「戻る」ボタン用のp
[jQuery] カルーセルの設定メモ – デジタルポケット
万能すぎて使いこなせてませんが、もっといろいろ挑戦してみたい jQueryのプラグインです。 カルーセル ダウンロード Circular, Responsive jQuery Carousel – CarouFredSel wordpressに追加する場合のタグです。EC-CUBEに利用する場合は、pathの部分のテンプレートタグをEC-cubeのものに修正してください。 headに追加 下記はTOPページのスライドイメージに利用した時のものです。下の方のメモを参考に値を変更、不要なものは削除してください。 [js] <script src="<?php bloginfo(‘template_url’); ?>/js/jquery-1.8.2.min.js" type="text/javascript" charset="UTF-8"></script> <script src="<?ph
jQuery入門講座：カルーセル CarouFredSel(1)
索引 └ プラグイン目次 1章：小ネタ系 ├ イージングの追加 ├ 要素のセンタリング ├ クッキーの操作 ├ マウスホイール ├ スクロールバー(1) ├ スクロールバー(2) ├ スクロールバー(3) ├ スクロールバー(おまけ) └ アニメの一時停止/再開 2章：ショーケース系 ├ Nivo Slider(1) ├ Nivo Slider(2) ├ Nivo Slider(3) └ Nivo Sliderの改造 3章：カルーセル系 ├ carouFredSel(1) ├ carouFredSel(2) ├ carouFredSel(3) ├ carouFredSel(4) ├ carouFredSel(5) ├ スマホでカルーセル(1) ├ スマホでカルーセル(2) ├ カルーセルとnivo(1) ├ カルーセルとnivo(2) ├ カルーセルとnivo(3) └ カルーセルとniv
複数サムネイルの左右スライドショーを表示する方法【jquery.carouFredSel】｜DAD UNION – エンジニア同盟
コピペで簡単にできる、複数サムネイル（画像）の左右スライダーを表示するjquery.carouFredSel.jsをご紹介します。 複数サムネイルの左右スライドショーを表示するJavaScriptの記述 ※jquery-1.6.2.js、jquery.carouFredSel-2.5.6-packed.jsファイルを読み込みます。$(‘スライドエリア’).carouFredSel({オプション})を記述します。オプションでは自動再生、スライド枚数、次へ・前への表示等を設定します。 <script type="text/javascript" src="js/jquery-1.6.2.js"></script> <script type="text/javascript" src="js/jquery.carouFredSel-2.5.6-packed.js"></script> <scri
jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験｜BLACKFLAG
半年ほど前にここで、「jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」と題して、画面幅めいっぱいでのコンテンツスライダーを紹介しましたが、当時紹介したスクリプト構成だとレスポンシブには対応していませんでした。 同じ、画面幅めいっぱいでのコンテンツスライダー構成でレスポンシブ対応させたパターンを必要に駆られて作成してみたので、ここでも紹介してみたいと思います。 【2014/01/15】 スライダー部分にフリック動作を追加しました。スクリプト内の設定でフリック動作のON／OFFを設定が可能です。 このスライダーはなかなか言葉では説明しずらいのでまず動作サンプルから。 「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験」サンプルを別枠で表示 スライダー中心にメイン表示エリアを設置して、その
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
