はてなブックマーク

WEBデザインでよく使われるボックスレイアウトですが、コンテンツ量の違う要素を横並びに配置するとボックスの高さ(下辺)が揃わないのでイライラした経験ありませんか？ そんなイライラは Flexbox を使ってスッキリ解消してしまいましょう！ コンテンツ量の違うボックスの下辺が揃わないボックスレイアウトと言えば、まず思い出すのが float:left を使う方法。 だだ float: left; を使ってボックスを配置すると、コンテンツ量に差があるとボックスの高さ（下辺）が揃わないんです。 やっぱりボックスの高さが揃わないと、なんか落ち着かないですよね。 上記のようなコンテンツ量が違うボックスを横並びに配置したい時には、 Flexbox を使ってボックスを揃える方法がオススメです。 Flexbox を使ってみるFlexbox はCSS3で追加されたプロパティで「Flexible Box Lay

スマートフォンだと:hover擬似クラスを使ったマウスオーバーエフェクトが反応しない！なんて事ありませんか？ 実は、普通にCSSの:hoverと:activeにスタイルを設定してもスマホでは適用されないんですね。 とは言え、PCよりもスマホでのアクセスが多いモバイルファーストの時代なので、スマホでもマウスオーバーエフェクトを実装したいですよね。 結論！ ontouchstart属性を追加するだけ 結論から言うと、:hover擬似クラスを適用させたい要素に ontouchstart属性を追加するだけで、スマホでもマウスオーバーエフェクトが実装できます。 ontouchstart属性のプロパティは空でOKです。