jQueryを使わずにCSSのみでアコーディオンメニューを作る方法をご紹介いたします。メニューはマウスホバーで開閉します。 以下にデモを用意したので、動きについてはデモページをご確認いただければと思います。 デモページを…
マウスホバーで開くアコーディオンメニューをCSSのみで実装する方法

jQueryを使わずにCSSのみでアコーディオンメニューを作る方法をご紹介いたします。メニューはマウスホバーで開閉します。 以下にデモを用意したので、動きについてはデモページをご確認いただければと思います。 デモページを…
Browser CSS-Selector-Testは、使っているブラウザのCSSセレクタに関する対応状況をチェックすることができるWebツールです。 Browser CSS-Selector-Testを使えば、CSS4か…
要素を横並びにする時に便利な「display:inline-block;」ですが、IE6やIE7などの古いIEではうまく適用することができず、表示崩れが発生してしまいます。 そこで今回は、display:inline-b…
Clippyは、多角形や楕円形のクリップパスを簡単に生成することができるWEBサービスです。 非常にわかりやすく設計されているため、直感的に操作することができます。 Clippyの使い方 Clippyにアクセスして、右側…
スマホでサイトを閲覧する場合、端末を横向きにすると文字サイズが自動的に拡大されてしまいます。 端末を横向きにすると横幅が拡がるので、文字サイズも大きくなった方が見やすくなります。しかし、せっかくのデザインが崩れてしまう場…
LPなどを制作する場合に、画像をスライスして縦に並べることがあると思います。その際、普通にコーディングすると、画像と画像の間に謎の余白ができてしまいます。 例えば、以下のようなHTMLがあったとします。 CSSは以下の通…
CSSにて、IE(Internet Explorer)のバージョンによって挙動を変えるための記述方法を紹介します。 CSSでIEのバージョン毎に値を指定する方法 例えば、背景色の色をバージョン毎に変えたい場合は、以下のよ…
今後益々スマホからの流入は増えていくと予想されます。そのため、サイトをスマホ対応しておくことは非常に重要です。特に、2015年4月21日からスマホへの対応状況が検索順位に影響されるようになるということで、自サイトをレスポ…
以前、背景全体に画像を表示させることができるjQueryプラグイン「MaxImage2」を紹介しましたが、スクリプトを使用せずにCSSだけで画面いっぱいに背景画像を表示する方法を紹介いたします。 CSSだけで画面いっぱい…
CSS Shakeは、ブルブルと震えるアニメーションをつけることができるCSSライブラリです。 スタイルシートをロードして、要素にクラスを追加するだけで、簡単にアニメーションを実装することができます。 CS…