Photoshopいらず!CSSで画像を中央トリミングする方法(レスポンシブ対応)

最近、会社のサイトをリニューアルする機会があったんですが、サムネイルのサイズがみんなバラバラ!ってことがあったんですよね。今まではそれを横幅だけ揃えて高さはバラバラなまま表示してたりして、なんだか統一感のないデザインだったんですが、そんな悩みを解決してくれるcssを覚えたので、メモとして書き残しておきます!
画像の可変幅にも対応できているので、レスポンシブWebデザインにも使えますよ!
続きを読む最近、会社のサイトをリニューアルする機会があったんですが、サムネイルのサイズがみんなバラバラ!ってことがあったんですよね。今まではそれを横幅だけ揃えて高さはバラバラなまま表示してたりして、なんだか統一感のないデザインだったんですが、そんな悩みを解決してくれるcssを覚えたので、メモとして書き残しておきます!
画像の可変幅にも対応できているので、レスポンシブWebデザインにも使えますよ!
続きを読むレスポンシブWebデザインは、ひとつのソースでPCやスマホなど様々なデバイスでの見え方を最適化できるのでとても便利ですが、ワンソースなだけにデザインを反映させるのが難しい時ってありますよね。例えばデザイン上、PC版とスマホ版でそれぞれ表示する画像を変えたいとか…。
最近レスポンシブのサイトを作る機会が多かったので、レスポンシブWebデザイン対応案件の時に私がよく使うjQueryをまとめてみました。今回はサンプルも作ってみましたので、照らし合わせながら読んで下さいね。
続きを読む最近、お仕事でGoogleマップのiframeをスマートフォンで最適な大きさで表示させるにあたり、色々と悩みました。
そんな時発見した「lifehacker」さんの記事で、紹介されていたレスポンシブに対応させる方法が一番よさそうでしたので、備忘録として書き残しておきます。
続きを読む先日、CSS Nite @Co-Edo, Vol.17「セミハンズオンで学ぶレスポンシブWebデザイン」に参加してきました。講師はブログ「Design Spice」を運営されているヒロさんです。
濃い内容がもりだくさんでしたので、学んだことをアウトプットしておきます!
続きを読む