stylus | WATASHI.xyz https://watashi.xyz わたしの情報をわたします Tue, 11 Mar 2025 04:19:10 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://watashi.xyz/wp-content/uploads/2024/03/cropped-Watashi-32x32.png stylus | WATASHI.xyz https://watashi.xyz 32 32 レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら https://watashi.xyz/responsive-font-size-stylus/ Wed, 10 Jan 2024 14:23:24 +0000 https://watashi.xyz/?p=962 はじめに レスポンシブのサイトを作る際にフォントサイズの指定はどのようにしているでしょうか？ この記事ではメディアクエリを使用せず画面幅に合わせたフォントサイズを指定するコードを紹介します。 CSSではなくnode製al […]

The post レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら first appeared on WATASHI.xyz.]]> jsonファイルを利用してデータとテンプレートを分ける – npm + nunjucks + stylus で静的サイト制作を効率的にする(6) https://watashi.xyz/env-npm-nunjucks-stylus-json/ Sun, 12 Jun 2022 20:11:00 +0000 https://watashi.xyz/?p=552 テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。 ヘッダーやフッターなどのページに共通な部分を一か所にまとめることができる リストのような […]

The post jsonファイルを利用してデータとテンプレートを分ける – npm + nunjucks + stylus で静的サイト制作を効率的にする(6) first appeared on WATASHI.xyz.]]> StylusでヘルパーCSSを作成する際に便利な関数、mixin（メディアクエリ編） https://watashi.xyz/stylus-media-query-mixin/ Sun, 12 Jun 2022 14:10:00 +0000 https://watashi.xyz/?p=548 sassではよくメディアクエリを設定しやすくするためmixinを使用しますがstylusでも同様にメディアクエリ用のmixinを作成すると効率が各段によくなります。今回はメディアクエリ用のmixinをstylusでどう作 […]

The post StylusでヘルパーCSSを作成する際に便利な関数、mixin（メディアクエリ編） first appeared on WATASHI.xyz.]]> webpackにbabelを導入する – npm + nunjucks + stylus で静的サイト制作を効率的にする(5) https://watashi.xyz/env-npm-nunjukcs-stylus-babel/ Fri, 10 Jun 2022 20:07:00 +0000 https://watashi.xyz/?p=540 webpackを使用してjsファイルを集束（バンドル）することができましたがJavascriptは様々な規格があるので環境によって動かない場合があります。 そうならない為にひと手間加えてより確実に用意したjsコードが実行 […]

The post webpackにbabelを導入する – npm + nunjucks + stylus で静的サイト制作を効率的にする(5) first appeared on WATASHI.xyz.]]> StylusでヘルパーCSSを作成する際に便利な関数、mixin（margin、padding編） https://watashi.xyz/stylus-mixin-spaces/ Thu, 09 Jun 2022 19:43:00 +0000 https://watashi.xyz/?p=535 node.js製のCSSプリプロセッサstylusは変数を使用でき、またmixinという決まった処理を自動的に展開させることができる機能があるのでヘルパースタイルを効率的に作成することができます。 先発のCSSプリプロセ […]

The post StylusでヘルパーCSSを作成する際に便利な関数、mixin（margin、padding編） first appeared on WATASHI.xyz.]]> webpackを使用してjavascriptを集束（バンドル）する – npm + nunjucks + stylus で静的サイト制作を効率的にする(4) https://watashi.xyz/env-nunjukcs-stylus-webpack/ Mon, 06 Jun 2022 16:00:00 +0000 https://watashi.xyz/?p=528 前回までで次のようなことをやってきました。 nunjucks でhtml生成 stylus でcss生成 imagemin で画像圧縮 javascriptはそのままコピーして使用する想定でしたが使用量が増えてしまった時 […]

The post webpackを使用してjavascriptを集束（バンドル）する – npm + nunjucks + stylus で静的サイト制作を効率的にする(4) first appeared on WATASHI.xyz.]]> 画像をコピーもしくは圧縮する – npm + nunjucks + stylus で静的サイト制作を効率的にする(3) https://watashi.xyz/env-nunjucks-stylus-3/ Sat, 04 Jun 2022 16:00:00 +0000 https://watashi.xyz/?p=523 npm + Nunjucks + stylusを使用してフォルダの変更を監視してhtml,css,jsを再生成、browserSyncを利用してブラウザを自動リロードして確認しやすいようにしました。 ただ画像ファイルの処 […]

The post 画像をコピーもしくは圧縮する – npm + nunjucks + stylus で静的サイト制作を効率的にする(3) first appeared on WATASHI.xyz.]]> ファイル更新を感知し更新確認を簡単にする – npm + nunjucks + stylus で静的サイト制作を効率的にする(2) https://watashi.xyz/env-nunjucks-stylus-2/ Sat, 04 Jun 2022 14:28:05 +0000 https://watashi.xyz/?p=518 npm + Nunjucks + stylusで構成される開発環境作成手順の続きです。 前回、buildコマンドでhtml,css,jsファイルをdistフォルダに吐き出す所まで行きました。 今回はファイル更新を感知して […]

The post ファイル更新を感知し更新確認を簡単にする – npm + nunjucks + stylus で静的サイト制作を効率的にする(2) first appeared on WATASHI.xyz.]]> npm + Nunjucks + Stylus で静的サイト制作を効率的にする https://watashi.xyz/env-nunjucks-stylus/ Thu, 02 Jun 2022 21:21:00 +0000 https://watashi.xyz/?p=512 静的サイト制作時におすすめのタスク自動化ツール構成 npm+Nunjucks+Stylus を紹介します。 各ツールの簡単な紹介 [npm]Node.jsのパッケージマネージャー。Node.jsをインストールすると自動的 […]

The post npm + Nunjucks + Stylus で静的サイト制作を効率的にする first appeared on WATASHI.xyz.]]>