WordPress WebP画像と従来画像を振り分ける.htaccessとpictureタグとmodernizr.js
JPGやPNGなどの従来画像とWebPが混在した実際の活用で、WebPに対応していないブラウザや、記事の画像関連の記述変更が煩わしい場合に、pictureタグや.htaccessの記述で従来画像とWebPを出し分ける方法をまとめます。
CSS
WordPress 
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でアコーディオンを作る...