CSS
Compass(Sass)で画像サイズを自動取得する
以前の記事で何の説明もなしにしれっと使いましたが、結構便利なCompass関数です。 .image { width: image-width("../img/example.png"); …可変ウィンドウでボタンのサイズを変えずにテキストフォームだけ伸び縮みするようにする
HTML <form> <input type="text" class="text" placeholder="メッセージを入力" />…IEのエミュレート指定に使えるcss hack
上位下位バージョンでも強制的にその指定されたバージョンにするエミュレート指定。 便利ですが、一度使うと抜きにくいのも事実です。 （入れた状態でIE用の調整を各バージョン関係なくまとめておこなう為） ただ、jsなどの関係で…Sassで計算する時は丸め込みを忘れずに
といったタイトルに反して自分も結構丸め込みを忘れがちですが… 例えば下記のような例だと、widthの値が小数点以下になるのが明確です（161.8px） $size: 100px; $goldretio: 1.618; .…
CSSライブラリを利用してシンプルなプログレスバーを表示する。
progre(c)ssからcssをダウンロードして読み込みます。デモもこちらから確認できます。 <div class="progrecss" data-progrecss="40&qu…画像をCompass(Sass)でData URIスキーム化してHTTPリクエストを削減する
そもそも「Data URI」って何？って話ですが、例えば下記の画像。 実はスマホでGmailを表示した際に使われているアイコン画像なのですが、画像のリンクを開いたURLを見てください。外部に存在する画像を参照しているので…ベンダープレフィックスが面倒な人に贈る、常用Compass(Sass)ミックスイン
「-webkit-」「-moz-」といったベンダープレフィックス付きで複数書かなければならないCSSプロパティは面倒ですよね。Compassミックスイン使って楽しましょう。 @include border-radius(…