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