, 2014年5月7日

HTMLで画像を配置した時に、下側にmarginでもpaddingでもない謎の余白が現れる時があります。例えば以下のようなコードを書いた時、 h1{ background-color: #ddd; } img{ margin: 0; padding: 0; } <h1> <img src="yurufuwa.jpg" alt="" width="100px">サイトのタイトル </h1> 結果はこんな感じになります。画像のmarginとpaddingは0なのに、何故か謎の余白が現れてしまいます。 今回はこれを削除する方法を紹介します。

, 2014年5月4日

前の記事で画像を効率良く扱う「CSSスプライト」というテクニックを紹介しました。アレは確かに便利なのですが、「スプライト画像作るのめんどくない?」という問題があります。 調べた所、CSSフレームワークである「Compass」でスプライト画像が簡単に作れるそうなので、試してみました。

, , 2014年4月24日

レスポンシブフレームワークと聞いて何が最初に思い浮かぶでしょうか。 Twitter Bootstrapを思い浮かべる人が多いのではないでしょうか。 しかし、「あのデザインに飽きてしまった。」という人もいると思います。 そこで、先日Pureというフレームワークを見つけたのでご紹介します。

, 2014年3月19日

今回はLESSでよく使用しているMix inを備忘録もかねて、まとめておきたいと思います。 一覧 [css] .boxshadow(@v, @h, @w, @c, @blur: 0.15) { box-shadow: @v @h @w @c rgba(0, 0, 0, @blur); } .transition(@property, @timing, @duration, @delay: 0) { -webkit-transition: @property, @timing, @duration, @delay; -moz-transition: @property, @timing, @duration, @delay; -ms-transition: @property, @timing, @duration, @delay; transition: @property, @timing, @duration, @delay; } .box() { display: -webkit-box; display: -moz-box; display: […]

CATEGORIES