カテゴリー: CSS 記事一覧

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

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

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

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

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

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

スマホサイトやアプリでよく見る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 […]