ミニ折れ線グラフ Result See the Pen Micrographs by kachibito (@kachibito) on CodePen. jQueryを使ったミニ折れ線グラフです。コードは長いのでCodepenでご参照...2019.11.10 | 10時18分06秒
mailtoリンクのクリックでクリップボードにコピーする Result See the Pen Copy mailto: email to clipboard by kachibito (@kachibito) on CodePen. mailtoリンクをクリックすると、...2019.04.21 | 9時58分25秒
検索アイコンからローディングにアニメーション遷移 Result See the Pen Search loading by kachibito (@kachibito) on CodePen. 検索アイコンから時計アイコン(ローディング)に遷移する、みたいなやつです JSというよ...2018.12.22 | 10時12分47秒
スクロールに応じて要素をアニメーション付きで表示させる Result See the Pen show elements on scroll by kachibito (@kachibito) on CodePen. jQuery css html via ...2018.09.04 | 10時09分43秒
編集できるtableと、その入力値に連動した簡易的なグラフ Result 編集はcontenteditable属性を使っています。 動作サンプルなのですべてのセルは編集可能となっていますので、コンテンツに応じて便宜変更してください jQuery css html ...2018.02.22 | 11時18分27秒
リストを任意のカラム数に分ける Result 普通のリストを任意のカラム数で分けます。現在は3カラムに分けられています。 var num_cols = 3,の数値を変更すれば設定したカラム数に分けられます。 マークアップには変更を加えず処理出来るので覚えてお...2016.12.26 | 10時33分50秒
code、pre内のコードを別窓でtextareaに表示させる Result SyntaxHighlighterによく付いてるやつ。 これ自体需要は少なそうだけど応用すれば一般向けに使えそうです。 jQuery html via via:2016.06.27 | 11時32分41秒
緯度経度を指定したテキストにマウスを乗せるとGoogleMapも動くようにする Result マウスホバーでGoogle Mapが動的に移動する、みたいなの。リストには予めカスタムデータ属性で緯度経度を設定してあります。 Google map APIも読み込みます。 jQuery css ...2016.06.23 | 11時19分22秒
li要素をクリックでハイライトする Result li要素をクリックでハイライトする。1つの情報が多いリストの可視性を高めたり等、他にも応用できそう。このままのコードだとネストされたリストは子要素も全てハイライトするので入れ子に対応するには少し工夫が必要になります。 ...2016.05.28 | 10時35分20秒
レスポンシブWebデザイン対応のメガメニュー Result See the Pen megamenu.js - Last responsive megamenu you'll ever need by Mario Loncarek (@riogrande) on CodePen. ...2016.02.02 | 10時24分48秒
inputやtextareaで、指定した文字数を超えた際に警告文を出す Result maxlength属性は何かとアレなので文字数自体は制限せずに、予め設定した文字数を超過した際に警告文を出すようにする jQuery html via Maximum Characters lim...2015.12.01 | 10時14分22秒
テーブル内で空の要素をハイライトさせる Result 動的に作られたテーブル向けになりそうです。空の要素がある行を削除、みたいな応用もできそう。 jQuery css html via2013.04.22 | 11時49分42秒