cssのみでグラデーションのマウスオーバーをフェード処理する
下記サンプルページのような、グラデーションで表現されたボタンのマウスオーバーを、cssのみでフェード処理をする方法をご紹介いたします。 グラデーションボタンマウスオーバーのサンプルページ ボタンなどに使うhoverの変化…
jQueryでカウントダウン画像を表示させる
2019/01/04追記一部ブラウザでサンプルページが正しく動作しなかったので修正いたしました。 サイト公開日、商品の発売日、イベント開催日…、などなどいろいろな用途に使えそうなカウントダウン用画像を表示させるためのjQ…
要素の数だけ繰り返しscroll値を取得
一度に複数の要素のscroll値を取得してアレコレする案件があったので、jQueryで作成してみました。 サンプルは（クリックできるボタンの数）と同数の（コンテンツボックス）があったとして、ボタンがクリックされると、同じ…
縦横比を固定したままiframeや画像を表示する
margin と padding を ％で表すときは、親要素の横幅が基準となります。 上下のmargin/paddingも、親要素の【横幅】が基準です。 レスポンシブコーディング時は、これを便利にいろいろなところで活用し…
wordpressの個別記事ページに、同階層・同カテゴリの記事一覧を表示する
wordpressで、個別記事ページ（single.phpで表示されるページ）に、関連記事一覧を表示させる方法。 実現したいこと カテゴリに階層がある場合、同階層のカテゴリに属する記事のみを表示したい。 ↑このようなカテ…
画像のロールオーバー用スクリプト（jQuery）
エフェクト無しな、単純なロールオーバー。 末尾に「_off」がついている画像は、「_on」とついている画像にロールオーバー表示されます。 $(function(){ $(“img[src*=’_off’]”).addCl…
横幅いっぱいのメイン画像を配置したレスポンシブコーディング
用意されたデザインファイルは下記のような感じ。 メインイメージの青枠の部分はマストで表示されるようにする。 コーディング後のメインイメージ部分の表示 ウィンドウサイズが1600px以上の時 メインイメージ部分はウィンドウ…
背景画像位置 px→%の計算方法
水平方向（X軸） {%指定値} = {px指定値} / ( {背景画像を指定する要素のwidth} – {背景画像のwidth} ) * 100 垂直方向（Y軸） {%指定値} = {px指定値} / ( {背景画像を指…
position:absoluteで配置した空のdivに対して、clickイベントが反応しない（IE）
空のdivをクリックさせるということは普段記述しないのですが、 何かの案件の時にはまったらしく、2015年のメモに参考サイトが残っていました。 下記のように、幅、高さを指定した空のdivをposition:absolut…