CSS | increment Log

Sassの@at-rootをBEM記法で上手く使う方法 ~ Blockより親要素のクラスでElementとの子孫セレクタを作りたい

Ryoichi — Fri, 31 Mar 2017 08:55:43 +0000

SassでBEM記法を使っていると、綺麗にコーディングできない場面が出てきていました。どんな場面か。それはBlockよりも親要素のクラスでElementとの子孫セレクタを作りたいときです。これにはSassの@at-ro […]

The post Sassの@at-rootをBEM記法で上手く使う方法 ~ Blockより親要素のクラスでElementとの子孫セレクタを作りたい first appeared on increment Log.

Compassのimport-onceでエラー。コンパイル時に「No such file or directory」が出る場合の解決方法

Ryoichi — Sat, 22 Aug 2015 10:15:51 +0000

Compassのコンパイル速度を向上させる効果のあるimport-onceですが、とある状況下（自分のOSはWindows 7やWindows 10）でコンパイルをすると以下の様なエラーを吐き出します。これ、何が原因か […]

The post Compassのimport-onceでエラー。コンパイル時に「No such file or directory」が出る場合の解決方法 first appeared on increment Log.

これはスマート！z-indexをSassで管理する方法に感動しました

Ryoichi — Thu, 05 Mar 2015 11:10:41 +0000

positionプロパティで配置した要素の重なり順を指定するz-index。値が大きいほど前面に表示されるアレです。使うだけなら簡単なのですが、いざz-indexの指定箇所が増えてくると「どの要素より上なのか下なのか」 […]

The post これはスマート！z-indexをSassで管理する方法に感動しました first appeared on increment Log.

フォントサイズのrem指定をCompassのMixinと関数で行う

Ryoichi — Sun, 21 Dec 2014 05:38:04 +0000

クリスマスイブまで4日なのに今からアドベントカレンダーをやるとかちょっと意味が分からない宣言ですが、せっかくなので「アドベントカレンダーやってるよ！」という雰囲気を出すためブログを連日更新してみます。（なんか技術者っぽい […]

The post フォントサイズのrem指定をCompassのMixinと関数で行う first appeared on increment Log.

ボタン実装のSassライブラリ『Buttons』で色の追加やサイズの変更をする

Ryoichi — Tue, 11 Nov 2014 15:31:29 +0000

ボタンを簡単に実装できるライブラリ『Buttons』で色の追加やボタンサイズを変更する方法について。（Sassのみです）『Buttons』で色の追加やサイズ変更をする色の追加やボタンサイズの変更は変数設定でできます。 […]

The post ボタン実装のSassライブラリ『Buttons』で色の追加やサイズの変更をする first appeared on increment Log.

CSS3のアニメーションで動くドロワーをプラグイン無しで実装してみる

Ryoichi — Thu, 02 Oct 2014 14:00:51 +0000

スマホサイトやアプリでよく見るUIのドロワーを実装したい。しかしjQueryのメソッドで動かせばスマホでの挙動が重いので、CSS3のアニメーションで実装してみます。ドロワーを実装する方法は他にも色々あると思いますが、その […]

The post CSS3のアニメーションで動くドロワーをプラグイン無しで実装してみる first appeared on increment Log.

[Grunt]CSScombの整形に任意の設定を使う方法

Ryoichi — Tue, 23 Sep 2014 04:18:40 +0000

CSSのプロパティ順を並び替えたり、特定のコーディング規約に則ったソースコードに整形してくれるCSScombはとても便利です。自分はこれをGruntで動かしてるのですが、しかしデフォルトの整形結果が好ましくない。じゃあ […]

The post [Grunt]CSScombの整形に任意の設定を使う方法 first appeared on increment Log.

血肉となる。読めばCSSのコーディング/設計力が上がる良書3つプラスα

Ryoichi — Thu, 18 Sep 2014 08:44:35 +0000

Webサイトを作っているとどうしてもCSSのコーディングが汚くなりがちになって、手を加えるたびにソースコードがずさんになっていくのが私の悩みです。このままではアカン！ということで、数が少ないCSSについての本を3冊読ん […]

The post 血肉となる。読めばCSSのコーディング/設計力が上がる良書3つプラスα first appeared on increment Log.

CompassのVertical Rhythmがrem単位に対応していたので、軽い使い方について

Ryoichi — Sat, 13 Sep 2014 15:34:29 +0000

Vertical Rhythmを実装する機能は元々Compassにあったのですが、rem単位への対応がイマイチでした。 rem単位はIE8以下には対応できず、同時にpx指定も必要なのですが、CompassのVertica […]

The post CompassのVertical Rhythmがrem単位に対応していたので、軽い使い方について first appeared on increment Log.

Susyを使おうとしたらNo such framework: “susy”のエラー

Ryoichi — Thu, 11 Sep 2014 10:16:15 +0000

レスポンシブグリッドレイアウトが組めるSass/Compassベースのフレームワーク「Susy」を使おうとしたところ「No such framework: “susy”」というエラーが発生。Sus […]

The post Susyを使おうとしたらNo such framework: “susy”のエラー first appeared on increment Log.