スマートフォンの普及やデジタル化により、 インターネットでの情報収集が当たり前の世の中で、 企業と顧客・求職者との最初の接点がWebサイトであることは珍しくありません。 Webサイトは、まさに企業の顔であり、 顧客や求職者にサービスや製品などの企業や店舗の情報を伝える 必須のビジネスツールです。 ニイグミでは500件以上のノウハウを生かし、 本当に必要なWebサイトをご提供します。
スマートフォンの普及やデジタル化により、 インターネットでの情報収集が当たり前の世の中で、 企業と顧客・求職者との最初の接点がWebサイトであることは珍しくありません。 Webサイトは、まさに企業の顔であり、 顧客や求職者にサービスや製品などの企業や店舗の情報を伝える 必須のビジネスツールです。 ニイグミでは500件以上のノウハウを生かし、 本当に必要なWebサイトをご提供します。
異なる高さのブロックの高さを揃えようとすると、CSS だけでは制御できなかったり面倒だったり…なので、ここは JavaScript の力を借りることに。 jQuery 非依存のもの 今は jQuery に頼ることが多いですが、他のライブラリなどとの相性で使えない場合などもあるかと思うので、まずはjQuery 非依存のスクリプト。 heightLine.js ブロックレベル要素の高さを揃えるheightLine.js[to-R] 読み込む JavaScript は1つ。 スクリプトまでのパスは適宜変更してください。
jQuery News Ticker now has support for multiple tickers per page! jQuery News Ticker now has support for right-to-left languages! jQuery News Ticker now has support for loading content via an RSS feed! jQuery News Ticker now has an optional fade effect between items! New updates have been made to jQuery News Ticker! Check below for more details! jQuery News Ticker is now compatible with jQuery 1.3
ちょっと面白いプラグインだったので 備忘録。曲線に沿ってテキストを折り 返せるようにするjQueryプラグインで す。新聞のようなレイアウトも組めそ うです。用途はあまり無さそうですけ ど、珍しいので覚えておきたい。 Bacon!(ベーコン)です。名前の経緯は分かりませんが、ペジェ曲線にそったテキストの折り返しが可能です。 こんな感じ。結構前に同じようなライブラリありましたね。こちらはペジェ曲線と同じような感覚でラインを作る事が出来ます。 こういうのとか こういうのも作れる。 IEでもなんとか動く。 コード<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="bacon.jquery.js"></script>jQueryとプラグインを読み込む
「20 Useful jQuery Plugins for Responsive Web Design」という記事で、レスポンシブデザインに使えるjQueryプラグインが20個まとまっています。 上記はPHOTO SWIPE。スマートフォン用に、スワイプできるスライドショーを作ることができます。 isotope アニメーションでオブジェクトの位置が変更されます ResponsiveSlides.js シンプルなクロスフェードタイプのスライドショー The Heads-Up Grid オーバーレイでグリッドラインを表示 jQuery Masonry fluidなレイアウトが実現できる scrolldeck 矢印キーでページ移動、動きのあるプレゼンテーションを可能にする Elastislide ウィンドウサイズの変更に対応した、レスポンシブなカルーセルギャラリー AUTOMATIC IMAGE
デモ:Around Other Things 回転の中心に他のエレメントを置いたデモ。 Roundaboutの使い方 Roundabouの実装方法を簡単に紹介します。 詳しい実装方法については「Learn」をご覧ください。 Roundabout -Learn HTML ぐるぐる回転させる各エレメントをリスト要素で実装します。 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="jquery.js"></script> <script src="jquery.roundabout.js"></script> JavaScript jQueryのセレクタで指定し、Roundaboutを実行します。 <script>
少々気になった記事があったので備忘録。WordPressの投稿画面でカテゴリーを選択出来る部分があって、そこはチェックボックスになっています。当然複数選べるようになっているわけですが、仕様上、1つしか選べないようにしたい、という場合のTipsです。 少し前にWptuts+で「ラジオボタン化して1つしか選択できない様にする」という記事がありました。 (How to Use Radio Buttons With Taxonomies) おおーちょっといいかも、と思ったんですけど、若干面倒くさそうだったのでもう一つの選択肢としてjQueryの方法を書いておこうと思います。 実装 単純に1つしか選択できないようにすればいいならチェックボックスにチェック出来る数を制限すればいいです。上図は、1つ選択すると他はdisabledになるようにしています。 尚、チェックボックスの動作は以下のような感じです。
アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」 2012年03月13日- playground.mobily.pl - marcin dziewulski - MobilyBlocks アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」。 ソーシャルサイトにシェアする際なんかに使えそうなボタンを簡単に実装できます。 そもそもボタンもいい感じなんですが・・ クリックするとアニメーションしながらソーシャルサイトのアイコンが表示されます。フェードもいい感じ。 ボタンだけじゃなくって写真にだって適用してみても面白いというデモも公開されています 省スペースなので邪魔にならない、だけど多機能を盛り込めるというところで使い勝手はよさそう 関連エントリ リッチなドロップダウンメニュー実装ができるjQue
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
A plugin to enlarge images on touch, click, or mouseover. Demo Hover Grab Released under the MIT License, source on Github (changelog) Download Compatible with: jQuery 1.7+ in Chrome, Firefox, Safari, Opera, Internet Explorer 7+. Install via NPM npm install jquery-zoom Instructions Zoom appends html inside the element it is assigned to, so that element has to be able to accept html, like <a>, <spa
ページめくりを実現するためのjQueryプラグイン集 先日のHTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 では多くの反響を頂きましたが、他にも同様のページめくりライブラリがあるようです Booklet 個人的にコンパクトなインタフェースがいいなと思うライブラリです。 HTML5がなくともIE8でも動きます Create a page flip effect with HTML5 canvas | Tutorial | .net magazine 以前紹介した、HTML5を使ったページめくりUIの作成チュートリアル。独自に作る場合は参考にできます jFlip なめらかなページめくりを表現できるjQueryプラグインです。 カーソルを合わせるとめくり部分が微妙にアニメーションしているあたりも芸が細かいです Simple Page Peel Effect with
bgStretcher jQuery Plugin Allows to Add Background Image to Page and Proportionally Resize it to Fill Entire Window Area. ? ajaxBlender.com レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretcher」 クロスフェードをかけつつ、クールに動く背景画像のスライドショーにレスポンシブな仕組みを取り入れた機能を実現するクールなスライドショー実装が簡単に出来ます 背景をスライドショーするとインパクトは大きいのでキャンペーンサイトなどに使えそうですね 関連エントリ 色をベースにフリーの背景画像や色パターンが検索できる「ColRD」 背景画像を使わず動的に背景模様を描画できるjQueryプラグイン「NoiseGen」 背景画像等に使
jQueryを使ったサイトで縦スクロールは見るのですが、横スクロールのものを見たことがありません。縦画面のタブレットやスマートフォンを考慮して縦スクロールが多いと思うのですが、どなたか横スクロールのサイトをご存知の方はいませんか?
便利そうだったのでご紹介。ページ内に栞 を付けられるjQueryプラグインです。栞は 行単位で付けられて、次アクセス時には自動 でスクロールしてくれます。長文コンテンツ やドキュメントサイトなんかには積極的に 導入して欲しいなぁ、と感じましたよ。 今までもいくつか似たようなライブラリはありましたが、youRhereは最もシンプルでカスタマイズもしやすく、使いやすい印象でした。 ブログなんかで「後で読む」というタグを良く付けられる記事の多くは、長文だったりするのでなかなかテンションが上がらず後で読んで貰えなかったりする傾向にあるようですが、これを導入すれば一気に読む必要が無くなるので後で読んでくれそうな気がしませんか? こんな感じで行単位で栞を付ける事が出来ます。マウスに応じて左にアイコンを挿入する事も可能。サイトを離れて次にアクセスした際はスクロールしてくれます。 見たほうが多分早いですよ
geomap find test 点・線・図形などのポイントをマップに配置。 jQuery Geoの使い方 外部ファイル 「jquery.js」と当スクリプトを外部として記述します。 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquerygeo.com/jquery.geo-1.0a3.min.js"></script> HTML 地図の配置は、jQueryのセレクタで指定できるようidを指定した空のdiv要素を使います。 <div id="map" style="height: 320px;"></div> JavaScript 空のdiv要素をjQueryのセレクタで指定し、geomap();を呼び出します。 <script> $(functio
jQuery sliders, slideshows, and galleries are extremely common on a variety of different types of websites. Portfolio sites, blogs, e-commerce sites, and just about any type of site can make use of a jQuery slideshow. Fortunately, there are a number of great plugins already coded that make it easy to add a slideshow in a matter of minutes. Each one offers different features and has its own style.
50 Best jQuery Carousel Roundup - tripwire magazine 高機能なカルーセルを実装するjQueryプラグイン50個がまとまっています。 最近色々なところでカルーセルがチラホラ見られるようになって、需要がそれなりにあるんだなと思っていますが、ライブラリそれぞれに特徴やクセがあるため、自分の使いやすいものを使いたいですね。 そういった際に参考にできるまとめではないかと思いました。 関連エントリ コンテンツの折りたたみを楽々実装できるjQueryプラグイン「jQuery Collapse」 スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」
いろいろとアイデアが参考になった ので備忘録。ボックスタイプのナビ メニューで、ユニークなUIです。こ ういうアイデアというか、発想が出 てくるようになりたいです。 というわけでただのメモ。僕では思い浮かばないアイデアで素敵だったので衝動的に書き留めておきます。 一見変哲も無いコンテンツですけど・・・どうもドロップダウンメニューにして当然、みたいな流れが自分の中にあったのでいい刺激になりました。 こんな感じ。ドロップダウンも子要素を隠すものですし、同じように隠すならこういう形もありだなぁと思いました。子要素が少ないことが条件ですけど・・・ 手抜きですけどサンプル用意しました。 Sample ピンを押すとマウスを離しても戻らず固定できます。cookie使うのもありですね。これはいいユーザビリティかもしれない。 ただ、最初はピンを押せるって分かりませんでした。もう少し分かりやすく明示してあげた
Jeditable - Edit In Place Plugin For jQuery 様々なインラインエディタ実装に使えるjQueryプラグイン「Jeditable」 Flickrが実装して有名になったあのUIもプラグインで簡単にできるようになりました。 今回紹介するプラグインもその1つなのですが、クリックした位置をドロップダウンにしたり、インラインの一部分だけを編集したり、ダブルクリックをトリガにしたりするといったカスタマイズが豊富なのが特徴のプラグインです よくあるパターン 「Edit me!」をクリックすると。 selectボックスが表示されて選択肢から選ぶ形に。OKを押せばテキストが変更されます テキストまるごとではなくインラインでの編集も可能。 関連エントリ コンテンツの折りたたみを楽々実装できるjQueryプラグイン「jQuery Collapse」 レスポンシブなjQuer
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く