CSS

WordPress

WebP画像と従来画像を振り分ける.htaccessとpictureタグとmodernizr.js

JPGやPNGなどの従来画像とWebPが混在した実際の活用で、WebPに対応していないブラウザや、記事の画像関連の記述変更が煩わしい場合に、pictureタグや.htaccessの記述で従来画像とWebPを出し分ける方法をまとめます。
jQuery

CSS3 – 炭酸飲料のような泡を量産するアニメーション

飲料販売サイトのバナーにサイダーの泡のようなアニメーションが欲しいと思い、CSS3とjQueryを使って作成しました。 概要 CSSで泡単体のデザインと基本的なアニメーションパターンを作り、そのスピードや配置や大きさを少しずつ変えてパターン...
jQuery

CSS3 – テキストを波のようにゆらゆらと上下に動かすアニメーション

CSS3を使った、テキストを波のようになめらかに動かすアニメーションです。 概要 Webページで h タグなどの見出しにも使えるよう、通常のテキストを1文字ずつ span タグで囲った文字に変換し、それらをインラインブロック要素としてそれぞ...
jQuery

jQuery – スクロール時にグローバルナビゲーションメニューをページトップに固定

Webページのスクロール時に、ヘッダーナビゲーションメニューをページトップに固定するJavaScriptのご紹介です。UIデザインの好みやバランスにもよるかと思いますが、私の場合は、ヘッダーメニューはスクロールでページトップ固定もしくは最初...
CSS

CSS – フォームのinputタグとCSS3で開閉式アコーディオンを作る方法

以前はアコーディオンを作成する場合に jQuery や JavaScript を使用していましたが、CSS3 のおかげで、CSS と form の inputタグで実現出来るようになりました。 チェックボックスとCSS3でアコーディオンを作...
スポンサーリンク