カテゴリー
CSS

sass 3.3.0.rc.3 から、インターポレーションなしで、「&」を含んだセレクタが作れる!!!!

先日、LessでBEMってみたらかなりさくさくコーディングできた!という話という記事で、Sassを全力でDisったような気がしますが、 いい加減にsass3.3を導入しようとついに一念発起して、sass3.3.0.rc. […]

カテゴリー
CSS

LessでBEMってみたらかなりさくさくコーディングできた!という話

BEMを使ったCSSのクラス設計(MindBEMding)ですが、これをSassでやろうとすると、結構泣けてきます。 たとえばこんな感じになるんでしょうかね。 $block: “.block”; #{$block} { […]

カテゴリー
CSS

AndroidのChromeでiPhone&SafariみたいにCSSのデバッグをする。

iPhone + SafariでCSSのデバッグなんかをよくやったりしますが、Androidにもあるよなぁー。いちいちエミュレータとかいろいろ立ち上げてやるが嫌だなぁー。とか思っていたら、 SDK不要Android端末の […]

カテゴリー
CSS

inline-blockの隙間を、IEでもChromeでもOperaでもfirefoxでも消す。

この間コーディングでfloatとheightでやるのも嫌だなぁと思い、inline-blockを活用したのですが、隙間を消すのに意外に苦労したので、メモ。 letter-spacingで隙間を消すのが有名だと思いますが、 […]

カテゴリー
CSS

LESSでCSSを書いてみた

CSSのメンテナンス性の悪さは広く知られて居るとは思いますが、その解決策として、SASSとかSCSSなどがあります。今回はその仲間のLESSの導入記録です。 公式サイト:LESS « The Dynamic Styles […]

カテゴリー
CSS JavaScript

ie9.jsを使うと出来ること、出来なくなること。

最近ie9.jsを活用することが少々あるので、 いまさらながらまとめです。 配布場所 ie7-js http://code.google.com/p/ie7-js/で配布されています。 デモはhttp://ie7-js. […]

カテゴリー
CSS

CSS3で”Fizz Buzz”やってみた。

ウェブルのsoraiyさんがCSS3 で3の倍数の要素にスタイルを適用するなんてエントリーを書いていたので、つい出来心でやってしまいました。 今更なネタな気もしないでも無いですがそこはスルーで。 せっかくなので、nth- […]

カテゴリー
CSS

border-radiusとoverflow:hiddenをしたときの各ブラウザの挙動の違い

最新のブラウザだとベンダープレフィックス無しでborder-radiusが使えるようになりました。 そんなわけで仕事で使おうと思いましたが、ちょっとしたトラブルが。 border-radiusを掛けた要素にoverflo […]

カテゴリー
CSS

今更聞けない:before :afterの使い方

CSS2.1で定義された疑似要素、:before,:after。 しかし以外に使い方を知らないって人が多いはず。 clearfixとかで色々お世話になっているはずのbefore,afterの使い方を改めてまとめて行ければ […]

カテゴリー
CSS JavaScript

ie9.jsが便利すぎる。

ie7-js – Project Hosting on Google Code に有る、ie9.jsがとても便利です。 js非表示のクライアントはどうするって話もあるので、それはCase by Caseってこ […]

カテゴリー
CSS

inline-blockの均等配置

inline-blockを均等配置するためのCSS。 現状firefox3.6,ie8で対応確認しました。たぶんその他モダンブラウザでも効く思われます。 ie7はimgかa要素以外inline-blockが効かないので、 […]

カテゴリー
CSS jQuery

floatさせた要素、inline-blockの高さをそろえる。

display:boxはまだまだ実装が微妙だし、display:inline-blockやfloatだと、要素の高さ自体は変わらなくてborderとかbackgroundを使ったときいまいち困ったり。 というわけでそんな […]