READ MORE

Webページ上になにかの実績数や投票数、SNSのシェア数などの数値を表示する際に単純に数字を表示するだけでなく数字がカウントアップするアニメーションをつけることでユニークな見た目でのインパクトある演出で数字を印象づけることができます。そんな数値のカウントアップアニメーションをjQueryを使ってシンプルに実装するサンプ…

READ MORE

Webページ上で英数字を表記する際に全角文字を使用すると可読性の問題やバランスの悪さに加えて、アクセシビリティ等にも影響を与え問題が多く発生します。Webページに掲載する英数字は基本的にはすべて半角にするのが望ましいですがWebページ制作の際に外部からいただいた原稿の中で使われている英数字が全角や半角が入り混じっている…

READ MORE

5年ほど前にもWebページ上の要素がスライドアニメーションによって流れ続けるループスライダーのスクリプトを紹介しましたがブラウザによってスライド動作を長時間続けると動作が重くなったり、いくつか懸念点があったので、そのような懸念点の改善とスクリプト全体をよりシンプルな構成にしたものを紹介してみます。【横スライドパターン】…

READ MORE

ここでも何度か紹介させていただいている簡単にホームページを作成することができるサービス「Wix.com」が展開している単なるWebサイトではなく、ネットショップを簡単に開業することができるサービス「Wixストア」が高機能かつ操作もしやすく、便利そうだったのでご紹介してみます。Wixストア/Wix StoresWixスト…

READ MORE

古いIEのバージョンのサポートが終了したことやプログレッシブエンハンスメントの考えから、CSS3を使ってのレイアウトやアニメーションを気兼ねなく使えるようになってきました。画像やボタンにロールオーバーした際にCSSアニメーションを使ってのさまざまな演出方法についてまとめているサイトも多々あります。そんなCSSロールオー…

READ MORE

マウスホイールを使ってスクロールした際に縦にスクロールするのではなく、画面全体を横(水平)にスクロールさせることでページ全体に流れるような演出を加えているWebサイトを最近よく見かけます。そんなマウスホイールでの横スクロールに加えてページ上の要素をレイヤー状に重ね合わせて、奥行のあるパララックス効果もつけてスクロールさ…

READ MORE

少し前に「jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法」と題して、スマートフォン向けレイアウト時ではメニューをアコーディオン動作で展開するレスポンシブナビゲーションUIを紹介しました。レスポンシブナビゲーションUIのパターンとしてはアコーディオン動作ではなくハンバーガーメニューボタン…

READ MORE

以前ここでも紹介した、HTMLやCSSなどの知識がなくても簡単に無料ホームページを作成することが可能なWebサービス「Wix」のWebページ作成用エディタが新しくなって、より便利に進化していたのでご紹介します。ホームページ作成サービスWixの新エディタWix.com【前回記事】無料で簡単にホームページが作成できるサービ…

READ MORE

この度「プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート」というタイトルにて本の執筆をさせていただき、2016年2月10日にSBクリエイティブ社さまから出版させていただくことになりました。プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート価格:2400円+税サイ…

READ MORE

レスポンシブサイトでメニュー等のナビゲーションを扱う際、PC向けレイアウト時にはボタンをページ上に並べ、スマートフォン向けレイアウト時にはボタン一式を折りたたんでハンバーガーボタンでメニューを開閉させるUIにすることでスマートフォン向けの画面でもナビゲーションをコンパクトに扱えるUI技法があります。そんなレスポンシブ対…

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR