-
npm-scriptsでprettierが動かない！バージョンを変えると直ると思っていたら実はgitignoreが関係したという話
はじめに npmを使用してサイト制作をする際にコード自動整形ツール「prettier」を使用しています。 prettierのバージョンが3にあがってから自動整形…
-
ブラウザバックをjavascriptで判定する方法とつかいどころ
※本ページはプロモーションを含みます はじめに ホームページを閲覧中、前のページに戻りたい時にはだいたいの人がブラウザの戻るボタン（ブラウザバック）を使用すると…
-
tailwindcssの使い方をさくっと説明 – ざっくり入門したい人向け
※本ページはプロモーションを含みます tailwindcssはcssフレームワークです。他のCSSフレームワークとの違いはtailwindcssはユーティリティ…
-
Vscode＋wsl2でWordPressコード規約をもとにした自動整形を実現する方法 – 後の作業をもっと楽に
今最も人気のあるコードエディタといえばMicrosoftのVisual Stuido Codeではないでしょうか？拡張機能を使えばコーディング規約に基づき自動整…
-
新しいページトップボタンの処理の書き方。【CSS】scroll-behaviorと【JS】scrollIntoViewを使ったスムーズスクロール
WEBサイトの定番部品の「ページトップへ戻るボタン」。だいたいのWEBサイト、ランディングページ（LP）で必要なので使い回している人も少なくないはずです。jQu…
-
tailwindcssをWordPressにマッチさせる方法 – テーマ開発における相性の悪さをカバーしよう
※本ページはプロモーションを含みます tailwindcssというCSSフレームワークが人気です。非常に便利なのでWordPressテーマ開発に導入して見たとこ…
-
jQueryなしでも大丈夫！Ajax処理を生のjavascriptで行う方法
Ajaxとは Asynchronous + JavaScript + XMLの頭文字を使用した非同期処理のことです。jQueryで書くと楽に書くことができます。…
-
Ajaxでjsonファイルを読み込んでhtmlを更新する簡単な方法（jQuery使用）
WEBサイトで部分的に更新できるようにしたい場合、そのためにWordPressやMovableTypeなどのCMSを用意するのは少し大がかりすぎるなと思うケース…
-
JSONファイルはコメントアウトできません。でもなんとかする方法
※本ページはプロモーションを含みます JSONファイルでコメントアウトはできません Ajaxを利用して外部データを取得、それをもとにレンダリングをする機会がかな…
-
browserslistはpackage.jsonに書くか.browseslistrcに書くか
browserslistとは何か 名前のとおりターゲットブラウザを設定できるツールで色々なNodeのツールで使用できます。例えばautoprefixerやbab…
-
Stylelintを利用してコードを自動整形する方法
cssを分析して間違いを指摘してくれるツールStylelint。これを使えば複数人でコードを共有していても自動的に同じ作法で書かれたコードを作ることができます。…
-
PostCSSで入れ子を実現できるプラグイン「postcss-nesting」使用時に起きる問題と解決法
cssのポストプロセッサPostCSSは使用したい機能だけを利用してcssを加工するツールです。非常にたくさんのプラグインが存在しその種類によってはSASSの機…
-
Edgeで画像の右上のマークは何？出る条件と影響について
久しぶりにEdgeを画像にマウスカーソルをあてたらに右上に知らないアイコンが出て「おや？」と思ったかたはいないでしょうか？ 他の画像に同じことをしてもアイコンが…
-
jsonファイルを利用してデータとテンプレートを分ける – npm + nunjucks + stylus で静的サイト制作を効率的にする(6)
テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。 ヘッダーやフッターなどのペー…
-
StylusでヘルパーCSSを作成する際に便利な関数、mixin（メディアクエリ編）
sassではよくメディアクエリを設定しやすくするためmixinを使用しますがstylusでも同様にメディアクエリ用のmixinを作成すると効率が各段によくなりま…
-
webpackにbabelを導入する – npm + nunjucks + stylus で静的サイト制作を効率的にする(5)
webpackを使用してjsファイルを集束（バンドル）することができましたがJavascriptは様々な規格があるので環境によって動かない場合があります。 そう…
-
StylusでヘルパーCSSを作成する際に便利な関数、mixin（margin、padding編）
node.js製のCSSプリプロセッサstylusは変数を使用でき、またmixinという決まった処理を自動的に展開させることができる機能があるのでヘルパースタイ…
-
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を利用してブラウザを自動リ…