javascript
-
Astro.jsで生成フォルダをdistから任意のフォルダ名にする方法 – フレームワークAstro.jsで静的サイト制作
最新のWEBフレームワーク「Astro.js」で静的サイトを作成するために覚えておくとよいこと第2弾です。 今回はビルドコマンドで生成されるフォルダをデフォルト…
-
Astro.jsを相対リンクにする方法 – フレームワークAstro.jsで静的サイト制作
はじめに ウェブフレームワークAstro(Astro.js)を利用して静的サイトを作成する際に各画像パスだったりサイト内リンクが相対リンクだと便利です。この記事…
-
これは便利!HTMLのdialogタグでのモーダルウインドウ実装とアニメーション設定方法
※このページはプロモーションを含みます モーダルウインドウ機能を実装するのに古い方法で作成していませんか? 古い方法とは次のようなやり方です。 この記事はdia…
-
jsでもっとちゃんとタブUIを実装する(jQuery不使用)- ページ更新してもタブがリセットされないやり方
※本ページはプロモーションを含みます WEBサイトに一般的なタブのUIを追加したい時、インターネットで実装のサンプルコードを探すことがあると思います。たくさんの…
-
jsカルーセルswiperでキャッチ画像は見切れてテキスト部分は見切れないレイアウトを実現する方法
※本ページはプロモーションを含みます はじめに カルーセル(スライダー)をWEBサイトに導入するときにおそらく第1候補に上がってくるだろうプラグインswiper…
-
inputに入力された全角数字を半角数字にリアルタイム変換するjavascriptとその仕組み(jQuery不使用)
※本ページはプロモーションが含まれています はじめに フォームで入力欄に全角数字だけを入力してほしいときがあります。 javascriptでリアルタイム変換が可…
-
ReactをCDNで利用した場合のuseState、useEffectの書き方
はじめに ReactをCDNから利用することは以前の記事で書きました。 ▼過去の記事はこちら Reactに限らずjavascriptのフレームワークでは状態管理…
-
これなら簡単!cdnでreactとjsxを呼び出してサイトに組み込む方法
はじめに javascriptの人気ライブラリ「React」ですが使用方法を調べるとnpmでインストールする方法にたどりつくと思います。 それも良いのですが既に…
-
Day.jsの使い方と活用方法
はじめに javascriptで日付処理を扱うことは大変なのでライブラリを使用することが多々あります。特に有名なjavascriptの日付ライブラリ「Day.j…
-
ブラウザバックをjavascriptで判定する方法とつかいどころ
※本ページはプロモーションを含みます はじめに ホームページを閲覧中、前のページに戻りたい時にはだいたいの人がブラウザの戻るボタン(ブラウザバック)を使用すると…
-
新しいページトップボタンの処理の書き方。【CSS】scroll-behaviorと【JS】scrollIntoViewを使ったスムーズスクロール
WEBサイトの定番部品の「ページトップへ戻るボタン」。だいたいのWEBサイト、ランディングページ(LP)で必要なので使い回している人も少なくないはずです。jQu…
-
jQueryなしでも大丈夫!Ajax処理を生のjavascriptで行う方法
Ajaxとは Asynchronous + JavaScript + XMLの頭文字を使用した非同期処理のことです。jQueryで書くと楽に書くことができます。…
-
Ajaxでjsonファイルを読み込んでhtmlを更新する簡単な方法(jQuery使用)
WEBサイトで部分的に更新できるようにしたい場合、そのためにWordPressやMovableTypeなどのCMSを用意するのは少し大がかりすぎるなと思うケース…
-
JSONファイルはコメントアウトできません。でもなんとかする方法
※本ページはプロモーションを含みます JSONファイルでコメントアウトはできません Ajaxを利用して外部データを取得、それをもとにレンダリングをする機会がかな…
-
jQueryでリンク先が別ドメインのURL(外部サイト)かどうか判定して自動的にtarget=”_blank” rel=”noreferrer noopener”を加えるスクリプト
完全に備忘録です。 前提条件 jqueryをheadタグ内で読み込んでいる ES2015(ただlet使用しているだけ…)を使用しても問題ない状況である メモ a…
-
説明できますか?わかった気になるjavascriptのモジュール。
javascriptのimport文を使用するモジュール機能ですが、いままでNext.jsやReactのサンプルコードなどで多く使用されていたためあまり考えずに…
-
AdobefontsのwebフォントがIE11表示されない!それでもIE11で表示させたい人へ
いままで問題なく表示されていたものが急にうまくいかなくなることはよくあることです。Adobeが提供しているフォントサービス「Adobefonts」を利用して表示…
-
そのページでは使っていないjQueryプラグインでエラーを出さないように。jQueryプラグイン存在判定の方法
フロントエンドは開発方法の発展のスピードがすさまじくjavascriptもそのまま書かずwebpackなどのツールを使用することが増えてきました。jQueryに…