最近トップページの記事一覧をグリッドレイアウトで組んでいるブログが多いですよね（うちのブログもだけど） そして、ほとんどのブログが各コンテンツにというカードっぽいデザイン（上に画像・下にタイトル）を採用しています。まぁ普通にお洒落です…が、画像部分にマウスオーバーした時、何もエフェクトが掛からないのってちょっと味気ないですよね。 そこで今回は、マウスオーバーした際に画像をヌルっと拡大させる方法を紹介します。ﾇﾙﾘ。

深夜のテンションでサムネ画像作ったらこんなことになりました。いい感じにハイになってます。 …さて、Webサイトの制作時、画像の下に謎の余白が生まれることがありますよね？これ、初心者の方は結構悩みそうなので、理由と解決方法を載せておきます。 ちなみに写真は愛車のCBR400Rちゃんです。 謎の余白が生まれる理由 これ結構忘れがちなんですが、画像ってテキストと同じインライン要素なんですよね。なので、配置されるのは下端ではなくベースラインです。このベースラインと下端の間が、余白として現れてしまいます。 あ、ベースラインって何ぞや？って人はググってね。 解決方法 display: block 画像をブロック要素にするのが一番簡単な方法です。 なお、ブロック要素にはtext-alignが効かないので、中央寄せしたいならmargin: 0 autoを使いましょう。