その他 Stylelintを利用してコードを自動整形する方法
cssを分析して間違いを指摘してくれるツールStylelint。これを使えば複数人でコードを共有していても自動的に同じ作法で書かれたコードを作ることができます。一度その仕組みを組んでしまえばあとは楽で便利ですが、導入部分が少し複雑なのでnpm-scriptsでStylelintを稼働して作法がバラバラなCSSファイルを...
2022-06
その他 
その他 PostCSSで入れ子を実現できるプラグイン「postcss-nesting」使用時に起きる問題と解決法
cssのポストプロセッサPostCSSは使用したい機能だけを利用してcssを加工するツールです。非常にたくさんのプラグインが存在しその種類によってはSASSの機能を再現することが可能です。SASSでは非常に使用頻度が高い入れ子表記を実現可能にするプラグインpostcss-nestingを使用時にちょっと気になる問題があ...
その他 Edgeで画像の右上のマークは何？出る条件と影響について
久しぶりにEdgeを画像にマウスカーソルをあてたらに右上に知らないアイコンが出て「おや？」と思ったかたはいないでしょうか？他の画像に同じことをしてもアイコンが出てこないのもあるし制作者の意図なのか紛らわしいですね。クリックするとわかりますが正体はEdgeの画像検索機能です。これはbingの画像検索機能に依存している機能...
javascript jsonファイルを利用してデータとテンプレートを分ける – npm + nunjucks + stylus で静的サイト制作を効率的にする(6)
テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。ヘッダーやフッターなどのページに共通な部分を一か所にまとめることができるリストのような同じ構造の大量のコードを一か所にまとめることができる今回は２の詳細を紹介します。具体的にはjsonファイ...
stylus StylusでヘルパーCSSを作成する際に便利な関数、mixin（メディアクエリ編）
sassではよくメディアクエリを設定しやすくするためmixinを使用しますがstylusでも同様にメディアクエリ用のmixinを作成すると効率が各段によくなります。今回はメディアクエリ用のmixinをstylusでどう作るか紹介します。実際に追加するコードmq(num) breakpoints = { sm: 576,...
javascript webpackにbabelを導入する – npm + nunjucks + stylus で静的サイト制作を効率的にする(5)
webpackを使用してjsファイルを集束（バンドル）することができましたがJavascriptは様々な規格があるので環境によって動かない場合があります。そうならない為にひと手間加えてより確実に用意したjsコードが実行されるようにします。今までの流れは下記記事に書いてあります。npm + Nunjucks + Styl...
stylus StylusでヘルパーCSSを作成する際に便利な関数、mixin（margin、padding編）
node.js製のCSSプリプロセッサstylusは変数を使用でき、またmixinという決まった処理を自動的に展開させることができる機能があるのでヘルパースタイルを効率的に作成することができます。先発のCSSプリプロセッサsassでも同様のことができますがsassの記述をそのまま持ってきても当然動かないのでstylus...
css flexbox使用の要素が折り返さない！？解決への鍵はflex-basisの値だった
Webデザインで「要素を横並びにしたいのに、勝手に折り返される…」そんな経験はありませんか？flex-wrap: nowrap;を指定しているのに思ったように動作しない原因は、親要素のサイズ、CSSリセット、ブラウザの互換性など、さまざまな要因が考えられます。この記事では、Flexboxで要素を折り返さないための具体的...
javascript webpackを使用してjavascriptを集束（バンドル）する – npm + nunjucks + stylus で静的サイト制作を効率的にする(4)
前回までで次のようなことをやってきました。nunjucks でhtml生成stylus でcss生成imagemin で画像圧縮javascriptはそのままコピーして使用する想定でしたが使用量が増えてしまった時のためにwebpackを使用してバンドルする流れも残しておきます。今回はjavascriptを対象にしますが...
javascript 画像をコピーもしくは圧縮する – npm + nunjucks + stylus で静的サイト制作を効率的にする(3)
npm + Nunjucks + stylusを使用してフォルダの変更を監視してhtml,css,jsを再生成、browserSyncを利用してブラウザを自動リロードして確認しやすいようにしました。ただ画像ファイルの処理がないのでその処理を追加していきます。画像ファイル処理については大体２つのルートを考えます。画像は画...
javascript ファイル更新を感知し更新確認を簡単にする – npm + nunjucks + stylus で静的サイト制作を効率的にする(2)
npm + Nunjucks + stylusで構成される開発環境作成手順の続きです。前回、buildコマンドでhtml,css,jsファイルをdistフォルダに吐き出す所まで行きました。今回はファイル更新を感知して自動更新されるように設定します。watchコマンドを設定する前回同様package.jsonのscrip...
javascript npm + Nunjucks + Stylus で静的サイト制作を効率的にする
静的サイト制作時におすすめのタスク自動化ツール構成 npm+Nunjucks+Stylus を紹介します。各ツールの簡単な紹介Node.jsのパッケージマネージャー。Node.jsをインストールすると自動的にインストールされる。javascripで使用するテンプレートエンジン。Mozillaが開発している。Node.j...
WordPress WordPressでSNS関連の独自オプションを管理画面に制作する
管理画面にSNSの独自オプションを置きたい場合は次のようなコード追加で実現できます。<?php/** * SnsOptionsクラス * * SNS関連の設定を保存、表示用に使用 * * ▼WordPressCodex日本語版の設定ページ作成参考 * */class SnsOptions { private $opti...