jQueryについて, WEBデザイン

ギャラリーサイトやポートフォリオ、ブログまで幅広く使えるグリッドレイアウトを簡単に、しかも超軽量なスクリプトで実装できる「minigrid」をご紹介します。画面サイズが変わると自動的に並び直して、きれいに整列します。

jQueryについて

コンテンツの区切りに水滴を落としたような、波打つエフェクトを見せてくれる「Raindrops.js」をご紹介します。ぽちゃん、と音がしそうな幻想的な効果が素敵です。波形のアニメーションは6種用意されています。オプションの数字を変えるだけで様 ...

jQueryについて, WEBデザイン

左右にスライドするコンテンツを、更にクリックでズームして詳細にみせてくれる「Zoom Slider」。コーポレートサイト、ブランドサイト、ポートフォリオなど、多様な用途で使えそうです。ieは10から対応しています。その他のブラウザには全て対 ...

Bootstrap, CSSについて, jQueryについて, WEBデザイン

デバイスごとにcssを変えなければいけないナビゲーションメニューですが、Bootstrapを使えば簡単にコーディングができます。しかも、ドロップダウンメニューなどの面倒な小技も一瞬で作れてしまう手軽さ。今回は、Bootstrapで作るいろい ...

jQueryについて, WEBデザイン

メニューとしても機能する、おしゃれなスクロールバー「Scrollmenu.js」。縦や横に配置したスクロールバーをクリックすると、ページ内のコンテンツにアクセスします。シンプルでいながら機能的で、縦長ページのデザインに最適。タッチデバイスに ...

CSSについて, jQueryについて, WEBデザイン

「Pizza Amore」は、数値を指定するだけで、チャートを作成できるjQueryプラグイン。煩雑な数字を視覚的に表すことでユーザーに分かりやすく説明することができます。特にこのPizza Amoreはとても使いやすく、機能も十分に揃って ...

HTMLについて, jQueryについて, WEBデザイン

写真をクリックするとかっこいいポリゴンスタイルのSVGアニメーションを伴って拡大し、コンテンツが開く「Card Expansion Effect with SVG clipPath」。ページ遷移ではなく、元ページの上にコンテンツが広がるよう ...

jQueryについて, WEBデザイン

今回は、動画だけでなく、PDFやオフィス系文書、ツイート、CodePenのコードまで、さまざまなメディアをページに埋め込んでくれるjQueryプラグインをご紹介します。これまでは面倒だったり諦めていたようなフォーマットまで埋め込むことができ ...

Bootstrap, jQueryについて

Bootstrapと組み合わせると、簡単にエラーメッセージやプログレスバーなどの便利機能が使えるようになるプラグインをご紹介します。一つの機能ごとにプラグインを実装しなくても、これ一つでよく使う機能がまとまっているので、とても便利です。興味 ...

HTMLについて, jQueryについて, WEBデザイン

画像の一部を反射させるプリズム効果が美しいスライダー「Prism Effect Slider with Canvas」。HTML5のカンバスとJavaScriptを使って実装されており、IE9にも対応する優れものです。

HTMLについて, jQueryについて, WEBデザイン

会員登録やログインフォームをモーダルウィンドウで表示させるサイトが増えてきました。ページ遷移なしに入力ができるので、モバイル端末でも動作がスムーズです。そこで今回は、モーダルウィンドウでフォームを表示させ、さらにボタンクリックなどのイベント ...

CSSについて, HTMLについて, jQueryについて, WEBデザイン

ページの隅にあるボタンをタップorクリックすると、ナビゲーションがスライドしながら出てくるoff-canvasメニュー。Facebookでもおなじみのメニューですね。レスポンシブ対応で、画面の小さなスマホでもコンテンツを邪魔せず、必要な時に ...

jQueryについて, WEBデザイン

レスポンシブなWebサイトを制作するときに迷ってしまう、レイアウトの問題。そんなアレコレを一挙に解決してくれるプラグインをまとめました。 一つひとつ手作業でコードを書いていくのが一番確かですが、様々なサイズのデバイスが流通し、全てに対し人の ...

jQueryについて, WEBデザイン

フリック操作対応!ウォールやスライダーが無限スクロールする「eco-Scroll.js」

画像や動画、テキストを無限スクロールさせてくれるjQueryのプラグイン「eco Scroll」。フリック操作にも対応し、軽快な動きのウォールやカ ...

CSSについて, jQueryについて, WEBデザイン

CSSだけで簡単実装!入力フォームのエフェクトをデザインする「Text Input Effect」に新バージョン追加

以前、「CSSだけで簡単実装!入力フォームの新しいエフェクト(149.docx)」で、入力フォームにフォーカスした時の ...

CSSについて, jQueryについて, WEBデザイン

インターネットで商品の購入や問い合わせをしようとして入力フォームに進んだものの、途中で面倒になってやめてしまった…という経験をしたことのある方は多いのではないでしょうか。せっかくコンバージョンまであと一歩、というところで、「エラー表示される ...

CSSについて, jQueryについて, WEBデザイン

画面いっぱいの動画を背景にして、ライブ感を演出しているサイトが増えています。今回は、YOUTUBEの動画を背景にするjQueryプラグインをご紹介。レスポンシブ対応もされていて、画面サイズを動かすと動画サイズもスムーズに切り替わります。

jQueryについて, WEBデザイン

色を自動生成するライブラリ「Please.js」で、フォームのコントロールをカスタマイズ

Please.js

Please.jsは、色を自動生成するJavaScriptライブラリです。
上のページタイトルの「PLEA ...

jQueryについて, WEBデザイン

ページの読み込みが遅いとき、真っ白な画面が表示されているのと、ローディング画面が表示されているのとではユーザーの印象は変わります。訪問者を逃さないためにも、読み込みに時間がかかるページにはローディング画面を出し、数秒の間待ってもらえるような ...

jQueryについて, WEBデザイン

フォームによくある、郵便番号を入力するだけで、住所が自動補完されるシステムをカンタンに実装できる国産のjQueryプラグイン「jQuery.jpostal.js」をご紹介します

jQueryについて, WEBデザイン

CSS3のアニメーションを利用したホバー効果やツールチップ表示が増えてきていますが、今回はモーダルウィンドウをアニメーションで表示させるスクリプト「animatedModal.js」をご紹介します。横からのスライド、バウンド、フェードと多彩 ...

jQueryについて, WEBデザイン, 便利なサイトの紹介

レスポンシブ、フリック対応のコンテンツスライドショー「Flickity」を使い方・設定方法ご紹介します。jQueryに依存せず、単体で動き、スマホでの動作もスムーズ。実装したい機能はほぼオプションで対応してくれているので、カスタマイズも非常 ...

jQueryについて, SEO対策・アクセスアップ, WEBデザイン

jQuery不要!レスポンシブのグリッドレイアウトを作ってくれるスクリプト「Masonry」

複数のボックスをタイル状に並べるグリッドレイアウト。これを、簡単に実装できるスクリプト「Masonry」をご紹介します。
サイズの異な ...

jQueryについて, WEBデザイン

【jQuery】ブランドサイトにも最適!ゴムのように弾むコンテンツスライダーで魅せる「WOBBLY SLIDESHOW EFFECT

限られたスペースの中で、効果的にコンテンツを見せていくスライダーは訴求力が高く、ブランドサイトなどにも ...

jQueryについて, WEBデザイン

【Javascript】alert(アラート)をスタイリッシュにデザインするスクリプト「Sweet Alert」

Webサイトで警告メッセージを出すとき、Javascriptのalert(アラート)を使用しますが、ブラウザ独自のものをそ ...

CSSについて, jQueryについて, WEBデザイン

【jQuery】かっこよくて実用的!レスポンシブ対応のLightbox風ギャラリー

画像をかっこよくギャラリー化してくれるjQueryプラグイン「Strip」。レスポンシブで、しかも、IE7以上の主要なブラウザに対応。動画にも対応してい ...

CSSについて, jQueryについて, WEBデザイン

【CSS】スクリプトを使わず、CSSだけで手軽に連番を振る方法

表やリストに順番に連番を振りたいとき、Javascriptでも実装することができますが、もっと手軽な方法があります。
CSSの「counter-reset」と「co ...

CSSについて, jQueryについて, WEBデザイン

【CSS】@font-faceでのWebフォント指定方法と気をつけるべきこと

以前、「今さら聞けない「Google Web fonts」の使い方」という記事で、Webフォントについてご紹介しました。この時はGoogleが提供するサービス ...

jQueryについて, WEBデザイン

【javascript】レスポンシブなタブメニューをサクッと実装できる「Responsive Full Width Tabs」

PCサイトをレスポンシブ化する上で悩むのが、メニューのあしらい。
特にタブメニューとなると、スマホサ ...

jQueryについて, WEBデザイン

【Javascript】3Dアニメーションで切り替わるレスポンシブのコンテンツスライダー

奥行きのある3D効果で画像を配置し、アニメーションをしながら切り替わる「Tilted Content Slideshow」。Janvascript ...