情報量が多いサイトで特に見かけることが多い、メガメニュー・メガドロップメニューを実装しているwebデザインのまとめです。 メガメニュー・メガドロップメニューとは表示面積が広いドロップダウンメニューのことで、上手く利用すればスペースを有効活用して、ユーザーが目的のページまで容易に辿り着けるようなナビゲーションを実装することができます。 ホバー展開するもの、クリック展開するもの、テキストのみを使用したもの、わかりやすい画像・アイコンを用いたものなど、同じメガメニューでも様々な表示方法やデザインがあるので、自分がこういった動きやデザインをしたいときに参考にさせてもらえそうなwebデザインを備忘録兼ねてまとめました。 紹介しているサイトのキャプチャは、それぞれホバーしてもらうとメガメニュー表示時のデザインに切り替わります。 ページ左上のロゴ下にあるカテゴリーにホバーすると各カテゴリーが表示され、更

デザインが素敵だったり見せ方が面白いなと思った**404ページ（エラーページ）**のデザインショーケースです。 このように一覧化しているとゲームができたりアニメーションが付いていたりといった遊び心あるサイトが目に止まりますが、エラーページに辿り着いてしまったユーザーに対してどのように目的のコンテンツへ誘導させているかなど、そういった面で参考になるものもあります。 404ページのデザインショーケースですが、意図的にエラーページにリンクを飛ばずのもどうかと思ったので各紹介サイトへのリンクはTOPページになっています。 PlatinumGames Inc. Official WebSite 404ページ内に8bitのミニゲームが表示され、実際にプレイすることもできます。 また、見た目だけでなくソースコードも工夫されており、ソース内にこのゲームの攻略情報が記載されています。

自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。