【デザイナー向け】どうしてもgulp、npm、sass、pugを操作しなければならない人への説明書
1.はじめに デザイナーさん、以下のような事態に困ったご経験はないでしょうか。 「画像の差し替え・削除・追加が発生して、ちょっと直したいけど、どこを編集すればいいかわからない」 「文言修正が入った。エンジニアさんに振るまでの量でもないので自分で直したいが、どこを編集すればいいかわからない」 「フォルダによくわからないファイルがたくさんある。いじるのが怖い。」 近頃のweb開発環境は複雑化し、gulpやwebpack・npmなど、デザイナーにとってはよくわからない単語が増えてきました。 このようなツールを駆使してフロントエンド環境を構築しているエンジニアにとって、作業は効率化されましたが、逆にデザイナーにとってはどんどん敷居が高くなっていると思います。 本投稿では、そんな環境下でもなんとなくイマドキの用語を軽く理解して、ちょこっとの編集作業ができるようになることを目標にします。 ゴール gu
Sass 入門 - Qiita
Sassとは cssを効率よく記述するための仕組み。 ネスト構造での記述ができたり、変数や四則演算、関数、スタイルの継承などができる。 SassにはSCSS記法とSASS記法がある。 後者は開発者に不人気らしく、前者が主流らしい。 scssファイル→cssファイルにコンパイルして利用する。 今回はpreprosというツールを使ってコンパイルする。 インストール prepros公式 : https://prepros.io/ preprosの公式サイトへ飛んで以下のボタンをクリックする。 続いて、以下のボタンをクリックする。 インストーラを起動すると、デスクトップにショートカットが作成される。 作業フォルダに以下のようなフォルダ構成でフォルダを作成する。
Nuxt.jsでSassの変数やMixinsを管理する（resources-loader） - Qiita
10/31追記 node-sass-glob-importerを使用すると記載していましたが、nuxt-sass-resources-loaderのみで同等のことが可能だったため書き直しました。 Sassの変数やMixinsを使う Nuxt.jsでは nuxt-sass-resources-loader を使うことで、変数やMixinsなどを各コンポーネントで使えるようになります。 nuxt-sass-resources-loader { modules: [ ['node-sass-resources-loader', '@/assets/styles/resources.sass'] ] }
Sassでeachを用いた色管理でハマった（Always quote color names when using them as strings） - Qiita
やりたいこと webサービスのデザインにルールを設けるために、色をあらかじめ決めておくのはあるあるだと思います。 その管理を楽にすべく、Sassで変数に色コードを指定しておくのもまたあるある。
CSSだけでお絵描き（CodePen） - Qiita
CSSだけで絵を描いている方をちらほら見かけまして え、おもしろ、私もやりたいと思い初挑戦してみました。 この記事は記録用として書いています。タメになることはないかも... SCSSで書いてます。 HTMLとかCSSとかJSをウェブ上で書けるサービス。 書いたコードがすぐにプレビュー画面に反映されるのでとても便利です。 https://codepen.io/ CodePenを触ったことがなかったので、今回はこの子を使って挑戦しました。 今後もお世話になりそう。 ということで、アンパンマン いざ！お絵描き！といきたいところですが、お題決めにいつも悩みます。 目の前にあんぱんがあったのでアンパンマンにしました。（Chrome推奨です） See the Pen CSS Anpanman by Deren (@deren2525) on CodePen. やってみて、所感 アンパンマンの眉毛とかほ
Node.js+gulpを利用したSass利用環境の構築 - Qiita
1.はじめに Node.jsとgulpを使用して、Sassの利用環境をローカルPCに構築した際の手順を備忘録として記述します。 Macを使って構築を行いました。 2.手順 下記手順に沿って進めてください。 2-1.Node.jsのインストール Node.jsの公式サイトからインストーラをDLします。 ※今回は推奨版をインストールします。 インストーラを起動します。 「続ける」を押下します。 「続ける」を押下します。 「インストール」を押下します。 インストールが完了したら、「閉じる」を押下します。 ターミナルを起動し、下記コマンドを実行し、Node.jsがインストールされていることを確かめます。 node -v Node.jsのバージョンが表示されればインストールは正常に完了しています。 2-2.gulpのインストール 下記コマンドを実行し、gulp-cliをインストールします。 ■Win
Nuxt(v2.4未満) + Typescriptセットアップ - Qiita
Nuxt v2.4で公式にTypescriptがサポートされた。 この記事はそれ以前のNuxtでTypescriptを使うための方法について記述している。 これから始めるならNuxt(v2.4以降) + Typescriptセットアップを参照いただきたい。 最近、Nuxtについてよく見かけるので、やってみようとちょっと触ってみた。 どうせなら、Typescriptでやりたい。PugやSassを使えたほうがいいだろうとセットアップしてみた。 このエントリの結果できあがる構成の 2018/10/06 時点での主なモジュールのバージョンは次の通り。 nuxt: 2.1.0 typescript: 3.1.1 pug: 2.0.3 node-sass: 4.9.3 最初に vue-cli をインストールする。vue initを使うには@vue/cli-initのインストールも必要らしい。 bash
@import のディレクトリ内にファイルがないと assets:precompile でコケる - Qiita
同じ轍を踏まないためにも、人柱になった自分を供養するためにも、ここにメモしておきたいと思います。 ちなみにアホかと思いますが、この件で4~5時間くらい悩んでいました。 前提 以下の条件でCSSをコンパイルしたい要件だったので、普通に何も考えずに assets:precompile するわけにはいきませんでした。 Railsでassets:precompileする対象のマニフェストファイルに、 require_self require_tree などのディレクティブは書かない 必要なディレクトリ・ファイルはすべて @import して読み込む順番を制御する assets/stylesheets/ 以下のCSSファイルをごっそり整理するために、ファイルを削除しまくったり、一時的に空のディレクトリを用意したりしておく必要がある TL;DR 結論を先に書くと、 @import する対象のディレクト
Sassでよく使う関数リスト - Qiita
はじめに Sassの関数には文字や数値を処理するものが数多く用意されています。 今回はその中でも特に使用頻度が高いと思われるものをピックアップしてみました〜 使用頻度が高そうな関数(文字・数値系) .quote { //" "を付けて出力してくれる関数 content: quote(ハロー); } .unquote { //" "を外して出力してくれる関数 content: unquote("ハロー"); } .abs { //絶対値を出力してくれる関数 width: abs(50px - 100px); } .ceil { //数値の切り上げをしてくれる関数 width: ceil(100px / 3); } .floor { //数値の切り捨てをしてくれる関数 width: floor(100px / 3); } .round { //四捨五入してくれる関数 width: round(
Laravelでscssを書くときにstylelintで自動シンタックスチェック - Qiita
これは何 概要 laravel-mix に stylelint-webpack-plugin を組み込むことで mix でのアセットコンパイル時にSCSSのシンタックスチェックを出来るようにしたい。これによりSCSSの記述方法がチーム内で揃えられることにより保守性を高めたい。 lintを組み込むメリットについては他の記事に任せるとして、この記事ではインストール方法、設定方法について書いていきたいと思います。 私は誰 M&Aクラウドという会社でエンジニアをやっています。入社してまだ２ヶ月ほどです。 もともと専門はインフラでしたが、幅広い分野を触るようになりました。新しく覚えることが多いので四苦八苦しています。 前提 バージョンとか
Sassのビルド時にCSSの出力形式を指定する - Qiita
CSSの出力形式を変えたい・・・><。 調べてみたところ、どうやらビルド時にオプションとしてCSSの出力形式を指定することが出来るらしい。 デフォルト以外の出力形式を指定したい場合はgulpfile.jsを編集してあげればいいっぽい。 "use strict"; var gulp = require("gulp"); var sass = require("gulp-sass"); gulp.task("sass", function() { gulp .src("./_src/sass/**/*.scss") .pipe(sass({ outputStyle: "expanded" })) //" "に出力形式を指定 .pipe(gulp.dest("./css")); }); gulp.task("watch", function() { gulp.watch("./_src/sass
sass mixin使って見たらすごく楽しかった。。 - Qiita
mixin使ってみるとすごく楽しくなったのでメモします。 今までHTML・CSSのコーディングをするときは、スマホのレイアウトを作ってから、PCのレイアウトを作るという順番でやってきました。 PC用のレイアウトを作る際に、、、 @media screen and (min-width: 768px) { hoge: pcStyle } これを連発していました。。。 そんなとき、mixinについてググっていると、@contentという便利なものがあるということを知りました！ これは使うしかない！！！ 早速、、、 $tablet-width: 768px; @mixin tablet-layout { @media screen and (min-width: $tablet-width) { @content; } }
最近学んだCSSメディアクエリについて - Qiita
Webページを閲覧する際に、ユーザーはPCやスマートフォン、タブレットなど様々な端末を用いています。その際に端末に応じて、Webページ上に表示する内容を表示する必要があります。レスポンシブなWebページを作成するために、メデイアクエリが使用されます。レスポンシブなWebサイトを作成する際に使用される有名な例だとbootstrapが挙げられます。 QiitaをPCで表示した場合 Qiitaをスマートフォンで表示した場合 上記のようにPCとスマートフォンで表示した場合、それぞれのデザインが異なっています。 レスポンシブなWebデザインとは？ メディアクエリを調べた際に、レスポンシブなWebデザインと見かけることが多かったのですが、そもそもレスポンシブとは何かと疑問に思い調べました。 「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表
SCSSの基本的な書き方 - Qiita
div {width: 300px; height: 200px; background: red;} div:before {content: ''; display: block; width: 300px; height: 150px; background: blue;} div.hoge {width: 150px; height: 29px; background: yellow;} /* classがhogeのdiv */ div .hoge {width: 120px; height: 53px; background: green;} /* divの中にいるclassがhoge */
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
haml（html）でfloatプロパティを使って要素を左右に配置する方法。 - Qiita
Nuxt.jsのプロジェクトにSassを導入する方法 - Qiita
【今日から携わる】５分でおわるよ！gulpでsassのコンパイルしませんか？（コピペでオーケー） - Qiita
node.jsのgulpでブラウザsyncとscssの自動コンパイル - Qiita
node-sassを使って複数scssをビルド - Qiita
stylusについて - Qiita
