https://b.hatena.ne.jp/site159/javascript/ javascriptに関するsite159のはてなブックマーク (2,255) https://coliss.com/articles/build-websites/operation/work/lists-of-useful-words-for-classname.html site159 2024-07-11T04:49:48Z CSS javascript まとめ <blockquote cite="https://coliss.com/articles/build-websites/operation/work/lists-of-useful-words-for-classname.html" title="CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fwork%2Flists-of-useful-words-for-classname.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/work/lists-of-useful-words-for-classname.html">CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/work/lists-of-useful-words-for-classname.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/96b9c115c27709fe95755ede8123032bc794d68a/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202402%2F2024062210%402x.png" alt="CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames" title="CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames" class="entry-image" /></a></p><p>CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Class...</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/lists-of-useful-words-for-classname.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/work/lists-of-useful-words-for-classname.html" alt="はてなブックマーク - CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames" title="はてなブックマーク - CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/work/lists-of-useful-words-for-classname.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 161 https://nmi.jp/2024-05-17-Avoid-then site159 2024-05-20T05:46:07Z promise JavaScript <blockquote cite="https://nmi.jp/2024-05-17-Avoid-then" title="JavaScript で then を使うのは避けよう（await / async の初級者まとめ）"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fnmi.jp%2F2024-05-17-Avoid-then" alt="" /> <a href="https://nmi.jp/2024-05-17-Avoid-then">JavaScript で then を使うのは避けよう（await / async の初級者まとめ）</a></cite><p><a href="https://nmi.jp/2024-05-17-Avoid-then"><img src="" alt="JavaScript で then を使うのは避けよう（await / async の初級者まとめ）" title="JavaScript で then を使うのは避けよう（await / async の初級者まとめ）" class="entry-image" /></a></p><p>JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現...</p><p><a href="https://b.hatena.ne.jp/entry/s/nmi.jp/2024-05-17-Avoid-then"><img src="https://b.hatena.ne.jp/entry/image/https://nmi.jp/2024-05-17-Avoid-then" alt="はてなブックマーク - JavaScript で then を使うのは避けよう（await / async の初級者まとめ）" title="はてなブックマーク - JavaScript で then を使うのは避けよう（await / async の初級者まとめ）" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/nmi.jp/2024-05-17-Avoid-then"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 289 https://zenn.dev/necscat/articles/bc9bba54babaf5 site159 2024-05-13T22:11:22Z まとめ HTML CSS JavaScript <blockquote cite="https://zenn.dev/necscat/articles/bc9bba54babaf5" title="令和のHTML / CSS / JavaScriptの書き方50選"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fnecscat%2Farticles%2Fbc9bba54babaf5" alt="" /> <a href="https://zenn.dev/necscat/articles/bc9bba54babaf5">令和のHTML / CSS / JavaScriptの書き方50選</a></cite><p><a href="https://zenn.dev/necscat/articles/bc9bba54babaf5"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/acadaee87c64fb10c0713bd564edd40ff0a4cbaf/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--insZ6hmG--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E4%2525BB%2525A4%2525E5%252592%25258C%2525E3%252581%2525AEHTML%252520%25252F%252520CSS%252520%25252F%252520JavaScript%2525E3%252581%2525AE%2525E6%25259B%2525B8%2525E3%252581%25258D%2525E6%252596%2525B950%2525E9%252581%2525B8%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Adadada%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzI3MjZkNzYwMWEuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3A%2525E3%252583%25258D%2525E3%252582%2525AF%2525E3%252582%2525B9%2525E3%252582%2525AD%2525E3%252583%2525A3%2525E3%252583%252583%2525E3%252583%252588%252520%2525E3%252583%252586%2525E3%252583%252583%2525E3%252582%2525AF%2525E3%252583%252596%2525E3%252583%2525AD%2525E3%252582%2525B0%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2UwMWFkMzQ1M2QuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT" alt="令和のHTML / CSS / JavaScriptの書き方50選" title="令和のHTML / CSS / JavaScriptの書き方50選" class="entry-image" /></a></p><p>Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コ...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/necscat/articles/bc9bba54babaf5"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/necscat/articles/bc9bba54babaf5" alt="はてなブックマーク - 令和のHTML / CSS / JavaScriptの書き方50選" title="はてなブックマーク - 令和のHTML / CSS / JavaScriptの書き方50選" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/necscat/articles/bc9bba54babaf5"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1328 https://www.publickey1.jp/blog/23/astro_30javascriptspa.html site159 2023-09-12T02:19:52Z あとで読む JavaScript <blockquote cite="https://www.publickey1.jp/blog/23/astro_30javascriptspa.html" title="静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwww.publickey1.jp%2Fblog%2F23%2Fastro_30javascriptspa.html" alt="" /> <a href="https://www.publickey1.jp/blog/23/astro_30javascriptspa.html">静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能</a></cite><p><a href="https://www.publickey1.jp/blog/23/astro_30javascriptspa.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/4ed4a138a2b97d82531250a6e45f6527067afce7/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fwww.publickey1.jp%2F2023%2FFRCs0xMa.jpg" alt="静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能" title="静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能" class="entry-image" /></a></p><p>静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 3.0」が正式にリリースされました。 Astro 3.0 is out now! 30% faster and more powerful than ever....</p><p><a href="https://b.hatena.ne.jp/entry/s/www.publickey1.jp/blog/23/astro_30javascriptspa.html"><img src="https://b.hatena.ne.jp/entry/image/https://www.publickey1.jp/blog/23/astro_30javascriptspa.html" alt="はてなブックマーク - 静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能" title="はてなブックマーク - 静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/www.publickey1.jp/blog/23/astro_30javascriptspa.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 275 https://zenn.dev/keiichiro/articles/ebd91551a5108d site159 2023-09-09T02:53:46Z JavaScript Debug <blockquote cite="https://zenn.dev/keiichiro/articles/ebd91551a5108d" title="JavaScriptでconsole.logを使用してませんか？"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fkeiichiro%2Farticles%2Febd91551a5108d" alt="" /> <a href="https://zenn.dev/keiichiro/articles/ebd91551a5108d">JavaScriptでconsole.logを使用してませんか？</a></cite><p><a href="https://zenn.dev/keiichiro/articles/ebd91551a5108d"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/17807a143f889032b3cf82af05b691dfb363d8d8/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--UBH-xbv5--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AJavaScript%2525E3%252581%2525A7console.log%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E7%252594%2525A8%2525E3%252581%252597%2525E3%252581%2525A6%2525E3%252581%2525BE%2525E3%252581%25259B%2525E3%252582%252593%2525E3%252581%25258B%2525EF%2525BC%25259F%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Adevdev%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzMyNGQzZDMxYTkuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT" alt="JavaScriptでconsole.logを使用してませんか？" title="JavaScriptでconsole.logを使用してませんか？" class="entry-image" /></a></p><p>はじめに Webフロントエンド開発の学習において、多くの人がまず最初にconsole.logの使い方を学びます。 console.logはデバッグの際に非常に便利なツールですが、JavaScriptにはこれ以外にも多彩なデバッグ機能が存在します。 通常のconsole.logだけでなく、さまざまなconsoleのメソッドを活用することで、デバッグ作業...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/keiichiro/articles/ebd91551a5108d"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/keiichiro/articles/ebd91551a5108d" alt="はてなブックマーク - JavaScriptでconsole.logを使用してませんか？" title="はてなブックマーク - JavaScriptでconsole.logを使用してませんか？" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/keiichiro/articles/ebd91551a5108d"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 346 https://zenn.dev/rabbit/articles/2f7a007bab5a87 site159 2022-02-25T04:24:46Z React JavaScript <blockquote cite="https://zenn.dev/rabbit/articles/2f7a007bab5a87" title="Next.jsで静的サイトを作成する際によく使っているライブラリまとめ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Frabbit%2Farticles%2F2f7a007bab5a87" alt="" /> <a href="https://zenn.dev/rabbit/articles/2f7a007bab5a87">Next.jsで静的サイトを作成する際によく使っているライブラリまとめ</a></cite><p><a href="https://zenn.dev/rabbit/articles/2f7a007bab5a87"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/db03102a59731e69702de9ac82e90cbb5b637b72/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--QYnUCpSe--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ANext.js%2525E3%252581%2525A7%2525E9%25259D%252599%2525E7%25259A%252584%2525E3%252582%2525B5%2525E3%252582%2525A4%2525E3%252583%252588%2525E3%252582%252592%2525E4%2525BD%25259C%2525E6%252588%252590%2525E3%252581%252599%2525E3%252582%25258B%2525E9%25259A%25259B%2525E3%252581%2525AB%2525E3%252582%252588%2525E3%252581%25258F%2525E4%2525BD%2525BF%2525E3%252581%2525A3%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252582%25258B%2525E3%252583%2525A9%2525E3%252582%2525A4%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252583%2525AA%2525E3%252581%2525BE%2525E3%252581%2525A8%2525E3%252582%252581%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ahanetsuki%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdGF0aWMuemVubi5zdHVkaW8vdXNlci11cGxvYWQvYXZhdGFyLzEyYTU1YjAwYmIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACMTiAE" alt="Next.jsで静的サイトを作成する際によく使っているライブラリまとめ" title="Next.jsで静的サイトを作成する際によく使っているライブラリまとめ" class="entry-image" /></a></p><p>この記事は、先日催された「ジャムジャム！！Jamstack_5」で登壇した際の内容を再度まとめたものとなります Next関連 next-seo Seoコンポーネントのようなものが踏襲されてる JSON-LDのサポートも入っていてサポート範囲が広い next-sitemap sitemap.xmlとrobots.txtを作成してくれる 分割もしてくれる configファイルの...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/rabbit/articles/2f7a007bab5a87"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/rabbit/articles/2f7a007bab5a87" alt="はてなブックマーク - Next.jsで静的サイトを作成する際によく使っているライブラリまとめ" title="はてなブックマーク - Next.jsで静的サイトを作成する際によく使っているライブラリまとめ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/rabbit/articles/2f7a007bab5a87"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 196 https://mbeaudru.github.io/modern-js-cheatsheet/translations/ja-JP.html site159 2021-10-12T12:53:05Z JavaScript <blockquote cite="https://mbeaudru.github.io/modern-js-cheatsheet/translations/ja-JP.html" title="モダン JavaScript チートシート"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fmbeaudru.github.io%2Fmodern-js-cheatsheet%2Ftranslations%2Fja-JP.html" alt="" /> <a href="https://mbeaudru.github.io/modern-js-cheatsheet/translations/ja-JP.html">モダン JavaScript チートシート</a></cite><p><a href="https://mbeaudru.github.io/modern-js-cheatsheet/translations/ja-JP.html"><img src="" alt="モダン JavaScript チートシート" title="モダン JavaScript チートシート" class="entry-image" /></a></p><p>Skip to the content. モダン JavaScript チートシート 画像クレジット: Ahmad Awais ⚡️ イントロダクション 動機 このドキュメントはモダンなプロジェクトでよく見られる JavaScript のチートシートと最新のサンプルコードです。 このガイドは読者に JavaScript をゼロから教えるものではありません。 基礎知識は持って...</p><p><a href="https://b.hatena.ne.jp/entry/s/mbeaudru.github.io/modern-js-cheatsheet/translations/ja-JP.html"><img src="https://b.hatena.ne.jp/entry/image/https://mbeaudru.github.io/modern-js-cheatsheet/translations/ja-JP.html" alt="はてなブックマーク - モダン JavaScript チートシート" title="はてなブックマーク - モダン JavaScript チートシート" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/mbeaudru.github.io/modern-js-cheatsheet/translations/ja-JP.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 995 https://zenn.dev/imaginelab/articles/68de83f4948fe2 site159 2020-12-30T04:10:55Z JavaScript <blockquote cite="https://zenn.dev/imaginelab/articles/68de83f4948fe2" title="JSの日付ライブラリは、どれを使えばいいのかまとめ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fzenn.dev%2Fimaginelab%2Farticles%2F68de83f4948fe2" alt="" /> <a href="https://zenn.dev/imaginelab/articles/68de83f4948fe2">JSの日付ライブラリは、どれを使えばいいのかまとめ</a></cite><p><a href="https://zenn.dev/imaginelab/articles/68de83f4948fe2"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/1e3c683dab2742964422e659229cdefbf8aedee0/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--Uiaj8WJd--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AJS%2525E3%252581%2525AE%2525E6%252597%2525A5%2525E4%2525BB%252598%2525E3%252583%2525A9%2525E3%252582%2525A4%2525E3%252583%252596%2525E3%252583%2525A9%2525E3%252583%2525AA%2525E3%252581%2525AF%2525E3%252580%252581%2525E3%252581%2525A9%2525E3%252582%25258C%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E3%252581%252588%2525E3%252581%2525B0%2525E3%252581%252584%2525E3%252581%252584%2525E3%252581%2525AE%2525E3%252581%25258B%2525E3%252581%2525BE%2525E3%252581%2525A8%2525E3%252582%252581%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aima%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzc4ODNhYTEzMWIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png%3F_a%3DBACAGSGT" alt="JSの日付ライブラリは、どれを使えばいいのかまとめ" title="JSの日付ライブラリは、どれを使えばいいのかまとめ" class="entry-image" /></a></p><p>Moment.jsは、新規開発停止、メンテナンスモードに移行 Moment.jsは、新規機能の開発停止、メンテナンスモード(セキュリティ修正とMoment Timezoneのデータ更新は行う)に移行することが発表されています。これから新規開発するプロジェクトでは、別のライブラリを使うことが推奨されています。 僕の新規開発のプロジェク...</p><p><a href="https://b.hatena.ne.jp/entry/s/zenn.dev/imaginelab/articles/68de83f4948fe2"><img src="https://b.hatena.ne.jp/entry/image/https://zenn.dev/imaginelab/articles/68de83f4948fe2" alt="はてなブックマーク - JSの日付ライブラリは、どれを使えばいいのかまとめ" title="はてなブックマーク - JSの日付ライブラリは、どれを使えばいいのかまとめ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/zenn.dev/imaginelab/articles/68de83f4948fe2"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 237 https://blog.8bit.co.jp/?p=18021 site159 2020-07-14T05:41:19Z Javascript javascript JavaScript Library <blockquote cite="https://blog.8bit.co.jp/?p=18021" title="ふわふわの泡の背景を作成できるJS「bubbly-bg.js」 ｜ モノづくりブログ"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.8bit.co.jp%2F%3Fp%3D18021" alt="" /> <a href="https://blog.8bit.co.jp/?p=18021">ふわふわの泡の背景を作成できるJS「bubbly-bg.js」 ｜ モノづくりブログ</a></cite><p><a href="https://blog.8bit.co.jp/?p=18021"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5ce83b38758f2772f60f1f4c74c67e9c165369c3/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fblog.8bit.co.jp%2Fwp-content%2Fuploads%2F2020%2F07%2Fthumb-2.png" alt="ふわふわの泡の背景を作成できるJS「bubbly-bg.js」 ｜ モノづくりブログ" title="ふわふわの泡の背景を作成できるJS「bubbly-bg.js」 ｜ モノづくりブログ" class="entry-image" /></a></p><p>ページのbackgroundにふわふわと泡が漂うような表現ができる「bubbly-bg.js」を紹介します。 公式デモサイト 使用してみたところ、仕様は以下のようです。 ・背景は固定。スクロールのある縦長のページでも、100vw、100vhでfixed。 ・スマートフォン端末でも動作。（とりあえず手元のiPhoneXとiPadで動作確認しました。...</p><p><a href="https://b.hatena.ne.jp/entry/s/blog.8bit.co.jp/?p=18021"><img src="https://b.hatena.ne.jp/entry/image/https://blog.8bit.co.jp/?p=18021" alt="はてなブックマーク - ふわふわの泡の背景を作成できるJS「bubbly-bg.js」 ｜ モノづくりブログ" title="はてなブックマーク - ふわふわの泡の背景を作成できるJS「bubbly-bg.js」 ｜ モノづくりブログ" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/blog.8bit.co.jp/?p=18021"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1 https://techmemo.biz/javascript/vanilla-js-scroll-animation/ site159 2020-07-10T05:26:28Z javascript JavaScript Javascript CSS <blockquote cite="https://techmemo.biz/javascript/vanilla-js-scroll-animation/" title="jQueryに頼らず、JavaScriptとCSSアニメーションでスクロールエフェクトを実装する方法 | TechMemo"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftechmemo.biz%2Fjavascript%2Fvanilla-js-scroll-animation%2F" alt="" /> <a href="https://techmemo.biz/javascript/vanilla-js-scroll-animation/">jQueryに頼らず、JavaScriptとCSSアニメーションでスクロールエフェクトを実装する方法 | TechMemo</a></cite><p><a href="https://techmemo.biz/javascript/vanilla-js-scroll-animation/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/685d8b7f84d4e9b02378932ddf9d9ce25133cd51/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Ftechmemo.biz%2Fwp-content%2Fuploads%2F2020%2F07%2Fvanilla-js-scroll-animation.jpg" alt="jQueryに頼らず、JavaScriptとCSSアニメーションでスクロールエフェクトを実装する方法 | TechMemo" title="jQueryに頼らず、JavaScriptとCSSアニメーションでスクロールエフェクトを実装する方法 | TechMemo" class="entry-image" /></a></p><p>素のJavaScriptとCSSでスクロールアニメーションを実装する方法 ステップ1. HTMLのマークアップ HTMLでは、アニメーション表示したい箇所に.animateを追加します。 &lt;div class=&quot;animate&quot;&gt; スクロールアニメーション要素 &lt;/div&gt; &lt;ul class=&quot;list&quot;&gt; &lt;li class=&quot;animate&quot;&gt;スクロールアニメーション要素1&lt;/li&gt; &lt;li class=&quot;an...</p><p><a href="https://b.hatena.ne.jp/entry/s/techmemo.biz/javascript/vanilla-js-scroll-animation/"><img src="https://b.hatena.ne.jp/entry/image/https://techmemo.biz/javascript/vanilla-js-scroll-animation/" alt="はてなブックマーク - jQueryに頼らず、JavaScriptとCSSアニメーションでスクロールエフェクトを実装する方法 | TechMemo" title="はてなブックマーク - jQueryに頼らず、JavaScriptとCSSアニメーションでスクロールエフェクトを実装する方法 | TechMemo" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/techmemo.biz/javascript/vanilla-js-scroll-animation/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 30 https://jvns.ca/blog/2020/06/19/a-little-bit-of-plain-javascript-can-do-a-lot/ site159 2020-07-09T04:08:26Z JavaScript Javascript javascript <blockquote cite="https://jvns.ca/blog/2020/06/19/a-little-bit-of-plain-javascript-can-do-a-lot/" title="A little bit of plain Javascript can do a lot"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fjvns.ca%2Fblog%2F2020%2F06%2F19%2Fa-little-bit-of-plain-javascript-can-do-a-lot%2F" alt="" /> <a href="https://jvns.ca/blog/2020/06/19/a-little-bit-of-plain-javascript-can-do-a-lot/">A little bit of plain Javascript can do a lot</a></cite><p><a href="https://jvns.ca/blog/2020/06/19/a-little-bit-of-plain-javascript-can-do-a-lot/"><img src="" alt="A little bit of plain Javascript can do a lot" title="A little bit of plain Javascript can do a lot" class="entry-image" /></a></p><p>June 19, 2020 I’ve never worked as a professional frontend developer, so even though I’ve been writing HTML/CSS/JS for 15 years for little side projects, all of the projects have been pretty small, sometimes I don’t write any Javascript for years in between, and I often don’t quite feel like I kn...</p><p><a href="https://b.hatena.ne.jp/entry/s/jvns.ca/blog/2020/06/19/a-little-bit-of-plain-javascript-can-do-a-lot/"><img src="https://b.hatena.ne.jp/entry/image/https://jvns.ca/blog/2020/06/19/a-little-bit-of-plain-javascript-can-do-a-lot/" alt="はてなブックマーク - A little bit of plain Javascript can do a lot" title="はてなブックマーク - A little bit of plain Javascript can do a lot" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/jvns.ca/blog/2020/06/19/a-little-bit-of-plain-javascript-can-do-a-lot/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2 https://kachibito.net/useful-resource/whenipress site159 2020-07-08T01:45:59Z javascript JavaScript Javascript Library <blockquote cite="https://kachibito.net/useful-resource/whenipress" title="Webアプリ等に手軽にキーバインドを実装できるスクリプト・「whenipress」 - かちびと.net"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkachibito.net%2Fuseful-resource%2Fwhenipress" alt="" /> <a href="https://kachibito.net/useful-resource/whenipress">Webアプリ等に手軽にキーバインドを実装できるスクリプト・「whenipress」 - かちびと.net</a></cite><p><a href="https://kachibito.net/useful-resource/whenipress"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5c6687a6f9d3f527d81477f0f0007f4ac698c6b2/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2024%2F07%2Fsiteimg.png" alt="Webアプリ等に手軽にキーバインドを実装できるスクリプト・「whenipress」 - かちびと.net" title="Webアプリ等に手軽にキーバインドを実装できるスクリプト・「whenipress」 - かちびと.net" class="entry-image" /></a></p><p>whenipressは開発したWebアプリ等に手軽にキーバインドを実装できるスクリプトです。 ※上記サンプルはiframeなので中をクリックしてから動作テストしてください 軽量で非依存、シンプルなコードでキーバインドを実装する事が出来ます。 &lt;script src=&quot;https://cdn.jsdelivr.net/npm/whenipress@1.7.2/dist/whenipress.js&quot;...</p><p><a href="https://b.hatena.ne.jp/entry/s/kachibito.net/useful-resource/whenipress"><img src="https://b.hatena.ne.jp/entry/image/https://kachibito.net/useful-resource/whenipress" alt="はてなブックマーク - Webアプリ等に手軽にキーバインドを実装できるスクリプト・「whenipress」 - かちびと.net" title="はてなブックマーク - Webアプリ等に手軽にキーバインドを実装できるスクリプト・「whenipress」 - かちびと.net" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/kachibito.net/useful-resource/whenipress"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 2 https://coliss.com/articles/build-websites/operation/javascript/keen-slider-with-native-touch-and-swipe.html site159 2020-07-08T01:40:26Z javascript slider <blockquote cite="https://coliss.com/articles/build-websites/operation/javascript/keen-slider-with-native-touch-and-swipe.html" title="ネイティブのタッチ・スワイプ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリ keen-slider"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcoliss.com%2Farticles%2Fbuild-websites%2Foperation%2Fjavascript%2Fkeen-slider-with-native-touch-and-swipe.html" alt="" /> <a href="https://coliss.com/articles/build-websites/operation/javascript/keen-slider-with-native-touch-and-swipe.html">ネイティブのタッチ・スワイプ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリ keen-slider</a></cite><p><a href="https://coliss.com/articles/build-websites/operation/javascript/keen-slider-with-native-touch-and-swipe.html"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/41a6f035c470e6197f20b72b2336a3dbe428d357/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202003%2F2020070801.png" alt="ネイティブのタッチ・スワイプ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリ keen-slider" title="ネイティブのタッチ・スワイプ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリ keen-slider" class="entry-image" /></a></p><p>ネイティブのタッチ・スワイプ操作に対応したさまざまなスライダーを実装できるJavaScriptライブラリを紹介します。 依存関係は一切なし、IE10を含むすべてのブラウザをサポートしています。</p><p><a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/keen-slider-with-native-touch-and-swipe.html"><img src="https://b.hatena.ne.jp/entry/image/https://coliss.com/articles/build-websites/operation/javascript/keen-slider-with-native-touch-and-swipe.html" alt="はてなブックマーク - ネイティブのタッチ・スワイプ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリ keen-slider" title="はてなブックマーク - ネイティブのタッチ・スワイプ操作に対応したスライダーを簡単に実装できるJavaScriptライブラリ keen-slider" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/coliss.com/articles/build-websites/operation/javascript/keen-slider-with-native-touch-and-swipe.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 22 https://blog.jnito.com/entry/2020/06/30/091742 site159 2020-06-30T05:45:29Z javascript <blockquote cite="https://blog.jnito.com/entry/2020/06/30/091742" title="【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a try"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.jnito.com%2Fentry%2F2020%2F06%2F30%2F091742" alt="" /> <a href="https://blog.jnito.com/entry/2020/06/30/091742">【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a try</a></cite><p><a href="https://blog.jnito.com/entry/2020/06/30/091742"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/d854cd669dca2d82203cef9dd8c15b1225de6720/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F737e5f17f369d3fdac0d8e023f40c0f483ccfe09%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252FJ%252FJunichiIto%252F20200630%252F20200630090900.jpg" alt="【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a try" title="【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a try" class="entry-image" /></a></p><p>はじめに 僕は仕事でRuby on Railsを使ってWebアプリケーションを開発しているので、JavaScriptはそれなりに使えます。 ですが、サーバーサイドで使っているRubyに比べると、JavaScriptの習熟度はそれほど高くありません。 とくに、文法が一気にブラッシュアップされたES2015（ES6）以降の知識は「なんとなく把握はして...</p><p><a href="https://b.hatena.ne.jp/entry/s/blog.jnito.com/entry/2020/06/30/091742"><img src="https://b.hatena.ne.jp/entry/image/https://blog.jnito.com/entry/2020/06/30/091742" alt="はてなブックマーク - 【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a try" title="はてなブックマーク - 【JS完全に理解した】JavaScript PrimerとプログラミングTypeScriptとレガシーフロントエンド安全改善ガイドを読んでみた - give IT a try" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/blog.jnito.com/entry/2020/06/30/091742"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 568 https://github.com/rough-stuff/rough-notation テキストに手書き効果を与える site159 2020-06-24T02:49:18Z Javascript JavaScript javascript <blockquote cite="https://github.com/rough-stuff/rough-notation" title="GitHub - rough-stuff/rough-notation: Create and animate hand-drawn annotations on a web page"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2Frough-stuff%2Frough-notation" alt="" /> <a href="https://github.com/rough-stuff/rough-notation">GitHub - rough-stuff/rough-notation: Create and animate hand-drawn annotations on a web page</a></cite><p><a href="https://github.com/rough-stuff/rough-notation"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/c4de147c54ea5f5d0a32e69df22d99e428ce02c6/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Frepository-images.githubusercontent.com%2F266702263%2F696e7e00-9fb4-11ea-8fce-11b6f4a504a7" alt="GitHub - rough-stuff/rough-notation: Create and animate hand-drawn annotations on a web page" title="GitHub - rough-stuff/rough-notation: Create and animate hand-drawn annotations on a web page" class="entry-image" /></a></p><p>You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert</p><p><a href="https://b.hatena.ne.jp/entry/s/github.com/rough-stuff/rough-notation"><img src="https://b.hatena.ne.jp/entry/image/https://github.com/rough-stuff/rough-notation" alt="はてなブックマーク - GitHub - rough-stuff/rough-notation: Create and animate hand-drawn annotations on a web page" title="はてなブックマーク - GitHub - rough-stuff/rough-notation: Create and animate hand-drawn annotations on a web page" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/github.com/rough-stuff/rough-notation"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 5 https://mamunhpath.github.io/josh.js/ site159 2020-06-18T05:42:10Z javascript scroll library <blockquote cite="https://mamunhpath.github.io/josh.js/" title="Josh.js - A JavaScript library to animate content on page scroll."><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fmamunhpath.github.io%2Fjosh.js%2F" alt="" /> <a href="https://mamunhpath.github.io/josh.js/">Josh.js - A JavaScript library to animate content on page scroll.</a></cite><p><a href="https://mamunhpath.github.io/josh.js/"><img src="" alt="Josh.js - A JavaScript library to animate content on page scroll." title="Josh.js - A JavaScript library to animate content on page scroll." class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/mamunhpath.github.io/josh.js/"><img src="https://b.hatena.ne.jp/entry/image/https://mamunhpath.github.io/josh.js/" alt="はてなブックマーク - Josh.js - A JavaScript library to animate content on page scroll." title="はてなブックマーク - Josh.js - A JavaScript library to animate content on page scroll." border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/mamunhpath.github.io/josh.js/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 5 https://kachibito.net/useful-resource/josh-js site159 2020-06-17T01:53:31Z animation JavaScript Library <blockquote cite="https://kachibito.net/useful-resource/josh-js" title="Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」 - かちびと.net"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fkachibito.net%2Fuseful-resource%2Fjosh-js" alt="" /> <a href="https://kachibito.net/useful-resource/josh-js">Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」 - かちびと.net</a></cite><p><a href="https://kachibito.net/useful-resource/josh-js"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5c6687a6f9d3f527d81477f0f0007f4ac698c6b2/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2024%2F07%2Fsiteimg.png" alt="Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」 - かちびと.net" title="Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」 - かちびと.net" class="entry-image" /></a></p><p>Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプトです 他のJSライブラリを必要としない非依存型で、アニメーションにはAnimate.cssを使用するため2kbと非常に軽量です 使い方も簡単です &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/aj...</p><p><a href="https://b.hatena.ne.jp/entry/s/kachibito.net/useful-resource/josh-js"><img src="https://b.hatena.ne.jp/entry/image/https://kachibito.net/useful-resource/josh-js" alt="はてなブックマーク - Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」 - かちびと.net" title="はてなブックマーク - Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」 - かちびと.net" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/kachibito.net/useful-resource/josh-js"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 16 https://github.com/bradtraversy/vanillawebprojects site159 2020-06-16T05:34:51Z javascript Sample まとめ <blockquote cite="https://github.com/bradtraversy/vanillawebprojects" title="GitHub - bradtraversy/vanillawebprojects: Mini projects built with HTML5, CSS &amp; JavaScript. No frameworks or libraries"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fgithub.com%2Fbradtraversy%2Fvanillawebprojects" alt="" /> <a href="https://github.com/bradtraversy/vanillawebprojects">GitHub - bradtraversy/vanillawebprojects: Mini projects built with HTML5, CSS &amp; JavaScript. No frameworks or libraries</a></cite><p><a href="https://github.com/bradtraversy/vanillawebprojects"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/5b252fe010f65cafcced8951ed87be92a14ae2ea/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fopengraph.githubassets.com%2Fcbb0484c9abc3277bb1107a8f92292865a00df44621dfb1041a754e068dd5017%2Fbradtraversy%2Fvanillawebprojects" alt="GitHub - bradtraversy/vanillawebprojects: Mini projects built with HTML5, CSS &amp; JavaScript. No frameworks or libraries" title="GitHub - bradtraversy/vanillawebprojects: Mini projects built with HTML5, CSS &amp; JavaScript. No frameworks or libraries" class="entry-image" /></a></p><p>You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert</p><p><a href="https://b.hatena.ne.jp/entry/s/github.com/bradtraversy/vanillawebprojects"><img src="https://b.hatena.ne.jp/entry/image/https://github.com/bradtraversy/vanillawebprojects" alt="はてなブックマーク - GitHub - bradtraversy/vanillawebprojects: Mini projects built with HTML5, CSS &amp; JavaScript. No frameworks or libraries" title="はてなブックマーク - GitHub - bradtraversy/vanillawebprojects: Mini projects built with HTML5, CSS &amp; JavaScript. No frameworks or libraries" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/github.com/bradtraversy/vanillawebprojects"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 27 https://webdesign.tutsplus.com/introduction-to-javascript-event-listeners--cms-35236t site159 2020-06-15T01:59:48Z JavaScript event listener <blockquote cite="https://webdesign.tutsplus.com/introduction-to-javascript-event-listeners--cms-35236t" title="An Introduction to JavaScript Event Listeners for Web Designers | Envato Tuts+"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fwebdesign.tutsplus.com%2Fintroduction-to-javascript-event-listeners--cms-35236t" alt="" /> <a href="https://webdesign.tutsplus.com/introduction-to-javascript-event-listeners--cms-35236t">An Introduction to JavaScript Event Listeners for Web Designers | Envato Tuts+</a></cite><p><a href="https://webdesign.tutsplus.com/introduction-to-javascript-event-listeners--cms-35236t"><img src="" alt="An Introduction to JavaScript Event Listeners for Web Designers | Envato Tuts+" title="An Introduction to JavaScript Event Listeners for Web Designers | Envato Tuts+" class="entry-image" /></a></p><p></p><p><a href="https://b.hatena.ne.jp/entry/s/webdesign.tutsplus.com/introduction-to-javascript-event-listeners--cms-35236t"><img src="https://b.hatena.ne.jp/entry/image/https://webdesign.tutsplus.com/introduction-to-javascript-event-listeners--cms-35236t" alt="はてなブックマーク - An Introduction to JavaScript Event Listeners for Web Designers | Envato Tuts+" title="はてなブックマーク - An Introduction to JavaScript Event Listeners for Web Designers | Envato Tuts+" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/webdesign.tutsplus.com/introduction-to-javascript-event-listeners--cms-35236t"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 1 https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/ site159 2020-06-08T23:03:03Z CSS Javascript <blockquote cite="https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/" title="How to Get All Custom Properties on a Page in JavaScript | CSS-Tricks"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fcss-tricks.com%2Fhow-to-get-all-custom-properties-on-a-page-in-javascript%2F" alt="" /> <a href="https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/">How to Get All Custom Properties on a Page in JavaScript | CSS-Tricks</a></cite><p><a href="https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/2e0860f38aeadeb66551a76e83bcead2889c5aa0/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fi0.wp.com%2Fcss-tricks.com%2Fwp-content%2Fuploads%2F2020%2F05%2Fhow-to-get-all-custom-props-featured.png" alt="How to Get All Custom Properties on a Page in JavaScript | CSS-Tricks" title="How to Get All Custom Properties on a Page in JavaScript | CSS-Tricks" class="entry-image" /></a></p><p>Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. We can use JavaScript to get the value of a CSS custom property. Robin wrote up a detailed explanation about this in Get a CSS Custom Property Value with JavaScript. To review, let’s say we’ve dec...</p><p><a href="https://b.hatena.ne.jp/entry/s/css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/"><img src="https://b.hatena.ne.jp/entry/image/https://css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/" alt="はてなブックマーク - How to Get All Custom Properties on a Page in JavaScript | CSS-Tricks" title="はてなブックマーク - How to Get All Custom Properties on a Page in JavaScript | CSS-Tricks" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/css-tricks.com/how-to-get-all-custom-properties-on-a-page-in-javascript/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> 4