JavaScript

1/2ページ

webpack5でJSとSassをコンパイル(CSSを別ファイルに出力)

webpack5を使ってJavaScriptとSassをコンパイルする方法を記録しておきます。 この記事では、以下の項目をコンパイル条件としています。 JavaScriptとCSSを別々のファイルで出力する。 出力先のCSSに自動でベンダープレフィックスを追加する。 production(本番環境用に)出力する場合のみコードを圧縮(軽量化)する。 development(開発環境用に)出力する場合 […]

VScode上でjQueryの.focus()に横線が入る

コードエディターにVScodeを使っているんですが、たまにコードに横線が入る時がある。 非推奨の書き方をすると、それを教えてくれる機能みたいですが、jQueryの.focus()に横線が入ったので調べてみた。 横線が入ったコード [crayon-616d06653597d538198811/] jQueryのリファレンスを見ると、.focus()は非推奨とはなっていない。 が、よく見てみると、.t […]

【jQuery】スマホのロングタップ(長押し)イベントの実装

Webアプリなどをレスポンシブデザインで作っている時、PCではカーソルホバー、モバイルではロングタップで要素を表示させたりしたい場合があります。意外にもロングタップイベントを受け取る方法が確立されていないので、自分で実装してみました。 その前に ライブラリを使った簡単な方法  jquery-longpressというライブラリがあり、jsファイルを読み込んで、以下のようにするだけで簡単に実装できます […]

Swiper.jsのautoplayが効かない

画像やコンテンツのスライドショーが簡単にできるJavaScriptライブラリー「Swiper.js」のautoplayオプションが効かなくて、しばらく迷走した時の話。 現象 「Swiper.js」をnpmでインストールして以下のようにインポートをして使っていたのですが、autoplayオプションが効かなかった。 [crayon-616d066535a6f019324372/] 原因 autopla […]

Swiper.jsとBootstrapでレイアウトが崩れた時の話

Bootstrapのrowとcolを使ったレイアウトの中でSwiper.jsを使おうとしたら、幅がおかしくなった。 現象 rowの中にcolを3つ入れて、横並びレイアウトをしていて、そのcolの中にSwiper.jsを入れたら、そのcolが横幅いっぱいに広がってしまった。 原因 flex関連の干渉が原因? 解決方法 以下のように、swiper-wrapperのpositionをabsoluteにす […]

PhotoSwipeの使い方(最小限の実装)

サムネイル画像をクリックすると拡大表示できるJSライブラリ「PhotoSwipe」の使い方をできるだけ簡潔にまとめてみようと思います。Light Box(ライトボックス)系のライブラリは沢山ありますが、自分はこれが一番好きかもしれません。 はじめに PhotoSwipeの公式サイトには、3ステップで実装可能とあります。 JSファイルとCSSファイルを読み込む 拡大表示用HTMLコードの挿入 Pho […]

WordPressでページ毎に別のJavaScriptを読み込む方法

以前、ショートコードを使って自作のPHPやJavaScriptを動かす方法を紹介しましたが、今回は、ページ毎に別々のJavaScriptを読み込む方法をご紹介します。 ファイルのアップロード まず、スクリプトファイルを用意します。 例えば、トップページ用のスクリプトを、 myscript_front.js その他のページ用が、 myscript_other.js すべてのページで共通して読み込みた […]

JavaScriptでselect要素のoption(項目)をセレクトする

JavaScriptでselect要素の、ある項目を選択状態にしたかった時に、ちょっとハマったのでメモ。 似たような処理で、JavaScriptでselect要素のデフォルトの項目を設定する方法がありますが、それと混同してしまったので、整理してみました。 はじめに 例えば、以下のようなセレクトボックスがあったとします。 [crayon-616d066535cbe687167552/] JavaSc […]

npmでBootstrapをインストールしてWebpackでコンパイルする方法(同時にjQueryも)

ホームページを作る時、BootstrapとJQueryを使う機会が多いんですが、今までは、それぞれのCDNから読み込んで使っていました。 今回は、npmを使ってプロジェクトに直接インストールしてみます。Bootstrapは、JQueryに依存しているので、JQueryも一緒にインストールします。 全体的な流れとしては、 ・node.js(npm)のインストール ・webpackの導入 ・Boots […]