読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

compassのsprite-mapっぽい記法でgulp.spritesmithを使ってretina対応する方法

最近はGulpに代表される様々なタスクランナーがnpmで管理できるようになり、SassもGulpで扱えるようになりました。 そのSassのフレームワークとして、ひと昔前はCompassが人気でした。特にCSSスプライトを簡単にやってくれる「sprite-map」の機能はなかなか…

2015年10月度のflexboxの書き方

1年ぶりに業務でコーディング・・・が、早速つまずく。「display:flexは、仕様やら、OSやら、端末やら、いろんなものがコロコロ変わったみたいだけど、今はどう指定すれば良いの?」ってことで、flexboxの書き方を調べました。

display:flexにしたら、子要素の幅が何かおかしなことになった

CSS3のフレキシブルボックスが一昔前の「display:box」だったので最新仕様の「display:flex」に変えたら、えらい崩れてしまいました。

背景画像とともに要素を伸縮させるには、background-size:containとjsを使う

画像をブラウザウィンドウの横幅に応じて伸縮させる場合、以下の2つの方法があると思います。 img要素のwidth属性を%値にしてheight属性をautoにする。 css3のbackground-size:contain(またはcover);を使う。