カテゴリー: CSS 記事一覧

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

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

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

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

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

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

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

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

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

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

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