【JS】Webサイト開発・HTMLコーディング・Webページ閲覧時のJavaScript便利機能まとめ

Webサイト開発時のHTMLコーディング、デザイン制作、閲覧時などで、ブラウザ上で素早く使用できる便利機能のJavaScriptコードをまとめました。 ブラウザのコンソールで使用して活用できるかと思います。 ・ローカル画像の貼り付け・表示確認 ・日本語を含むURLを日本語のままコピペ（コピーアンドペースト）する ・JavaScriptファイルを追加する

【CSS】背景色 グラデーション --サンプル集-- background:linear-gradient 【WEBデザイン】

投稿日：2019/07/19 CSSのbackgroundプロパティに指定する複雑な値を、備忘録として書き記した記事です。 虹色 虹色 <div class="style1"></div> .style1{ background: linear-gradient(135deg,rgb(255, 0, 0),rgb(255, 20, 172),rgb(90, 40, 255), rgb(60, 120, 255),rgb(80, 255, 237),rgb(100, 255, 169), rgb(170, 255, 120),rgb(221, 255, 140),rgb(255, 236, 16…

【JavaScript】JSで日付の範囲チェックを行う 範囲内かどうか/大小比較のサンプルコードあります。

今回はJavaScriptでの日付の範囲チェックについて、紹介していきます。1つの日付が対象の日付の範囲内かどうか、2つの日付範囲が有効かどうかをサンプルコードを交えてご紹介します。Dateオブジェクトに変換して判定する方法です。

【JavaScript】JSで日付が有効かどうかチェックする 範囲/正規表現/フォーマットチェックのサンプルコードあり

JavaScriptで日付が有効かどうかチェックする方法を、Dateオブジェクトへの変換・正規表現で紹介しています。また、日付の範囲チェックについてのサンプルコードも紹介しています。日付の形式を判定する正規表現もいくつか紹介しています。

【JavaScript】JavaScriptでの日付の加算方法 サンプルコードあり

JavaScriptでの日付の加算方法（年月日時分秒）、月またぎ、年またぎをサンプルコードを交えて紹介しています。日付の加算・減算の計算方法はこれを見れば把握できるといった記事になったと思います。ぜひご覧ください。

【JS】window.matchMediaで画面横幅に対応した処理をする。resizeイベント、observerと比較 JavaScriptでのレスポンシブデザイン

JavaScriptによるレスポンシブ対応の実現方法をresize/observer/matchMedia別にまとめました。サンプルコードもあるので参考になればと思います。主に画面幅/要素の横幅の変更時にスタイルを変更することを想定して作成しました。

【見本あり】JavaScriptでリストをドラッグスクロールする「jQueryプラグイン」 - オプションでエンドレススクロール,慣性スクロールも可能 listmousedragscroll.js

スマートフォンのようになぞるようにしてスクロールができるjQueryPluginです。一行でマウスドラッグによるスクロールが可能なリストが実現できます。オプションには横幅、縦幅の指定や無限スクロール(endless scroll)の設定などができます。...使用方法からDEMO、メソッド・オプションの記載あり。更新情報2019-09-16https://cdn.it-the-best.com/jquery/plugin/listmousedrag/2.4/listmousedragscroll.min.js、 https://cdn.it-the-best.com/jquery/plugin/listmousedrag/2.4/listmousedragscroll.js

【Mac】やっぱりAppleはこういう所がいい。視覚を刺激する美しいダイナミックデスクトップの機能 おすすめの無料ダウンロードサイトも紹介

Macのダイナミックデスクトップの設定方法と、おすすめのダウンロードサイトを紹介しています。無料でダウンロードできるサイトもあり、おすすめです。また、ダウンロードから適用までの説明もあります。

CSSでスクロール バーをカスタマイズして、カラフルなスクロールバーのデザインを作ってみました。svgを使用しているものもあり。

cssを使用していろいろなスクロール バーのデザインを作成してみました。「::-webkit-scrollbar」をいじって、スクロール バーをカスタマイズしています。種類ごとにスクロール バーを分けて、サンプルを表示しています。色、幅、透明度、素材をカスタマイズした様々なスクロール バーのデザインがあります。

node.jsプロジェクトでnode_modulesを除外してコピーの速度を大幅に速くさせる バッチファイル Windows

node.jsプロジェクトを素早くコピーする方法です。node_modulesを除外してコピーするためにxcopyコマンドを使用します。当記事では、そのコマンドの説明、コピー（バックアップ）を素早くするための方法を紹介しています。

【Mac】Windowsのようにf2キーでリネーム(名前の変更)を行えるようにする。Mac-ショートカット設定

MacでWindowsのようにf2ボタンで、リネームをする方法です。Windowsでは、f2キーでリネームが行えましたがMacでは使えないので、ショートカットキーを追加して対応します。Macでショートカットキーを設定する場合の手順は以下です。1：システム環境設定を開く 2：キーボードのショートカットを設定する メニュータイトルにはコマンド名を正確に入力しなければいけません。リネームさせる場合は、「名前を変更」と正確に入力しましょう。

ReactでFontAwesomeのアイコンを使用する。～導入編～

FontAwesomeのアイコンもReactコンポーネントとして使用することができます。FontAwesomeとは、Webで最も人気があるアイコンセットで無料でできます。そんなFontAwesomeアイコンをReactコンポーネントとして表示させる方法を、サンプルコードとインストールに分け、導入編として解説しています。JavaScriptではなくTypeScript、JSX記法でサンプルコードは記述しています。

はてなブログで【目次】をサイドバーに表示する方法 はてなブログカスタマイズ

今回のはてなブログカスタマイズは、記事の目次をサイドバーにも表示するものです。記事のよこに目次を置くことで読んでいるところを把握することができ、記事が読みやすくなります。記事が長い場合に効果的です。記事の目次を表示するには、記事編集画面で入力補助ツールバーから「目次」ボタンをクリックします。という文字が入力され、この文字の位置に記事の目次が表示されます。記事の見出しが目次として表示されます。サイドバーに表示本題のサイドバーに表示する方法ですが、私は、HTML要素のクローンを生成して表示する方法をとりました。サイドバーには事前に、HTMLモジュールを一番下に設置しておきます。

【コピペok】はてなブログでユーザー向けのカテゴリー別サイトマップページを作成する 表示内容,スタイルの変更可能 はてなブログカスタマイズ はてなブログツール

カテゴリー別記事一覧のサイトマップページ はてなブログで、ユーザー向けのサイトマップページを作成するためのJavaScriptコードとスタイルコードを生成します。 カテゴリー別に記事一覧を取得し、記事内に表示します。 表示形式の種類を選択し、コードをコピーします。コピーしたコードを記事内(固定ページ)に貼り付けることで、カテゴリー別の記事一覧を表示するサイトマップページを作成することができます。

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

Facebookが開発したJavaScriptライブラリReact.jsを使用して「アコーディオンリスト」を作成しました。 また、React.js使用時に推奨されているJavaScriptの構文拡張であるJSXを使用しています。 これは、UIがどのような見た目かJavaScript自体に記述するためのものです。 「Script」タグのtype属性が「text/babel」となっていますがこれは、タグ内のコードでJSXが使えるようにするためです。 type属性に有効でない値を設定することで、そのタグ内のコードはタダのテキストとして読み込まれます。 Babelのランタイムトランスパイラは、この属性があるタグ内のテキスト(JSXで書かれたJavaScriptコード)を正しいJavaScriptコードに変換して実行してくれます。 ただし、変換処理があるため全体的に処理が重くなるので、この方法は学習向けで本番環境には適していません。 開閉の処理は、Reactコンポーネントの状態を更新し再レンダリングして実現しているわけではなく、対象要素の属性を直接変更して行っているため、Reactで作る意味があまりない

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

はてなブログの記事用デザインのパーツを備忘録ついでにツール的な感じでまとめました。CSSを生成するツールになっているため、クラス名・スタイルの変更が可能です。スマホからでも簡単に、カスタマイズから実装までができるようにスタイルの編集、ボタンでコードのコピーができるようになっています。コピペOKです。コピー用テキストエリア(ページ下部)を設置したので、使用したいデザイン(スタイル)をまとめてコピーすることが可能です。カラーボックス - 背景色,枠線,アイコン付き 文字の強調表示 1 - 下線,マーカー 文字の強調表示 2 - 囲い ブログカードのヘッドアイコン

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

Facebookが開発したJavaScriptライブラリReact.jsを使用して「トグルボタン」を作成しました。 また、React.js使用時に推奨されているJavaScriptの構文拡張であるJSXを使用しています。 これは、UIがどのような見た目かJavaScript自体に記述するためのものです。 状態を持つコンポーネント 状態に応じて見た目が変わる JSX(Babel)を利用したJavaScript 「Script」タグのtype属性が「text/babel」となっていますがこれは、タグ内のコードでJSXが使えるようにするためです。 type属性に有効でない値を設定することで、そのタグ内のコードはタダのテキストとして読み込まれます。 Babelのランタイムトランスパイラは、この属性があるタグ内のテキスト(JSXで書かれたJavaScriptコード)を正しいJavaScriptコードに変換して実行してくれます。 ただし、変換処理があるため全体的に処理が重くなるので、この方法は学習向けで本番環境には適していません。

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

ドラッグでHTML要素の位置を移動させるmousemove(touchmove)イベントを使って、HTML要素のドラッグによる位置の移動を実装します。※ブラウザによっては正常に動作しない可能性があります。移動可能にする...移動不可能にする(クラスの切り替え)...jQuery 拡張版...jQuery.prototype.movable...要素の移動処理をjQueryのメソッドとして拡張し、引数にはタップ開始時、移動時、移動終了時のコールバック関数を用意しました。...補足move後のクリック無効は、リンクなどが設定されている要素の移動後のイベント(リンク先に飛ぶなど)を発生させないためです。

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

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

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

JavaScript - コピー方法 DEMO 入力欄 入力欄以外 コード 例 PC・スマホでJavaScriptを使用してクリップボードにHTMLのテキストをコピーする方法です。 JavaScript - コピー方法 DEMO 入力欄 textarea sample text 112358130000000 copy copy 貼り付け用 入力欄以外 p sample text copy 貼り付け用 div sample text copy 貼り付け用 コード function copy(id) { var copyText = document.getElementById(id); va…