FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる
Result See the Pen Flexible Full-Width “Justified” Text Blocks by kachibito (@kachibito) on CodePen. text-a...
JavaScript - Archives
mailtoリンクのクリックでクリップボードにコピーする
Result See the Pen Copy mailto: email to clipboard by kachibito (@kachibito) on CodePen. mailtoリンクをクリックすると、...
フォームの内容を元に任意のUIに遷移
Result See the Pen CSS Grid: Form to Badge by kachibito (@kachibito) on CodePen. フォームの内容から別のUIに遷移する、みたいなの ...
マウスで選択した文字数を数える
Result See the Pen WPXdMP by kachibito (@kachibito) on CodePen. マウスドラッグした文字数を数えます。JSはバニラです 使う機会があるかは分かりません ...
検索アイコンからローディングにアニメーション遷移
Result See the Pen Search loading by kachibito (@kachibito) on CodePen. 検索アイコンから時計アイコン（ローディング）に遷移する、みたいなやつです JSというよ...
アニメーション付きの数字カウンター
Result Webアプリなんかの登録者数アピール等やペラサイトのアフィリの類でよく見かけるやつです 0に戻してからeasingで元の数字に遷移させています jQuery html via
CSS変数を制御するJavaScriptスニペット
Result See the Pen Set CSS Variable with JavaScript by Chris Coyier (@chriscoyier) on CodePen. CSS変数を更新するJSスニペットで...
スクロールに応じて要素をアニメーション付きで表示させる
Result See the Pen show elements on scroll by kachibito (@kachibito) on CodePen. jQuery css html via ...
placeholderにテキストをランダム表示する
Result placeholderのテキストを複数ランダム表示する jQuery html via flex-box nav with random placeholders
見出しを固定してスクロール分の割合を%とプログレスバーで明示
Result jQuery 見出しの固定はJSではなくCSSのposition: sticky;が使われています html via Sticky Title/Page Progress Bar
表示されている画像を任意の画像に変更する
Result 画像をクリックすると別の任意の画像を選択出来るようになります。 jQuery html via jquery-imgedit
編集できるtableと、その入力値に連動した簡易的なグラフ
Result 編集はcontenteditable属性を使っています。 動作サンプルなのですべてのセルは編集可能となっていますので、コンテンツに応じて便宜変更してください jQuery css html ...
複数inputに入力された数字の合計を表示する
Result jQuery 複数inputに入力された数値の合算を出します。 簡易的な見積もりとかデータを扱う時に使えそうでしょうか html via jQuery: Calculate Sum Of a...
特定の文字だけスタイリングする
Result jQuery css html via
背景画像を画面いっぱいにしてスライドショー化する
Result jQuery css html via Full Clip - fullscreen body background image jQuery plugin
スクロールに応じて背景画像を徐々にblurさせる
Result jQuery css html via Zoom and Blur background Image
Wikipedia内を検索する
Result Wikipedia内を検索、その場に表示 jQuery html via Wikipedia Viewer
コピーライトの年数表示を自動化する
Result 年の値を現地時間で取得するgetFullYearでコピーライトによく表示されてたりする年号表記を自動化します jQuery html via getFullYear メソッド (Date) (J...
画像の上で右クリック出来ないようにする
Result つい最近の案件で相談されたので、まだこういうの需要あるかもと思って書きました。 画像のみ、右クリックを防止しています。あんまり期待する効果は得られないとは思いますが・・画像を保護する目的なら最低でも透かしは必ず入れたほ...
リストを任意のカラム数に分ける
Result 普通のリストを任意のカラム数で分けます。現在は3カラムに分けられています。 var num_cols = 3,の数値を変更すれば設定したカラム数に分けられます。 マークアップには変更を加えず処理出来るので覚えてお...
リスト内で指定したキーワードにマッチする項目だけハイライトする
Result input要素にキーワードを入力するだけでリスト内のマッチする項目をインタラクティブにハイライトします。 jQuery html via jSearch
Webページをフルスクリーン表示にするボタンを設置する
Result ボタンを押せばフルスクリーン表示になりますが、上記はiframeで表示していますのでここで押してもフルスクリーンにならないようです。このあたりはWeb developer guide | MDNの「フルスクリーンの要...