cssでハンバーガーメニューのアイコンを作成

ブログアイキャッチ画像028

read more

スマートホンなどに使われているハンバーガーメニューのアイコンを画像を使わずにCSSで作成しました。マウスでクリックすると3本線のハンバーガーメニューが「X」に変わるようにjqueryで操作しています。
ただの3本線ではメニューだとわかりにくいと思うので、枠で囲んで影をつけてボタンのように見えるようにしました。
続きを読む»

CSSで画像のマウスホバーエフェクト

ブログアイキャッチ画像027

read more

マウスホバーで画像を拡大・縮小・回転などの動きは、今ではよく見るマウスホバーエフェクトです。マウスホバーのエフェクトは、アイデア次第でかなりのパターンが作成できますね。ここでは基本的なパターンを示します。ちなみにマウスホバーとマウスオーバーは同じ意味です。
続きを読む»

スライドショーjqueryプラグインjSliderの使い方

ブログアイキャッチ画像026

read more

このスライドショーのjqueryプラグインは、軽量コンパクトなレスポンシブ&スワイプ対応のイメージスライダーです。設定でカルーセルのような表示もできますし、背景画像のスライドショーとしても使用できる事がいいです。

続きを読む»

郵便番号から住所を変換するjavascriptライブラリajaxzip3

ブログアイキャッチ画像025

read more

フォームで住所を入力する場面が出てきますが、郵便番号を入力したら住所を途中まで自動入力してくれると大変便利です。そんなjQueryプラグインもいろいろ出回っていますが、簡単に使用できていいなと思った「ajaxzip3」の使い方を書き留めます。

続きを読む»

画像の上に文字列を表示する方法

ブログアイキャッチ画像024

read more

CSSのpositionプロパティを使用して画像の上に文字列を重ねて表示する方法を示します。おまけとしてアニメーション機能を使用して文字列をスクロールさせます。重ねることにより文字の内容や位置の変更にも早く対応できて良いですね。

続きを読む»

wordpressでtwitter共有ボタンを付ける方法

ブログアイキャッチ画像023

read more

ブログでは一般的になったtwitterの共有ボタンをプラグインを使用しないで、付ける方法を書き留めます。

続きを読む»

スライドショーjqueryプラグインloopItの使い方

ブログアイキャッチ画像022

read more

このスライドショーのjqueryプラグインは、ナビゲーション機能もなくただ無限にスライドするシンプルなレスポンシブル対応のプラグインです。

続きを読む»

CSS3で蛍光ペン風マーカー作成で気になったこと

ブログアイキャッチ画像021

read more

蛍光ペン風のマーカーをよく見ますし、私のブログでも使用しています。色々なパターンを作成していたら、Safariだと正常に表示されない場合がありましたので書き留めておきます。

続きを読む»

CSSでチェックボックスのサイズを変える方法

ブログアイキャッチ画像020

read more

スマートフォンなどではデフォルトサイズのチェックボックスだと押しにくいです。試行錯誤した結果なんとかサイズを変えられるようになりました。

続きを読む»

画像をフルスクリーンで表示できるjquery-fullsizableの使い方

ブログアイキャッチ画像019

read more

このLightBox風のjqueryプラグインは、フルスクリーン可能で画像も拡大表示されます。

続きを読む»