localStorageで保存可能の、シンプルなテーマ切り替え
Result See the Pen Theme Switcher Demo - Cleaned Up by kachibito (@kachibito) on CodePen. ダークモードにも使えるテー...
JavaScript - ユーザー補助系
CSS+JavaScriptでローディング時にスケルトンスクリーン
Result See the Pen Untitled by kachibito (@kachibito) on CodePen. ユーザーに優しいとウワサのローディング時のスケルトンスクリーンを殆どCSS、ほ...
VanillaなJavaScriptでページ内検索
Result See the Pen Demo In-Page filtered Search by kachibito (@kachibito) on CodePen. よくあるページ内インクリメンタル検...
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で実装す...
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. スクロールするとプログレスバーが表示されるやつ。非依存です 仕様が分かりやすいようにド派...
mailtoリンクのクリックでクリップボードにコピーする
Result See the Pen Copy mailto: email to clipboard by kachibito (@kachibito) on CodePen. mailtoリンクをクリックすると、...
リスト内で指定したキーワードにマッチする項目だけハイライトする
Result input要素にキーワードを入力するだけでリスト内のマッチする項目をインタラクティブにハイライトします。 jQuery html via jSearch
code、pre内のコードを別窓でtextareaに表示させる
Result SyntaxHighlighterによく付いてるやつ。 これ自体需要は少なそうだけど応用すれば一般向けに使えそうです。 jQuery html via via:
アクセスした際に任意のメッセージを少しの間、表示する
Result よく見かけるやつです。 jQuery css via Put a message in top of the page with jQuery
アップロードするファイルの名前、サイズ、コンテンツタイプを取得する
Result 選択したファイルの名前、サイズ、コンテンツタイプをリストにしてアップロード前に表示します。inputにmultiple入れてますので複数選択も可能です。 jQuery html via Stack O...
HTMLをCanvasにして画像としてダウンロードできるようにする
Result See the Pen beGPjj by kachibito (@kachibito) on CodePen. スニペットとは言えませんが・・ｗ html2canvasとjQueryを使ってCanvas化、ダウンロ...
li要素をクリックでハイライトする
Result li要素をクリックでハイライトする。1つの情報が多いリストの可視性を高めたり等、他にも応用できそう。このままのコードだとネストされたリストは子要素も全てハイライトするので入れ子に対応するには少し工夫が必要になります。 ...
inputやtextareaで、指定した文字数を超えた際に警告文を出す
Result maxlength属性は何かとアレなので文字数自体は制限せずに、予め設定した文字数を超過した際に警告文を出すようにする jQuery html via Maximum Characters lim...
文字列をリアルタイム検索してハイライトする
Result jQuery css html via Real-Time Search in JavaScript by Osvaldas Valutis.
テーブル上にあるマウスの位置を表示させる
Result テーブル上のマウスの位置を表示する jQuery css html via
テーブル内で空の要素をハイライトさせる
Result 動的に作られたテーブル向けになりそうです。空の要素がある行を削除、みたいな応用もできそう。 jQuery css html via