ep.55 TypeScriptへのマイグレーション対応開始！LINEポイントクラブのリファクタについて聞いてみた。 | UIT INSIDE
@potato4d が、 @hyena_shoyo_kyo と @pittanko_pta に、TypeScriptへのマイグレーションを開始した、LINEポイントクラブのリファクタについて聞いてみました。 ゲスト紹介 shoyo.kyo @hyena_shoyo_kyo フロントエンド開発センター UIT 1室 LINEポイントクラブとLINE LIVEのフロントエンドをメインに担当 amon.keishima @pittanko_pta LINE Growth Technology UIT Team LINEポイントクラブのフロントエンドをメインに担当 LINEポイントクラブとは 2013年にリリースをした、LINE運営のポイントサイトです。 2020年5月にサービス名を新たに、LINEポイントクラブと言う名称でリニューアル 2020年7月に大型リファクタがリリース LINEポイントク
jQuery 3.6.0 has been released! In jQuery 3.5.0, the major change was a security fix for the html prefilter. This release does not include a security fix, but does have some good bug fixes and improvements. We still have our eyes on a jQuery 4.0 release, but until then we will continue to support the 3.x branch and address important issues. As usual, the release is available on our cdn and the npm
仕事で、都道府県を選択させてそれに応じた情報を表示させるUIを作る必要がありました。 例えば、店舗情報や求人情報などは都道府県毎に整理して表示させることになるでしょう。 しかし、都道府県の選択をユーザーにストレスなく操作させるのは難儀なことです。 なにせ、選択肢が47種類もあるのですから。 なので今回は、都道府県UIをHTML+CSS+JavaScript(jQuery)を使用して作ってみました。 使いやすい都道府県選択UIとは そもそも、使いやすい都道府県選択にするには、何を目指せばよいのでしょうか。 今回は「最短」「最速」で、「特定の都道府県を選べる」ことを目標に、UIを模索していました。 既存のUIを見てみる まずは、今まで自分が作ってきたUIや、既に運用されているサイトなどを参考に、どんなUIがあるか調べてみました。 セレクトボックス選択 セレクトボックスは、<select></s
みなさんは、CSSアニメーションどのように使っていますか？ ウェブサイトのちょっとした演出でCSSトランジションを使用している方が多いと思いますが、類似のCSSアニメーションはどういった使い道があるのかよくわかっていない方も多いのではないでしょうか。実は、CSSアニメーションを使うとキャラクターアニメーションを作ることができます。 今回はシンプルな変形アニメーションを組み合わせて、1枚の画像で実現できるキャラクターアニメーションを制作しました。オリジナルのキャラクターをアニメーションさせていますが、CSSのコードのコピー&ペーストで他のキャラクター（画像）にも簡単に適応できます。 商用・個人問わず無料で利用できるMITライセンスで公開していますので、ウェブサイトやコンテンツ制作に是非ご活用ください。 伸びるアニメーション 上方向に「ぷるんっ」と伸びるアニメーションです。scale()でタイ
ウェブサイトを制作するときに、よく利用される機能やWebパーツをまとめたCSSフレームワーク。製作時の手間を省くのはもちろん、統一感のあるスピーディーなコーディングが可能です。 そんなCSSフレームワークの中でも人気のBootstrapは、CSSのコードをゼロから組むことなくウェブサイトのデザインを進めることができますが、どうしても他サイトとデザインが似てしまうことも。 今回ご紹介する Avant UIは、Bootstrapフレームワークをベースとした開発ツールキットで、Bootstrapのシンプルさはそのままに、新しい見た目と追加機能やコンポーネントを利用することができます。 Avant UIの特長 Avant UIは、レスポンシブ対応のコンポーネントが用意されており、お好みの組み合わせで、誰でも簡単にWebページを作成できます。作成したページは、個人および商用利用も無料となっています。
ファーストビューで大きめのイメージやムービーなどを配置しているサイトでよく見る、次セクションへスクロールするよう促すラインアニメーションをCSSで表現したサンプルです。 以前にもスクロールを促す要素として矢印・サークル・マウスなどをCSSで表現する実装コードを紹介しましたが、最近はこのタイプの実装要望が多いので自分用に一覧化したものをシェアします。 これといってユニークな動きでもなく基本的には同じような動きになりますが、汎用的に使えそうなもの7タイプです。 見栄えも動きもすべてCSSで表現しているため、カラー・サイズ・スピードなど自分好みにいろいろと変更するのも容易だと思います。 共通のHTML・CSS 以下で紹介している内容は、すべて下記のようなHTMLを使用しています。 CSSはa要素とその擬似要素への共通スタイルとして下記を記述しています。 a要素にいろいろとスタイル指定はしてありま
GOV.UK drops jQuery from their front end. Stay organized with collections Save and categorize content based on your preferences. GOV.UK dropped their jQuery dependency from their front end. You'll never guess what happened. (Yes, you will.) jQuery is a roughly 30 KiB dependency that nearly 84% of mobile pages used in 2021—and for good reason. jQuery was an instrumental tool in a time when we reall
Sucuriはこのほど、「Fake jQuery Domain Redirects Site Visitors to Scam Pages」において、偽のjQueryドメインがWebサイト訪問者をフィッシングWebサイトにリダイレクトさせていると伝えた。160以上のWordPressサイトでJavaScriptインジェクションが検出されている。 Fake jQuery Domain Redirects Site Visitors to Scam Pages 脆弱性のあるWordPressサイトが侵害され、正規のJavaScriptファイルの先頭に悪意のあるJavaScriptスクリプトが注入されるというJavaScriptインジェクションが発見されている。そのスクリプトにはフィッシングWebサイトにリダイレクトするよう実装されていることが明らかとなった。 フィッシングWebサイトのドメイン
jQueryしか書けなかった自分がVueを使えるようになるまでの話と同じような環境の人たちへ - Qiita
この記事はVue #2 Advent Calendar 2019の10日目です。 昨日は @i-ryo さんの 【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた でした。 JavaScriptといえば、jQueryだった Vueを触る前はHTML+CSS+jQuery+WordPressが主な使用言語でした。以前は小〜中規模なWebサイト制作がメインだったので、JavaScriptを操作する場面というのは多くありませんでした。 使ってもハンバーガーボタンの操作やjQuery プラグインのスライダー、ちょっとしたエフェクト程度です。少なくとも状態管理をするような案件はほとんどなく、DOM操作がメインなのでjQueryで十分でした。 1つだけ状態管理をする案件があり、案件としてはVueに最適でしたが、jQueryでごり押しました。過去の自分に教えてあげたい。 V
元々JQueryを多用していた物をVanilla JS（普通のJavascript)に徐々に書き換えていくポイントメモ的な物と関連記事を集めてきたもの。 書き換えの前提 時間がある時に、ちょっとずつ変えていく。一気に変更しない。 普通のJavascriptであれば５年以上は持ちそう。XMLHttpRequestなんて２０年前からある。 JQueryを無理に無くそうとはしない。JQueryじゃなくても良いところを書き換えていく。(ただしJQuery1.xは脆弱性があるので3.xにする） 中途半端に変えるとわかりにくくなる場合もある。時間と人に余裕があるなら最初から作り直すことも考える。 そのままでIE11でも動くようにする。Babelの使用までは考えない。 なるべく自力で書き換える場合の例なので、実際はある程度共通化したり、ライブラリ等を活用した方が良いかもしれない。 ブラウザによって未対応
DataTablesとは DataTablesは、HTMLテーブルを対話的なデータグリッドに変換するためのJavaScriptライブラリ。 簡単に言い換えると、HTMLテーブルをソートや検索などがおこなえる高機能な表にできるということ。 拡張性 や 柔軟性 が高く、また大規模なデータを持つテーブルを操作するのにとても便利である。 導入 下記のリンクから自分の環境に合ったやり方でダウンロードしよう。また、基本的に jQuery は必須である。 最もシンプルな例 とりあえず簡単な実装例を挙げてみる。 ここでは理解できなくてもOK！ See the Pen DataTables by Tomoki Ota (@odlqzyes-the-sans) on CodePen. 使い方 これからDataTablesの使い方を説明していく。 最初は以下のcssとjsファイルだけでOK! (CDN以外の書き
アンカーリンクを使ってページ内リンクを行う最、ヘッダーを固定にしていると思い通りの動きをしてくれないことがあります。 これは、アンカーリンクのジャンプ先がブラウザ上部を基点に表示されるためです。 ヘッダーは固定のままにしたいですが、スクロールするコンテンツが隠れてしまうのは避けたいところ。コンテンツがヘッダーの高さ分下に表示されればちょうどいいですよね。 これを解消する方法として「CSSに記述する方法」と「jQueryを使う方法」があります。 内容的には比較的易しめなものですが、アンカーリンクがずれてしまう現象って割と発生しやすいものかなと思いましたので、今回のブログで取り上げていこうと思います。
Splide - The lightweight, flexible and accessible slider/carousel
Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
こんにちは！ 今回は、パララックスをサイトに実装するためのプラグイン・JSライブラリをご紹介したいと思います。パララックスを実装するためのプラグインやライブラリは数多くあり、今回はその中でも、導入が簡単で高機能なもの選びました。 ぜひ、自身のサイトにあうパララックスを検討する際の参考にしてみてください！ パララックスとは パララックスは、元々は写真用語で実際に撮った写真とカメラのファインダー内の像とがずれて写る現象のことを言います。 webデザインに用いられるパララックスも、「サイトを構成するパーツごとに動くスピードや向きをずらすスクロール効果」のことを言い、パララックスを用いることで、サイトに奥行きがでて、視差効果を楽しみながらスクロールすることができます。 この他にもパララックスを使うことで、以下のメリットがあると言われています。 見せたいものをピンポイントで見せることができるデザイン
WordPress『 WP REST API 』#1 ブログを他のサイトに埋め込む方法｜レンタルサーバーナレッジ
複数の Web サイトを運用していて、WordPress で投稿したブログの内容（タイトルやアイキャッチ、公開日など）を別の Web サイトにも表示させたいと思ったことはありませんか？ 同じサーバー上でしたら読み込むのは簡単ですが、別のサーバー上にある WordPress の投稿を参照するのはハードルが高めです。 そこで今回は、WordPress に標準搭載されている『 WP REST API 』を使ってブログの内容を他の Web サイトに表示させる方法を紹介します。 PHP を使わず JavaScript と HTML だけで実装できるので、表示させたい側の Web サイトのサーバーが PHP に対応していない場合も安心です。 目次 WordPress の『 WP REST API 』について 『 WP REST API 』で最新のブログ一覧を取得する方法 他のWebサイトに最新のブログ
HOME制作Vue.jsとは？jQueryとの違いや使用のメリットを紹介 Vue.jsとは？jQueryとの違いや使用のメリットを紹介 Webサイト制作で、アニメーションなどの動きをつけたり、少し複雑な機能をつけたりしたいと思ったことはありませんか？ そんなときは、JavaScriptを使いましょう！ しかし、JavaScriptを逐一記述するのは大変です。 そこで、JavaScriptのフレームワーク、Vue.jsを使うのがおすすめです。 今まではJQueryが使われていましたが、それに代わって今、Vue.jsが注目を集めています！ この記事では、Vue.jsとはなにか、Vue.jsを使うメリット・デメリットはなにか、Vue.jsとjQueryなどとの違いについて解説していきます。 Vue.js（ビュージェイエス）は、クライアントサイドで使われるJavaScriptのフレームワークです。
こんにちは！フリーランスでエンジニア・ディレクターをやっている@nosecchi01 です。 コピペで簡単に使えるアコーディオンメニューを紹介します。 以下のようなアコーディオンを纏めました。 この記事を投稿したところ、現役コーダーさんからわかりやすいとお墨付きをいただきました！ もうアコーディオン実装はせっちさんの記事で完結ですね🤤 解説が丁寧すぎて感動します🥺 ブックマークして使い倒します ありがとうございます🎉😻 https://t.co/falLuJgfXP — だりあ＠正社員コーダー2ヶ月目の人 (@engineer_dahlia) 2019年6月4日 今回のLPでクリックすると矢印が変わるというタブメニューを実装。 のせっちさん(@nosecchi01)の記事を参考にしました。 以前も参考にさせて頂いた記事で内容はアコーディオンメニューですが、矢印の動きを見たかったので
自分にとって未知の技術、なんだか怖い。 いずれ身に付けなければならないとは思いつつも、とても難しいものに思えてなかなか踏み出せなかったです。しかし考え方を変えてみたらあっさりとその壁を乗り越えて次の段階へと自分をステップアップさせることができました。 考え方の面から誰かの助けになればと思い、初投稿します。 この記事について JavaScriptについてjQuery全盛期に学習した後、技術的に停滞していた自分がついにReactに触れて個人アプリを作るようにまでなったので、その体験を簡潔に書きます。同じような境遇の人にとって新しい一歩を踏み出せる助けになると嬉しいです。 想定している読者は「ある技術を過去に習得したがレガシーになりつつある人」や「新しい技術を学んだ人が羨ましいが尻込みしてしまっている人」など、新しいことに焦燥感を抱えている人です。 jQuery時代に取り残された焦燥感 私は社会
<div class="accordion_one"> <div class="accordion_header">アコーディオン、シンプル版 <div class="i_box"><i class="one_i"></i></div> </div> <div class="accordion_inner"> <div class="box_one"> <p class="txt_a_ac">アコーディオンの中身です。</p> </div> </div> </div> $(function(){ //.accordion_oneの中の.accordion_headerがクリックされたら $('.s_01 .accordion_one .accordion_header').click(function(){ //クリックされた.accordion_oneの中の.accordion_head
【最新バージョン4】Splideの使い方やオプションを解説！14個のデモ付き 更新日：2022/07/25 WEBサイトにスライダーを実装したことがある人は多いですよね。 そんなときいつも何を使用していますか？ スライダーのJSライブラリで有名どころとして以下の3つがあります。 ・slick ・Swiper ・keen-slider 私は今までslickを使っていました。 Swiperは機能がありすぎてよくわからないのと、slickよりも容量が重いからという理由もあります。 keen-sliderはカスタマイズ前提のライブラリで、アクセシビリティ(a11y)のサポートもされていないため使っていません。（slickとSwiperはアクセシビリティのサポートがされています。） … というような理由で、私はslick推しでした。 しかし、slickの操作感（いわゆるUX）があまり良くないと思って
jQuery 3.6.1 has been released! It’s been a while since our previous release. We were looking at fixing some elusive edge cases related to focus and blur, but we never quite got the fix right. If there’s any area of jQuery that’s hard to change, it’s likely related to focus somehow. We’re leaving those as-is for now and will address them in the future, especially since the changes may end up warra
jquery.cookie.jsは、PHPなどの環境がなくてもcookieを取り扱うことができるとても便利なjQueryのライブラリです。今回はこちらを用い、初回アクセスの１回だけ画面全体にLightbox風のオーバレイポップアップ画面を表示させる方法をご紹介します。 ※2019.4.15 一部ご指摘を受けたためコードを修正しました。 DEMOプログラムの動作デモページを用意しました。下記リンク先をご確認下さい。 » 初回アクセスのときのみポップアップ画面を表示させるサンプル 設置方法jQuery本体・jquery.cookie.jsの読み込みどちらもCDNで配布されています。下記コードをそのまま＜head＞内に記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></sc
Keen-Slider: Easily create sliders, carousels and much more.
Library agnostic: Works well in JavaScript, TypeScript, React, Vue, Angular, React Native etc.
Webサイト上に配置した画像内の任意の場所をクリックできるようにするコーディング方法の紹介です。 「クリッカブルマップ」あるいは「イメージマップ」と呼ばれたりしていて、特別な実装方法ではなくHTMLがあらかじめ用意されている仕組みで対応できたりします。使うタグとしてはmapとareaですね。 この記事では「クリッカブルマップ」の実装方法と、レスポンシブに対応する方法について紹介していけたらと思います！ クリッカブルマップの基本コード 今回はこの画像の「1」と「5」の場所をクリックできるようにしていきます。 （全部の番号も可能ですが、コード量が増えるだけなので…） まだ何もコードを入れてないので、マウスでクリックしても何も反応しないことを確認しておいてください。 imgとmapとareaを用意 クリッカブルマップの基本コードが以下の書き方になります（※ 型なので、このコードを貼り付けても動き
JSer.info #483 - jQuery 3.5.0がリリースされました。 jQuery 3.5.0 Released! | Official jQuery Blog jQuery 3.5.0では、jQuery 4.0で削除される予定の非標準な:evenと:oddセレクタの代わりに、.even()と.odd()メソッドが追加されています。 また3.5.0はマイナーアップデートですが、非互換な変更を含むセキュリティアップデートが含まれています。 jQuery.htmlPrefilterでは正規表現を使って、$("<div />")のようなXHTMLのself-closeなタグを$("<div></div>")へと展開する処理が行われていました。 この正規表現での展開を使ったXSSが見つかったため、jQuery 3.5.0ではこの正規表現による展開を削除しています。 単一の<div />
Chromeに実装された疑似クラス「:has()」がjQueryの「:has()」に悪影響、一定の条件下でWebサイトが壊れる可能性 － Publickey を読んだので、調べたものとあわせてまとめる。 三行 原因 forgiving-selector-list Chrome と Safari の状況の違い されている対応と今後 感想 三行 かねてから jQuery には拡張した CSS セレクタとして :has() がある :has() Selector | jQuery API Documentation Safari 15.4 と Chrome 105 で CSS セレクタとして :has() が実装された :has() pseudo class - Chrome Platform Status :has() CSS relational pseudo-class | Can I u
【jQuery】スライダープラグイン「slick」実装サンプル集 | 125naroom / デザインするところ（会社）です。
よく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by 125naroom (@125naroom) on CodePen. HTMLとjQueryはこちら <div class="sliderArea"> <div class="regular slider"> <div><img src="https://125naroom.com/demo/img/itukanokotonokoto01.jpg" alt="125naroom"></div> <div><img src="https://125naroom.com/demo/img/itukanokotonokoto02.jpg" alt="125naroom"></div> <div><img src="https://125naroo
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） コンテンツが横方向に自動で流れ続けるスライドショー、と言われてイメージ湧きますでしょうか？ コンベアスライドショーともいいますが、今回はそちらをCSSのみで実装する方法をまとめました。 ECサイトなどで見かけることもありますし、iPhoneの方はApp Storeの中にこのスライドの動きがあるので見てみてください。 デモサイトも用意しているのでこちらもご確認ください。
Crossroads Slideshow | Codrops 斜めがかったおしゃれなスライドショー実装「Crossroads Slideshow」 文字と写真が交差するおしゃれなスライドショー実装デモです 関連エントリ スライドショーにSVGでモーションブラーをかけてかっこ良くするデモ 超カッコいいApple風スライドショーギャラリー作成チュートリアル
jQueryとCSSアニメーションを組み合わせてスクロールをしたら要素を動かす方法をご紹介します。 スクロールをしたら要素を動かす仕組み HTML 内の「動かす要素」に「動くきっかけの起点となるクラス名」を付け、jQuery 側で動くきっかけの動作（スクロールなど）をしたら、アニメーション用のCSS のクラス名が付与されるという指定を行う。 （例）スクロールをしたらふわっと出現させる 動くきっかけの起点となるクラス名 「fadeUpTrigger」の位置までスクロールをしたら、「fadeUp」というアニメーション用のCSSのクラス名を付与して動かす。 See the Pen 「画面が読み込まれた後に動く場合」と「画面がスクロールされたら動く場合」の 動くきっかけの指定をまとめる by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen. HTMLの準備 ① HTM
3分でわかるVue.jsのエンジニア的5大メリット「jQueryより簡単！」 システム開発 プログラミング Webサイトのフロントエンド開発では、JavaScriptフレームワークを扱わない場合、標準のJavaScriptやjQueryで制作を行います。 ユーザーアクションに連動した画面を更新するリッチな表現を行う処理は、Vue.jsを扱うことで、コード量を減らしたり、メンテナンスや管理が行いやすくなりますので、ご紹介します。 本記事は、HTML, CSSを学び、JavaScriptへの理解が少しある、マークアップエンジニアやデザイナー向けの記事になりますので、ご了承いただければ幸いです。 Vue.js について Vue.jsは、ユーザーインターフェイスを構築するためのJavaScriptフレームワークです。開発で必要な機能がセットになったツールと思ってもらえればわかりやすいと思います。
なんかいい感じのマンガビューア ～slick-custom～とは 「なんかいい感じのマンガビューア～slick-custom～」は、個人サイト向けのWEB漫画ビューアスクリプトです。 htmlは1作品につき1ページでOK！複数枚の画像を自動で連番表示させるので、ページの数だけhtmlを作らずに済みます。 PCの大きな画面では見開き表示、スマホの小さな画面では単ページ表示に自動で切り替わるレスポンシブ仕様です。 スワイプ操作にも対応しているので、スマホ対応にお悩みの方にもぴったり！ ☆土台としてjQueryスクリプトの「slick」を使用しています。slick本体とjQuery本体はCDNで外部から読み込んでるので別途ダウンロードは不要です。 自分のサイトに設置してブラウザ上で動かせてレスポンシブでスワイプ対応のマンガビューアが欲しすぎて頑張りました！ 可能な限り最低限の編集で動くようにして
【jQuery】$(function() {...}) について 「意味や実行されるタイミング」 - Qiita
はじめに jQueryの学習をしていると必ず出てくる$(function(){...}) とりあえずjQueryの記述をする時に 一番最初に記述する事はなんとなくわかった・・・ けど、これを記述するのにどんな意味があるの？？ 仮に記述しなかったらどうなるの？？ こちらを今までなんとなく理解していた方にご紹介したいと思います。 $(function(){...})の意味 $(function(){...})は簡単に言いますと予約状態という事になります。 さすがにこれだけでは意味がわからないので functionの理解に欠かせないHTMLのコードもまじえながらご紹介していきます。 HTML !DOCTYPE <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQuery</title> <!-- scriptファイルの読み込み -->
【jQuery】slickの使い方とよく使うサンプル集 公開日 : 2022.07.04 最終更新日 : 2023.11.07 コーディング スライダーのプラグインは数多くありますが、その中でもよく使われる「slick」について、使い方とよく使う実装方法についてご紹介します。 今回紹介するサンプルを組み合わせることで様々なカスタマイズにも対応できるかと思いますので、是非参考にしてみてください！ slickの導入方法slickを使うためには、以下2つの方法があります。 ファイルをダウンロードして読み込む方法CDNを使って読み込む方法なお、slickを利用するためはjQuery本体の読み込みも必要になるので、忘れずに！ slickファイルをダウンロードして使う場合公式サイトにアクセスし「get it now」をクリックします。 「Download Now」をクリックすると、skickのファイル
【jQuery】ウィンドウをスクロールすると下からふわっとコンテンツがフェードインする実装 | Recooord | Web制作で扱うコーディングスニペットを紹介
HOMEJavaScript【jQuery】ウィンドウをスクロールすると下からふわっとコンテンツがフェードインする実装 【jQuery】ウィンドウをスクロールすると下からふわっとコンテンツがフェードインする実装 JavaScript ※文章・コード見直しの為、2020年10月30日に更新しました。 フェードインアニメーションのサンプルは以下を参照してください 上記のフェードインアニメーションのサンプルを下にスクロールしてみてください。下からふわっと要素が表示されていると思います。 今回はこのような実装ができるように紹介していきます。 HTMLの記述 <ul> <li class="animation"><img src="https://unsplash.it/300/200" alt=""></li> <li class="animation"><img src="https://uns
左から右に現れて文字だけ残るCSSアニメーション
最近のWEBサイトのトレンドは動きのあるものが増えてきていますよね。 今回はその中でもよく見かける色付きのラインが横から現れて消えていったその下にテキストが現れるというアニメーションの作成方法をご紹介します。 今回の完成目標は上記のような感じです。本サンプルでは一回限りの動きですので、再度確認されたい場合は画面を更新してお確かめください。 HTML・CSSの書き方 HTMLサンプル HTMLのコードは下記になります。これはサンプルですので、class名などは実際に試される場合は任意のお名前でお作りください。 今回は通りすぎるというイメージから名前をpassingとして設定してみました。 <div class="passing move"> <div class="passing-box"> <div class="passing-bar"> <div class="passing-txt"
JavaScriptライブラリ「jQuery」の最新版「jQuery 3.6」がリリースされました。 jQuery 3.6.0 has been released! Some bug fixes and a feature for JSONP error handling. https://t.co/ZUYnvrbmHc — jquery (@jquery) March 2, 2021 jQuery 3.5のリリースが昨年、2020年4月でしたので、約1年ぶりのマイナーバージョンアップとなります。 今回のマイナーバージョンアップではセキュリティフィクスは含まれず、バグフィクスのみです。 具体的には、次のようにJSOPの返り値がエラーだった場合の振る舞いにおけるバグが修正されました。 In previous versions, when a JSONP request responded w
URLの「パラメータ（クエリ文字列）」とは？ URLパラメータ、クエリ文字列とも呼ばれますが、例えば、 「http://www.example.com?lib=jquery&ver=3」 における「?lib=jquery&ver=3」の部分を指します。 Javascript（jQuery）でURLのパラメータ（クエリ文字列）を取得する方法 jQueryと書きましたが、Javascriptに、クエリ文字列を取得する方法がすでに用意されています。location オブジェクトの「.search」プロパティにクエリ文字列（パラメータ）の値が格納されています。 // URLパラメータ文字列を取得する var param = location.search alert(param) // 「?lib=jquery&ver=3」が出力 極めてシンプルな変数ですので、jQueryに同じ機能の関数は存在し
Essential Cheat Sheet: Convert jQuery to JavaScript | Envato Tuts+
Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
画像のカルーセル表示、今ではいろいろなサイトで見るようになりました。 アニメーション付きのカッコいいカルーセルスライダーだとjQueryやJavaScriptを使うものが主流ですが、CSSでもカッコいいアニメーション付きで作れます！ そこで今回はCSSのみで簡単に使えるアニメーション付きカルーセルスライダーをご紹介します。 ぜひサイトへの導入を考えられている方は参考にしてみてください。 自動的にスライドするカルーセルスライダーSee the Pen pure css carousel by TianyiLi (@tianyili) on CodePen. サムネイル型カルーセルSee the Pen Pure CSS Carousel with Thumbnails by Ronny Siikaluoma (@siiron) on CodePen. カード型カルーセルSee the Pen
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery 3.6.0 Released! | Official jQuery Blog
最強の都道府県選択のUIを考えてみた【HTML+CSS+jQuery】 | キノコログ
コピペで使える！ CSS Animationだけで実現するキャラクターアニメーション - ICS MEDIA
これ簡単！BootstrapのデザインをカスタマイズできるWebツール Avant UI
CSSで実装する次のコンテンツへと促すスクロールダウンのラインアニメーション | NxWorld
GOV.UK drops jQuery from their front end. | Articles | web.dev
WordPressサイトに偽のjQueryを挿入、詐欺サイトに誘導
JQueryをVanilla JSに緩やかに置き換える - Qiita
【JavaScript】DataTablesが超便利すぎる - Qiita
【CSS&jQuery】固定ヘッダー時アンカーリンクの位置を調整する方法
【まとめ】パララックスを実装するためのプラグイン6選｜株式会社ParaLux - 新しいあり方を創造する
Vue.jsとは？jQueryとの違いや使用のメリットを紹介
【jQuery】矢印付きアコーディオンメニュー3選【コピペOK】
新技術は怖くない、jQuery時代からReact時代へ勇気を出して踏み出した - Qiita
【jQuery】アコーディオン実装サンプル10選 | 125naroom / デザインするところ（会社）です。
【最新バージョン4】Splideの使い方やオプションを解説！14個のデモ付き | 東京のホームページ制作 / WEB制作会社 BRISK
jQuery 3.6.1 Maintenance Release | Official jQuery Blog
【jQuery】初回アクセス時のみポップアップ表示（jquery.cookie.js使用） | LIOT BLOG
画像上の任意の場所をクリックできる「クリッカブルマップ」の使い方 | HPcode（えいちぴーこーど）
2020-04-14のJS: jQuery 3.5.0(securify fix)、Firefox 75、Chrome 81
ブラウザで:has()セレクタが実装されてjQueryの:has()セレクタの挙動が変わったの調べた - hogashi.*
【CSSのみ】横方向に流れ続ける無限スライドショーの作り方を徹底解説 - PENGIN BLOG
斜めがかったおしゃれなスライドショー実装「Crossroads Slideshow」:phpspot開発日誌
jQuery とCSS を組み合わせてスクロールをしたら要素を動かす | 動くWebデザインアイディア帳
3分でわかるVue.jsのエンジニア的5大メリット「jQueryより簡単！」 | 東京のWeb制作会社 株式会社クーシー
なんかいい感じのマンガビューア～slick-custom～
【jQuery】slickの使い方とよく使うサンプル集 | AndHA Blog
jQuery 3.6正式リリース。JSONPにおけるバグフィクスなど
Javascript でURLのパラメータを取得する方法 | WWWクリエイターズ
CSSのみ！コピペで簡単に使えるアニメーション付きカルーセルスライダー8選
oggi.jp
chiriyama-nikki.hatenadiary.com
oggi.jp
game8.jp
dswiipspwikips3.jp
xtrend.nikkei.com