web制作
-
npm-scriptsでprettierが動かない！バージョンを変えると直ると思っていたら実はgitignoreが関係したという話
目次 はじめにprettierをどう入れていたかprettierのバージョンを下げてみる問題はバージョンではなかった.gitignoreに影響されるオプションを…
-
tailwindcssの使い方をさくっと説明 – ざっくり入門したい人向け
tailwindcssはcssフレームワークです。他のCSSフレームワークとの違いはtailwindcssはユーティリティークラスの集まりだということです。CS…
-
新しいページトップボタンの処理の書き方。【CSS】scroll-behaviorと【JS】scrollIntoViewを使ったスムーズスクロール
WEBサイトの定番部品の「ページトップへ戻るボタン」。だいたいのWEBサイト、ランディングページ（LP）で必要なので使い回している人も少なくないはずです。jQu…
-
tailwindcssをWordPressにマッチさせる方法 – テーマ開発における相性の悪さをカバーしよう
tailwindcssというCSSフレームワークが人気です。非常に便利なのでWordPressテーマ開発に導入して見たところ相性について思うことがありましたので…
-
jQueryなしでも大丈夫！Ajax処理を生のjavascriptで行う方法
目次 Ajaxとは jQueryを使う書き方の記事が多いが実はもうjQueryを使用しなくても簡単にAjax処理が書ける （結論）XMLHttpRequestを…
-
Ajaxでjsonファイルを読み込んでhtmlを更新する簡単な方法（jQuery使用）
WEBサイトで部分的に更新できるようにしたい場合、そのためにWordPressやMovableTypeなどのCMSを用意するのは少し大がかりすぎるなと思うケース…
-
JSONファイルはコメントアウトできません。でもなんとかする方法
目次 JSONファイルでコメントアウトはできません コメントアウトを前提にしたデータを使いたければYAMLを使おう REACTにてAjaxでYAMLを読み込んだ…
-
browserslistはpackage.jsonに書くか.browseslistrcに書くか
目次 browserslistとは何か browserslistは％（パーセンテージ）で設定できるがシェア率はどこでわかるの？ browserslistとは何か…
-
Stylelintを利用してコードを自動整形する方法
cssを分析して間違いを指摘してくれるツールStylelint。これを使えば複数人でコードを共有していても自動的に同じ作法で書かれたコードを作ることができます。…
-
PostCSSで入れ子を実現できるプラグイン「postcss-nesting」使用時に起きる問題と解決法
cssのポストプロセッサPostCSSは使用したい機能だけを利用してcssを加工するツールです。非常にたくさんのプラグインが存在しその種類によってはSASSの機…
-
Edgeで画像の右上のマークは何？出る条件と影響について
久しぶりにEdgeを画像にマウスカーソルをあてたらに右上に知らないアイコンが出て「おや？」と思ったかたはいないでしょうか？ 他の画像に同じことをしてもアイコンが…
-
jsonファイルを利用してデータとテンプレートを分ける – npm + nunjucks + stylus で静的サイト制作を効率的にする(6)
テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。 ヘッダーやフッターなどのペー…