npm-scriptsで静的ページを量産するための最強タスクランナー - Qiita
これだけで全部自動で走ります！ ※npm-run-allモジュールはwatchなどがうまく動かないらしいので、使っていません。ただ並列に繋げたのをallにしているだけです。 package.json { "name": "nagaokatakeshi", "version": "1.0.0", "description": "npm-scripts", "main": "index.js", "scripts": { "all": "npm run watch-css & npm run watch-ejs & npm run watch-autoprefixer & npm run start", "ejs": "ejs-cli --base-dir src/ejs/ '/**/**.ejs' --out ./public/", "watch-ejs": "nodemon -e ejs
Sass/LESSでカラーバリエーションをつくるなら tint() を使おう | Cherry Pie Web
この記事は「Adobe Illustrator Advent Calendar 2017」24日目の記事です。 タイトルがイラレと関係ないと思われる方もいらっしゃるかもしれませんが、私にとっては完全にイラレの話ですので、しばしお付き合いいただければと思います。 Webデザインとの親和性が高いIllustratorのデータ構造 Webデザインツールとしてデファクトスタンダードだった「Fireworks」の開発中止がAdobeから発表されたとき、多くのWebデザイナーはFireworksの代わりに「Photoshop」を選びました。 しかし私は、Webデザインとの親和性が高いのは「Illustrator」だと考えました。 Illustratorのデータ構造がHTML/CSSの構造に似ていると思ったからです。 画像を「リンク」で配置できる スタイル（段落スタイル・文字スタイル・グラフィックスタイ
Reboot.css Bootstrap製Reset.cssからCSSの新しいスタンダードを読み解く｜Goodpatch Blog グッドパッチブログ
皆さんが新しくWebベースのプロジェクトを始める際に、様々なパッケージをインストールするかと思いますが、どんなプロジェクトを始めるにせよ、大抵はその中になんらかの Reset.css が含まれていることでしょう。 Reset.css とは、Google Chrome やIEなどの各ブラウザが独自にもっているデフォルトCSSをブラウザごとに差異がないように平準化し、フロントエンド開発者がデザインをしやすいようにするために読み込まれる CSS です。 例えばhtmlファイルに <h1>Hello CSS</h1> と書いた時に、なにもCSSを書かなくても太文字で大きく表示されるのはデフォルトCSSが適用されているためです。 Reboot.css はCSSフレームワークとしてgithubで最もスターを集めている Bootstrap が、現在開発中の v4 から採用している新しい Reset.cs
Sass(scss) を自動ビルドしつつブラウザも自動リロードして開発速度を上げる - Qiita
手早く html の LP とかカンプを作りたい時のための手順。Sass を使いつつ、ファイル変更でブラウザも自動リロードしたかった。 TL;DR https://github.com/TsuyoshiNumano/simple-sass-build-and-reload をクローンして npm i && npm run dev それも面倒な人は以下を自身の package.json に書き加える(変更検知のフォルダは任意の場所を！) npm run dev { "scripts": { "build-css": "node-sass --include-path scss scss/style.scss css/style.css", "watch-css": "nodemon -e scss -x \"npm run build-css\"", "sync": "browser-syn
WordPressテーマ作成にSASSとGulpを使った環境構築 - Qiita
Gulpを使って色々な処理を自動化する方法 https://tech-dig.jp/%E3%80%90gulp%E5%85%A5%E9%96%80%E3%80%91gulp%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E8%89%B2%E3%80%85%E3%81%AA%E5%87%A6%E7%90%86%E3%82%92%E8%87%AA%E5%8B%95%E5%8C%96%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/ GulpでWordPressのテーマ開発はここまで効率化できた https://www.webprofessional.jp/wordpress-theme-automation-with-gulp/ https://sndbox.jp/websystem-develop/wordpress/wordpress-sa
Sass を試す - アカベコマイリ
年末に PostCSS + cssnext と CSS Modules を試したのだが、コメ欄の指摘とそれを受けた追記を読んでもらえるとわかるとおり次世代 CSS 仕様の先取り = CSS.next のつもりで導入した cssnext が微妙だと感じはじめている。 cssnextを使うべきか - yuhei blog QiitaのCSS構成2017 - Qiita これらの記事でも言及しているとおり cssnext の採用する PostCSS プラグイン は CSS Working Group の認知していなかったり取り下げられそうなものもある。前者は直せばよいけど後者については直近の仕様だと冗長な記述が避けられないことを意味している。私は少なくとも モジュール管理 @import が URL ではなくモジュール参照として解決される 変数 (定数) と Mix-In 色やサイズなどを変数
サンプルソース | Web制作者のためのSassの教科書 - 公式サポートサイト
書籍内に出てきた、7、8章以外のソースコードが掲載されていますので、コピーして使って頂くことができます。 第1章 Sass のキホン まずは Sass って何なのかを知ろう Sass を導入する前の疑問や不安 何はともあれ Sass を触ってみよう 第2章 Sass の利用環境を整えよう Windows 環境に Sass をインストールする Mac 環境に Sass をインストールする Sass を最新版にアップデートしよう Sass コマンドの使い方を覚えよう バッチファイル／シェルスクリプトで簡単にコマンドを実行する GUI（Koala）で Sass を使用する インストールや実行中にエラーが表示された場合の対処法 第3章 これだけはマスターしたいSass の基本機能 ルールのネスト（Nested Roles） 親セレクタの参照 &（アンパサンド） プロパティのネスト（Nested P
Gulp で SCSS のコンパイルから bourbon の導入までを試す - Gulp で作る Web フロントエンド開発環境 #1 | PSYENCE:MEDIA
Gulp で SCSS のコンパイルから bourbon の導入までを試す - Gulp で作る Web フロントエンド開発環境 #1 wakamsha 2015.04.18 68 792230 そろそろ Gulp 始めたいと思います これまでは Ruby on Rails によるフロントエンド開発がメインだったのですが、最近アサインされた新規開発案件が Scala & Play によるものであるのと、API 中心でサーバーサイドとフロントエンドがハッキリ分離するという構成のため、それならばということで一からフロントエンド開発環境を構築することにしました。もともと Grunt は多少嗜んでいたので今回もそれを使い続けても良かったのですが、何かと新しい情報は Gulp 関連が多いことから、僕もこの機会に Gulp 入門してみたいと思います。 gulp.js - the streaming b
いまさら聞けない sass 入門(後編) - らっちゃいブログ
racchai.hatenablog.com 前編では sass の歴史に触れつつ、機能説明を見ながらお試しできる環境を作るところまで解説しました。後編では具体的な機能について書いていきます。 セレクタのネスト(入れ子) 変数 条件分岐 ループ 関数 ミックスイン 継承 import まとめ セレクタのネスト(入れ子) sass では以下のようにセレクタをネストして記述することができるので、親子関係がわかりやすくなります。 .parent { .child { color: #000; // "&" で自身のセレクタを参照 &:hover { text-decoration: underline; } } } コンパイル結果 .parent .child { color: #000; } .parent .child:hover { text-decoration: underline;
gulpとgulp-sassで快適コーディング環境構築 - WEBサイト制作のElectric Fruits
2017.02.01 Gulpとは Gulpとは作業を自動化できるタスクランナーの一種です。タスクランナーを使うことで、煩雑な作業を自動化してコーディングに集中して作業の高速化が図れます。 設定方法などは普段使っているJavaScriptで記述可能です。 *若干古い記事になっております。最新のGulp ver.4.xに対応する記事はこちら。 下準備 gulpを使うにはNode.jsをインストールする必要があります。 【参考】node.jsとは？ node.jsのインストール インストールはターミナルの他にインストーラーで簡単にインストールできます。 インストーラーでのインストール 【日本語サイト】 http://nodejs.jp/nodejs.org_ja/ ダウンロードしてインストーラーでインストールでOKです。 ターミナルでのインストール ターミナルでインストールするならMacの場合
Sassを使うなら知っておくと便利な色まわりの小技やMixinいろいろ
2017年2月22日 CSS, 色彩 Sassがデフォルトで用意している関数や、それを応用して設定できる小技やMixinをまとめてみました。紹介しているほとんどの小技が、色を一色してすれば他の色も自動生成してくれる…という便利なものです。Sassを勉強中の方はもちろん、ゴリゴリ使いこなしている方も参考にしてみてください！Sassの基本的な情報は、過去記事「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」に書いています ;) ↑私が10年以上利用している会計ソフト！ 目次 透明度の書き方を簡略化 色の明度を調整する 色の彩度を調整する メインカラーの明度や彩度を調整して、リンク色を手軽に設定 背景のグラデーション 文字をグラデーションにする 縞模様の背景 抑えておきたい基本編 1. 透明度の書き方を簡略化 通常色の透明度を指定する時は rgba(0,
めっちゃうれしい！GulpでWordPressのテーマ開発はここまで効率化できた
Sassのコンパイルや画像の最適化、ブラウザーのリロードなど、面倒な作業を自動化できるタスクランナー。WordPressテーマの開発でも威力を発揮しそうです。設定が面倒でしょ？ と思っていた人も、これをきっかけにはじめてみたら？ Webサイトのコードは複雑化する一途で、繰り返しの作業が生じるのがごく当たり前になっています。しかし、世の中にはより優れた、効果的な開発プロセスがあるはずです。 このチュートリアルでは、Gulpを使ってWordPressのテーマ作成を自動化する方法と、ワークフローの自動化でテーマ作成のプロセスを改善する方法を紹介します。 なぜワークフローの自動化が必要なのか ワークフローを最適化することは、開発プロセスにおいて非常に有益で、取り組む価値があります。その理由をいくつか挙げます。 カスタムツールで、繰り返しの多い、つまらないタスクをすべて省ける ほかの重要なコアとなる
Convert ◩ CSS PREprocessors
Convert Convert from CSS to any other preprocessor, or between CSS preprocessors. Migrating to another preprocessor might be an important decision, take the time to see a comparison between the preprocessors, you might want to stay with your current one or change the preprocessor you want to migrate to. Online and offline converters to Less to Sass to Stylus from Less
Sass+CompassでWordPress用のCSSを作ると、ビジュアルエディタ用CSSの管理が幸せになる。
Sass+CompassでWordPress用のCSSを作ると、ビジュアルエディタ用CSSの管理が幸せになる。 WordPressのエディタ用CSS、editor−style.cssとしてよく紹介されていますが、すごく便利ですよね。 サイトによって違うスタイルを、いい感じに管理画面で表示することで、記事の完成系がすごくわかりやすく、直感的な操作に近付きます。 ちなみにこのブログはこんな感じのビジュアルエディタで投稿されています！ 自分のブログやウェブサイトでは使っていなくても、実案件などでは使っているよ！という人も多いのではないでしょうか。 ただ、普通に用意しようとすると、面倒臭いんですよね。 メインのcssに変更を入れるたび、editor-style.cssにも手を入れなくてはならないというのはどうにも面倒臭い。 @importでCSSを読み込む形で切り分けても良いのですが、何かと柔軟に
CSSのメタ言語Sass(SCSS)、LESSの完全入門 - Qiita
Sassが、括弧でSCSSと書いてあるのは、もともとSASS記法というので書かれていたんですが、Sass3.0からCSSちっくに書くことが出来るSCSS記法というのでも書けるようになったためです。 ようはどちらで書いても、同じCSSが生成されるので、自分に合った方を使えばいいと思います。 Sassの使い方 rubyのインストール Sassはrubyでコンパイルするのでとりあえずrubyが必要です。 私の環境(centOS)でインストールしたやり方をすべて残しておきます。 $ wget https://cache.ruby-lang.org/pub/ruby/2.2/ru --2015-09-23 11:10:27-- https://cache.ruby-lang.org/pub/ruby/2.2/ruby-2.2.3.tar.gz cache.ruby-lang.org をDNSに問いあ
GulpでSassのコンパイルとWordPressデータベースのエクスポートを設定してみた
Gulp はフロントエンドまわりのあれこれを自動化してくれるタスクランナー、ビルドツールです。同じようなツールとして Grunt がありまして、僕はいつも Grunt のほうを使っていたのでこれまでにもいくつか記事を書いています。 どうも最近 Grunt よりも Gulp のほうが軽くて良いぞという声をちらほら聞いていたのでちょっと試してみました。 準備など… 僕はVCCWでローカルの WordPress 環境を作成しており、Gulp を含めたファイルの配置は以下のようになっています。 - /PATH/TO/DIR - vccw/ - www/ - wordpress/ - wp-content/ - themes - mytheme - scss/ - style.scss - style.css - gulpfile.js - mysql/ < gulp でデータベースをエクスポートし
第14回ゼロから始めるWordPress勉強会 〜「Sass+Bootstrap+_sでテーマを作ろう」を開催しました
おはようございます。 よつばデザイン：後藤さん、コワーキングスペース茅場町：田中さん、InAdvanceonlyの小林さんの４人で主催している「ゼロから始めるWordPress勉強会」を昨日9月17日にコワーキングスペース茅場町で開催しました。 第14回ゼロから始めるWordPress勉強会 〜「Sass+Bootstrap+_sでテーマを作ろう」＆質問大会！〜 – Co-Edo WordPress 勉強会 | Doorkeeper 今回のゼロから始めるWordPress勉強会はSassとフレームワークを活用したテーマ作りを勉強します。 Sassって何？ Sassについてゼロから解説いたします（小林） Bootstrapって何 … 最終的に29名もの方々にご参加いただきました。 みなさん、ありがとうございます！ 今回のテーマは「Sass+Bootstrap+_sでテーマを作ろう」 今までは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
イマドキのコーダー環境構築2016
The Blog | Welcome to Adobe Blog