【デザイナー向け】どうしてもgulp、npm、sass、pugを操作しなければならない人への説明書
1.はじめに デザイナーさん、以下のような事態に困ったご経験はないでしょうか。 「画像の差し替え・削除・追加が発生して、ちょっと直したいけど、どこを編集すればいいかわからない」 「文言修正が入った。エンジニアさんに振るまでの量でもないので自分で直したいが、どこを編集すればいいかわからない」 「フォルダによくわからないファイルがたくさんある。いじるのが怖い。」 近頃のweb開発環境は複雑化し、gulpやwebpack・npmなど、デザイナーにとってはよくわからない単語が増えてきました。 このようなツールを駆使してフロントエンド環境を構築しているエンジニアにとって、作業は効率化されましたが、逆にデザイナーにとってはどんどん敷居が高くなっていると思います。 本投稿では、そんな環境下でもなんとなくイマドキの用語を軽く理解して、ちょこっとの編集作業ができるようになることを目標にします。 ゴール gu
CSSだけでお絵描き（CodePen） - Qiita
Qiita初投稿になります。よろしくお願いします。 お手柔らかに...( ;∀;) CSSだけでお絵描き CSSだけで絵を描いている方をちらほら見かけまして え、おもしろ、私もやりたいと思い初挑戦してみました。 この記事は記録用として書いています。タメになることはないかも... SCSSで書いてます。 CodePen HTMLとかCSSとかJSをウェブ上で書けるサービス。 書いたコードがすぐにプレビュー画面に反映されるのでとても便利です。 https://codepen.io/ CodePenを触ったことがなかったので、今回はこの子を使って挑戦しました。 今後もお世話になりそう。 ということで、アンパンマン いざ！お絵描き！といきたいところですが、お題決めにいつも悩みます。 目の前にあんぱんがあったのでアンパンマンにしました。（Chrome推奨です） See the Pen CSS Anp
@import のディレクトリ内にファイルがないと assets:precompile でコケる - Qiita
同じ轍を踏まないためにも、人柱になった自分を供養するためにも、ここにメモしておきたいと思います。 ちなみにアホかと思いますが、この件で4~5時間くらい悩んでいました。 前提 以下の条件でCSSをコンパイルしたい要件だったので、普通に何も考えずに assets:precompile するわけにはいきませんでした。 Railsでassets:precompileする対象のマニフェストファイルに、 require_self require_tree などのディレクティブは書かない 必要なディレクトリ・ファイルはすべて @import して読み込む順番を制御する assets/stylesheets/ 以下のCSSファイルをごっそり整理するために、ファイルを削除しまくったり、一時的に空のディレクトリを用意したりしておく必要がある TL;DR 結論を先に書くと、 @import する対象のディレクト
最近学んだCSSメディアクエリについて - Qiita
はじめに 最近、初めてメディアクエリについて学んだことをメモとして残しておきたいと思います。 メディアクエリについて Webページを閲覧する際に、ユーザーはPCやスマートフォン、タブレットなど様々な端末を用いています。その際に端末に応じて、Webページ上に表示する内容を表示する必要があります。レスポンシブなWebページを作成するために、メデイアクエリが使用されます。レスポンシブなWebサイトを作成する際に使用される有名な例だとbootstrapが挙げられます。 QiitaをPCで表示した場合 Qiitaをスマートフォンで表示した場合 上記のようにPCとスマートフォンで表示した場合、それぞれのデザインが異なっています。 レスポンシブなWebデザインとは？ メディアクエリを調べた際に、レスポンシブなWebデザインと見かけることが多かったのですが、そもそもレスポンシブとは何かと疑問に思い調べまし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
haml（html）でfloatプロパティを使って要素を左右に配置する方法。 - Qiita
Nuxt.jsのプロジェクトにSassを導入する方法 - Qiita
Sass 入門 - Qiita
Nuxt.jsでSassの変数やMixinsを管理する（resources-loader） - Qiita
Sassでeachを用いた色管理でハマった（Always quote color names when using them as strings） - Qiita
【今日から携わる】５分でおわるよ！gulpでsassのコンパイルしませんか？（コピペでオーケー） - Qiita
node.jsのgulpでブラウザsyncとscssの自動コンパイル - Qiita
Node.js+gulpを利用したSass利用環境の構築 - Qiita
Nuxt(v2.4未満) + Typescriptセットアップ - Qiita
node-sassを使って複数scssをビルド - Qiita
Sassでよく使う関数リスト - Qiita
Laravelでscssを書くときにstylelintで自動シンタックスチェック - Qiita
Sassのビルド時にCSSの出力形式を指定する - Qiita
sass mixin使って見たらすごく楽しかった。。 - Qiita
stylusについて - Qiita
SCSSの基本的な書き方 - Qiita
