jQuery

過去にレスポンシブの「table」を紹介しましたが、今回はスマホによってレイアウトを変えるのではなく、そのままのレイアウトで横スクロールで表示する方法を紹介します。 列の項目が多く、横に長い「tabl ...

ページ先頭にアニメーションで移動するボタンが設置できる、jQueryプラグインの「jquery.scrollUp.js」を紹介します。 HTMLにはページ先頭の記述を入れる必要が無く、簡単に設置できま ...

画像をオンマウスすると、フワッと吹き出しがアニメーションで表示されます。 吹き出しはテキスト形式ではなく、png画像として表示します。 オンマウスを外すと、吹き出しは消えます。 デモページを見る &n ...

画像が画面内に入った時にフェードインで表示される仕組みです。 画像数が多い時などに良いかと想います。 デモページを見る   ソースもろもろは全てここに書くと長くなってしまうので、ご利用を希望 ...

前回のボタンまとめに続き、アニメーションテキストをまとめてみました。 今回は、「css」と「jQuery」で作っています。 どれも面白い動きやオシャレなデザインになっています。 まずはデモページをご覧 ...

メイン画像の下にサムネイル画像があり、サムネイルをクリックするとメイン画像も切り替わるスライダーです。 サムネイルは左右に動かす事ができ、自動ループにもなっていて、一番左の画像がメイン画像に表示される ...

PCはもちろん、スマホやタブレットのタッチデバイス操作にも対応したスライダーです。 まずはデモページをご覧ください。 ⇒デモページ ファイルは公式サイトよりダウンロードします。 ⇒公式サイト ※以下、 ...

webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介しております。 ◆1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ　（コムテブログ 様） ◆どれを選んで ...

webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆これからのCSSレイアウトはFlexboxで決まり！　（Webクリエイターボックス 様） ◆かつてはJavaScrip ...

webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆商用利用ＯＫの無料イラスト配布サイトまとめ１０選　（無料イラストIMT公式Blog 様）   ◆canvas ...

郵便番号検索なら「ajaxzip3」が簡単でおすすめです。 使い方を参考に、実際にサンプルページを作ってみました。 ⇒ サンプルページはこちら また、下記よりサンプルファイル一式もダウンロード出来ます ...

スマートフォンサイトで使えるアコーディオンを作ってみました。 ⇒ デモサンプルはこちら 「ul」と「li」タグで作っています。 cssのソースなど記載すると長くなるので、よろしければファイル一式を確認 ...