javascript
-
WordPressでAjax処理を行う時の簡単な方法と流れ
※このページはプロモーションを含みます 目次 はじめに①Ajax通信用のjavascriptで使用できるグローバルな変数を設定する②Ajax通信の処理内容をPH…
-
入力内容に応じて高さを自動調整するtextareaの作り方（Javascript、CSS<field-sizing>、jQuery、ライブラリを使った各方法）
※このページはプロモーションを含みます 目次 はじめに高さを自動調整する４つの方法の概要土台のHTMLとCSSjavascript（バニラJS）での調整CSSで…
-
Astro Frameworkを相対リンクにする方法 – フレームワークAstro.jsで静的サイト制作
目次 はじめにAstro（Astro.js）とは相対リンクを実現するためにプラグイン「astro-relative-links」の設定方法はじめに ウェブフレー…
-
jsカルーセルswiperでキャッチ画像は見切れてテキスト部分は見切れないレイアウトを実現する方法
※本ページはプロモーションを含みます 目次 はじめに今回作りたいカルーセルの仕様どうやって実現するの？実際のコード例実際の表示最後にはじめに カルーセル（スライ…
-
スタイルガイドジェネレーターfractalでHandlebarsではなくNunjucksを使用する方法
※本ページはプロモーションを含みます 目次 はじめにFractalとはnunjucksとは前提条件プロジェクトの構築パッケージを追加する（@frctl/nunj…
-
inputに入力された全角数字を半角数字にリアルタイム変換するjavascriptとその仕組み（jQuery不使用）
※本ページはプロモーションが含まれています 目次 はじめにコードのサンプルコードの詳細と注意点対象イベントは”input”。”…
-
ReactをCDNで利用した場合のuseState、useEffectの書き方
目次 はじめにuseState、useEffectとは必要な外部ファイルをCDNから呼び出す処理を記入する結果はじめに ReactをCDNから利用することは以前…
-
これなら簡単！cdnでreactとjsxを呼び出してサイトに組み込む方法
目次 はじめにCDNのURLをscriptタグで呼び出すReactとReactDOMを呼び出すbabelを呼び出すReactを書き出すはじめに javascri…
-
ブラウザバックをjavascriptで判定する方法とつかいどころ
※本ページはプロモーションを含みます 目次 はじめにブラウザバックを判定するコードなぜブラウザバックで表示がおかしくなるのかキャッシュを読み込んでいるがために表…
-
tailwindcssの使い方をさくっと説明 – ざっくり入門したい人向け
※本ページはプロモーションを含みます tailwindcssはcssフレームワークです。他のCSSフレームワークとの違いはtailwindcssはユーティリティ…
-
新しいページトップボタンの処理の書き方。【CSS】scroll-behaviorと【JS】scrollIntoViewを使ったスムーズスクロール
WEBサイトの定番部品の「ページトップへ戻るボタン」。だいたいのWEBサイト、ランディングページ（LP）で必要なので使い回している人も少なくないはずです。jQu…
-
jQueryなしでも大丈夫！Ajax処理を生のjavascriptで行う方法
目次 AjaxとはjQueryを使う書き方の記事が多いが実はもうjQueryを使用しなくても簡単にAjax処理が書ける（結論）XMLHttpRequestをもっ…
-
Ajaxでjsonファイルを読み込んでhtmlを更新する簡単な方法（jQuery使用）
WEBサイトで部分的に更新できるようにしたい場合、そのためにWordPressやMovableTypeなどのCMSを用意するのは少し大がかりすぎるなと思うケース…
-
browserslistはpackage.jsonに書くか.browseslistrcに書くか
目次 browserslistとは何かbrowserslistは％（パーセンテージ）で設定できるがシェア率はどこでわかるの？browserslistとは何か 名…
-
jsonファイルを利用してデータとテンプレートを分ける – npm + nunjucks + stylus で静的サイト制作を効率的にする(6)
テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。 ヘッダーやフッターなどのペー…
-
webpackにbabelを導入する – npm + nunjucks + stylus で静的サイト制作を効率的にする(5)
webpackを使用してjsファイルを集束（バンドル）することができましたがJavascriptは様々な規格があるので環境によって動かない場合があります。 そう…
-
flexbox使用の要素が折り返さない！？解決への鍵はflex-basisの値だった
CSSに用意されているレイアウト用プロパティdisplay:flexですがいままで未対応だったIE11のサポート終了にともないもっと気軽に使用することができるよ…
-
webpackを使用してjavascriptを集束（バンドル）する – npm + nunjucks + stylus で静的サイト制作を効率的にする(4)
前回までで次のようなことをやってきました。 nunjucks でhtml生成 stylus でcss生成 imagemin で画像圧縮 javascriptはそ…
-
画像をコピーもしくは圧縮する – npm + nunjucks + stylus で静的サイト制作を効率的にする(3)
npm + Nunjucks + stylusを使用してフォルダの変更を監視してhtml,css,jsを再生成、browserSyncを利用してブラウザを自動リ…
-
ファイル更新を感知し更新確認を簡単にする – npm + nunjucks + stylus で静的サイト制作を効率的にする(2)
npm + Nunjucks + stylusで構成される開発環境作成手順の続きです。 前回、buildコマンドでhtml,css,jsファイルをdistフォル…