【Reactで作る】CSS＋Reactで実装するアコーディオンリスト | javascript | react | jsx

Facebookが開発したJavaScriptライブラリReact.jsを使用して「アコーディオンリスト」を作成しました。また、React.js使用時に推奨されているJavaScriptの構文拡張であるJSXを使用しています。これは、UIがどのような見た目かJavaScript自体に記述するため…

2020-09-30

【コピペok】はてなブログ記事デザインサンプル集スマホも簡単にカスタマイズ可能！ | はてなブログデザインカスタマイズ

はてなブログカスタマイズ-デザインはてなブログカスタマイズデザインツール-CSS生成ツールツール CSS生成ツール WEBデザイン CSS

はてなブログの記事用デザインのパーツを備忘録ついでにツール的な感じでまとめました。CSSを生成するツールになっているため、クラス名・スタイルの変更が可能です。スマホからでも簡単に、カスタマイズから実装までができるようにスタイルの編集、ボタンで…

2020-08-25

【Reactで作る】iOSのスイッチのようなトグルボタン | javascript | react | jsx

JavaScript-React-Reactで作る-トグルボタン JavaScript-React-Reactで作る JavaScript-React JavaScript React Reactで作るトグルボタン

Facebookが開発したJavaScriptライブラリReact.jsを使用して「トグルボタン」を作成しました。また、React.js使用時に推奨されているJavaScriptの構文拡張であるJSXを使用しています。これは、UIがどのような見た目かJavaScript自体に記述するためのもので…

2020-06-30

【JS】ドラッグアンドドロップでHTML要素の位置を移動させる | jQuery | JavaScript ... jQuery拡張(プラグイン)

jQuery-プラグイン-要素移動 JavaScript-要素移動 JavaScript 要素移動 jQuery-プラグイン jQuery プラグイン

ドラッグでHTML要素の位置を移動させるmousemove(touchmove)イベントを使って、HTML要素のドラッグによる位置の移動を実装します。※ブラウザによっては正常に動作しない可能性があります。移動可能にする...移動不可能にする(クラスの切り替え)...jQuery 拡…

2020-06-26

【javascript】要素の範囲外をクリックした時の処理を実装する | .closest()

JavaScript-スニペット-特定要素外のクリックイベント JavaScript-スニペットスニペット JavaScript 特定要素外のクリックイベント

JavaScriptで特定要素の領域外をクリックしたときのイベント処理です。特定要素外のクリックイベント※当処理では、jQueryを使用しています。closestメソッドを使用して、特定要素外のクリックを判断します。メニューバーをイメージしたデモです。対象要素…

2020-06-14

ワンクリックでテキストをコピーする方法-PC・スマホ対応【JavaScript】追記：iOSでズーム,拡大させない

JavaScript-スニペット-コピー JavaScript スニペットコピー JavaScript-スニペット

JavaScript - コピー方法 DEMO 入力欄入力欄以外コード例更新情報投稿日 2019/10/03 PC・スマホでJavaScriptを使用してクリップボードにHTMLのテキストをコピーする方法です。当記事のコピー処理が動作したブラウザ Chrome,Microsoft Edge,Firefox,Saf…