font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する - Qiita
スマートフォンのフォントサイズは固定でいいのか問題 スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 （追記） ただし、個人的にfont-sizeを拡縮できるようにして思ったのはどんなプロダクトでも推奨でき
SassのビルドもWebpackでHot Module Replacementしたい - Qiita
Rails + モダンJS環境で新規アプリ作成の続きです。 上の記事ではRailsのSprocketsを切って、JSの環境をnpmによせました。となってくると、 Sassのビルドもnpmによせたい！ただ、gulpなどは使いたくない！ ということで、WebpackにSassのビルドも任せて、CSSでもHot Module Replacementをしようとやってみました。以下、CSSのソースは src/css/ に置くこととしています。 前回と、今回で作成したサンプルはこちらです。 https://github.com/ufotsuboi/rails-webpack-sample 注意 今回はCSSは全体に読み込む、JSは一部のみといった、JSとCSSを完全にわけて扱いたいような状況を想定しています。 SPAのようなJSもCSSも全部のページで読み込むといったような状況であれば、webpack
Sassを使ったz-indexの管理 改 - Qiita
Sassを使ったz-indexの管理 はめちゃ便利。 でも、mapで並べた時に下の方がz-indexの数値が大きいので、下が上になる。レイヤー構造を逆に考えないといけない。 なので配列を逆にする処理を噛ますことで、上の方が上レイヤーとなり、さらに見やすくできる。 配列を逆に $z-index:( header, //1 nav, //2 pulldown, //3 child //4 ); //リストを逆転させる @function list-reverse($map) { $result: (); @for $i from length($map)*-1 through -1 { $result: append($result, nth($map, abs($i)), comma); } @return $result; } $z-index: list-reverse($z-index
RailsアプリのAMP対応をSassで快適に - Qiita
AMPとは AMP(Accelerated Mobile Pages)はモバイルでのウェブページ表示を高速化する手法です。Googleが強く推奨しており、2016年10月よりGoogleのモバイル検索結果の表示にAMPが使用されるようになりました。 高速化のため、AMPページで用いられるHTMLには独自のプロパティや制限があります。cssに関しても、外部ファイルを読み込めない等の制限があります。 RailsでAMP対応する際の問題 AMPでは外部ファイルを読み込めないので、cssをheadタグ内のstyleタグに書かなければなりません。すなわち、ビュー内でcssをrenderする必要があります。しかし、アセットパイプラインにはそんな仕組みはありません。File.readでcssファイルを読み込んでビューに書き出すといった方法はすぐに考え付きますが、これではコンパイルが必要なSassは使えま
Railsのフロントエンドのビルドをnpmコマンドのみで完結したい - Qiita
こんにちは、freeeでエンジニアをやってます @yo_waka です。 これは、freee Engineers Advent Calendar 2015の11日目の記事です。 これまでの弊社のAdvent Calendarでは、社内で革命と呼ばれるフロントエンドの改善ネタが多いと思いますが、その流れとして、RailsアプリケーションにおけるフロントエンドのビルドツールであるところのSprocketsをどのようにしたら外せるかという話を書きます。 Sprocketsがやってくれること まずはSprocketsが裏側でどういうことをやっているのか知る必要があります。 Advent Calendar4日目の記事で既に概要が書かれていますが、もう少し細かく内部動作に踏み込んで書いてみます。 尚、Sprocketsのコードは現状のRailsの最新版である4.2.5で利用されている、Sprocket
postcssでsassの形式（っぽく）書く - Qiita
#nodeでsass（っぽく）かく構造化されたcssを書く nodeがインストールされている環境でnode-sassなどを使うと、他コンパイラのinstallが面倒（windowsだけかもしれないが postcssを使うが、よく言われている、cssnextでの書き方をしらない人にとっては、少し記法が違うので新しく覚えるのが面倒。 ということから、どうにかしてnode onlyでsassの記法でcssをかけないかという事を考えてた。 非常に申し訳ないが、自分の環境（すでに.netがインストールされていたりといろいろ前提がある）なのでうまく行かなくても怒らないでください。 要望 要するにまとめると 開発環境はwindowsです（会社ではそっちが主流） sass的に書きたい できればnodeのインストールのみですませたい watchしてほしい（できれば cssを圧縮してほしい 以下要望をまとめる
jade, sass/compass, coffeescript, bowerで静的Webサイトを作るGrunt.js秘伝のタレ - Qiita
jade, sass/compass, coffeescript, bowerで静的Webサイトを作るGrunt.js秘伝のタレCoffeeScriptCompassbowergrunt.jsJade 最近のフロントエンド開発、静的サイト開発 HTMLを書くのにJadeを使いたい CSSを書くのにsass/compassを使いたい Javascriptを書くのにCoffeescriptを使いたい Javascriptのライブラリ管理にBowerを使いたい コンパイル処理の自動化などはGrunt.jsを使いたい sass/compassをつかうためにはrubyのcompass gemをインストールしないといけないのでnodeだけで完結できないのがネック。 とはいえ一番つかわれていそうなのがsassで、Stylusは日本語ドキュメントが少なかったり利用事例が少ないのでまだ早い感がある。 ディレ
SCSSと付き合う上でやって(知って)よかったこと8選 - Qiita
なんだかノウハウ溜まってきた感あるのでまとめる。 1. prefixの付与はautoprefixerに任せる方が良かった 基本的な部分だが、SCSSになんでもかんでもやらせようとするのはよくない。 例えば下記のようなprefix div { -webkit-box-shadow: 0px 0px 10px rgba(255,0,0,.5); -moz-box-shadow: 0px 0px 10px rgba(255,0,0,.5); box-shadow: 0px 0px 10px rgba(255,0,0,.5); } sass/scssであればCompass、Bourbon、lessであればLESSPrefixerなど、mixinとしてprefix付与を提供してくれるライブラリがあったりするが、これよりもautoprefixerによる解決をおすすめしたい。 gulpなどを導入していな
【mkdirからデプロイまで3分】Sinatra+Haml+Sass+Coffee でサクッとHerokuに公開して捨てるwebアプリ - Qiita
【mkdirからデプロイまで3分】Sinatra+Haml+Sass+Coffee でサクッとHerokuに公開して捨てるwebアプリRubyCoffeeScriptSinatraSassGem あいさつ Rubyでゴニョゴニョして、Haml+Sass+Coffeeでサクッとviews作って Herokuにサクッとpushして公開して吐いて捨てるようなアプリの作り方です. チャチャッと動いたモノを見せたい時とかに便利 3分というのはビジネスロジックの構築を除くプロジェクトのひな形作ってデプロイに至るまでの時間. 適当なひな形を持ってきた方が早いかもしれませんが、一回は手を動かさないとなんか気持ち悪い人向け. 今回使ったのはここに置いときました、jqueryとか定番ライブラリ入れとくと便利そう 以下説明 手順1: フォルダを作ってgemを揃える 今回はyour_appというアプリを作る事とし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sassの複数のimportはglobを使って一つにまとめると幸せ - Qiita
Webpackを使ってReact, Sass, es2015の開発環境を構築してみる - Qiita
SCSSと付き合う上でやって(知って)よかったこと8選 - Qiita
Node.js 4 で Gulp のエラー - Qiita
