< pocket

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

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

最近、会社のサイトをリニューアルする機会があったんですが、サムネイルのサイズがみんなバラバラ!ってことがあったんですよね。今まではそれを横幅だけ揃えて高さはバラバラなまま表示してたりして、なんだか統一感のないデザインだったんですが、そんな悩みを解決してくれるcssを覚えたので、メモとして書き残しておきます!

画像の可変幅にも対応できているので、レスポンシブWebデザインにも使えますよ!

続きを読む
トップに戻る

デザインをレスポンシブに対応させる時に役立つjQuery・プラグイン6(サンプルあり)

デザインをレスポンシブに対応させる時に役立つjQuery・プラグイン6(サンプルあり)

レスポンシブWebデザインは、ひとつのソースでPCやスマホなど様々なデバイスでの見え方を最適化できるのでとても便利ですが、ワンソースなだけにデザインを反映させるのが難しい時ってありますよね。例えばデザイン上、PC版とスマホ版でそれぞれ表示する画像を変えたいとか…。

最近レスポンシブのサイトを作る機会が多かったので、レスポンシブWebデザイン対応案件の時に私がよく使うjQueryをまとめてみました。今回はサンプルも作ってみましたので、照らし合わせながら読んで下さいね。

続きを読む
トップに戻る

Googleマップをスマートフォンでも最適な大きさで表示しよう!

Googleマップをスマートフォンでも最適な大きさで表示しよう!

最近、お仕事でGoogleマップのiframeをスマートフォンで最適な大きさで表示させるにあたり、色々と悩みました。

そんな時発見した「lifehacker」さんの記事で、紹介されていたレスポンシブに対応させる方法が一番よさそうでしたので、備忘録として書き残しておきます。

続きを読む
トップに戻る

CSS Nite @Co-Edo, Vol.17参加レポート!レスポンシブWebデザイン実装時に必要な手法や注意点など

CSS Nite @Co-Edo, Vol.17参加レポート!レスポンシブWebデザイン実装時に必要な手法や注意点など

先日、CSS Nite @Co-Edo, Vol.17「セミハンズオンで学ぶレスポンシブWebデザイン」に参加してきました。講師はブログ「Design Spice」を運営されているヒロさんです。

濃い内容がもりだくさんでしたので、学んだことをアウトプットしておきます!

続きを読む
トップに戻る