JavaScript - Vanilla

文章内に折れ線グラフを挿入する

Result See the Pen Stonks – Sparklines Renderer by kachibito (@kachibito) on CodePen. 非依存のvanillaなコードで動作します...

Excel等のスプレッドシートの表のコピーをMarkdown記法に変換する

Result See the Pen xxGeWEy by kachibito (@kachibito) on CodePen. 万能ではないですが、ExcelやGoogleスプレッドシートなどの表のコピーをMar...

Webページのサイドに自動で目次を作る

Result See the Pen Dynamic Active Table of Contents by kachibito (@kachibito) on CodePen. 左ペインの目次を自動で生成する、と...

入力したパスワードの文字の長さに応じて背景画像が鮮明になっていく

Result See the Pen Image Password Strength - #046 of #100Days100Projects by kachibito (@kachibito) on CodePen. ...

簡易的なダークモード

Result See the Pen Smarter inverted “dark mode” by kachibito (@kachibito) on CodePen. 簡単なダークモードを少しのCSSとJSで実装す...

iframeでもHTMLでも対応できる超軽量で非依存のLightboxスクリプト

Result See the Pen GVpdWB by kachibito (@kachibito) on CodePen. こういうベーシックなもの最近は全く見かけなくなりましたけど・・案件になると割と要望は頂...

table内をテキスト検索して該当キーワードを持つ列を表示する

Result See the Pen Light Javascript Table Filter by kachibito (@kachibito) on CodePen. table内のすべてのテキストから検索し...

Webページ最上部に、スクロールに応じてプログレスバーを表示する

Result See the Pen QRrYyV by kachibito (@kachibito) on CodePen. スクロールするとプログレスバーが表示されるやつ。非依存です 仕様が分かりやすいようにド派...

CSS変数を制御するJavaScriptスニペット

Result See the Pen Set CSS Variable with JavaScript by Chris Coyier (@chriscoyier) on CodePen. CSS変数を更新するJSスニペットで...
Ads