2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選 | コリス

2016/12/15 388 users jQuery コリス モーフィング SVG ライブラリ

毎年恒例のJavaScriptのライブラリやjQueryのプラグインの総まとめを紹介します。 今年リリースされたものから、アップデートされたものまで、これからのWebページやスマホページの制作に役立つJavaScriptを100+αまとめました。 KUTE.js クロスブラウザ対応のさまざまなアニメーション、2Dと3Dの変形、SVGの変形、CSSのプロパティ値の変化、SVGのモーフィング、SVGの... 続きを読む

最新のIT・Web技術を動画で学べるマイクロソフトの「Channel９」が、やたら勉強になる件！ : うえぶはっく

2016/03/09 757 users マイクロソフト ウェブ 有料セミナー 構成 勉強

右側の「言語フィルター」で、日本語を選択すれば海外の動画は非表示にできるので便利です。 以下の動画では、最近のWeb事情やクロスブラウザ対応などを、実際のコードを交えて具体的に教えてくれる構成になっています。 動画を見ると分かりますが、普通に有料セミナーとかでやっていそうな濃い内容になっており、このような動画コンテンツが3000近くも集められているのは魅力的でしょう。 他にもあるこんな動画たち！ ... 続きを読む

サイトの様々な確認作業に使うチェックツール達！レスポンシブ、パフォーマンス、クロスブラウザ対応等全部！ | バンクーバーのうぇぶ屋

2012/11/30 677 users レスポンシブ バンクーバー うぇぶ屋 パフォーマンス 確認作業

僕だけじゃないと思いますが、年末と言えばWEB屋にとって忙しい時期じゃないでしょうか。僕は年末に向けて新しいサイトやブログ、試してみたい技術や表現、仲間内との新プロジェクトに、年末駆け込みの受注案件となんとも忙しい限りといった印象です。 しかし、いくら忙しくても忘れては成らないのが制作するウェブサイトの動作、表示チェックの数々ですよね。最近はデバイスの多様化も手伝って、デバイスチェックだけでも大変... 続きを読む

[JS]これ以上ないと言うくらい簡単に実装できるスライダーのスクリプト -Flow Slider | コリス

2011/12/20 312 users コリス jQuery スライダー スクリプト コピペ

IEでも滑らかで快適に動作するスライダーを簡単に実装できるjQueryのプラグインを紹介します。 実装にかかる時間は2分くらいでしょうか。 Flow Sliderの特徴 Flow Sliderのデモ Flow Sliderの実装 Flow Sliderの特徴 滑らかなアニメーションで動作します。 実装は簡単で少しのコピペでok。 ベースとなるスタイルシートは用意済み。 クロスブラウザ対応。 対応ブ... 続きを読む

スクロールバーのデザインを変更できる軽量でクロスブラウザ対応のjQueryプラグイン・Tiny Scrollbar - かちびと. net

2011/11/12 157 users スクロールバー クロスブラウザ CSS 軽量 題名

題名の通りスクロールバーを変える jQueryプラグインです。全然使う 機会が無かったんですが、以前から 触ってみたいと思っていたところ、 ちょうど良さそうなプラグインを 見かけたので試してみました。 デザインそのものはcssでカラーリングしたり、画像に置換したり、と自由も利いて、クロスブラウザにも対応、3KB以下と軽量です。 Tiny Scrollbar こんな感じでデザインを変えられます。せっ... 続きを読む

[CSS]classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css | コリス

2011/10/16 460 users コリス class CSS stylesheet フェードイン

フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。 ※JavaScriptは一切使用していません。 Animate.cssの使い方 「animate.css」を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけです。 外部ファイル <link rel="stylesheet... 続きを読む

CSS/HTMLのテクニックをクロスブラウザ対応（特にIE）にする方法のまとめ | コリス

2011/07/24 679 users コリス Tra expression CSS Element

#content { width: expression(document.body.clientWidth 1242? "1240px" : "auto"); min-width: 760px; max-width: 1240px; } RGBa (IE included) 不透明度を使ったカラーをIEでも利用できるようにします。 .element { background-color: tra... 続きを読む

興味深いテクニックを多々取り入れているHTML5+CSS3のフレームワーク -Gridless | コリス

2011/06/26 253 users コリス フレームワーク チュートリアル CSS Reset

当サイトの記事でも取り上げている数々のテクニックを取り入れている、IE6/7にも対応したHTML5+CSS3ベースのフレームワークを紹介します。 Gridlessの主な特徴 CSSでユーザーのスクリーンサイズに最適なレイアウトを実現します。 参考：Media Queriesをしっかり身につけるチュートリアル クロスブラウザ対応（IE6/7も含む） CSS Resetには、Normalize CSS... 続きを読む

[CSS]クロスブラウザ対応、CSSグラデーションを使ったボタンの実用的な実装方法 | コリス

2011/02/02 322 users コリス border-radius text-shadow

ボタンにはborder-radius, box-shadow, text-shadowなどCSS3がふんだんに使用されていますが、グラデーションはIEでも適用されます。ホバー時のキャプチャ実装のポイントスケラｰビリティ文字のサイズを変更するとボタンのサイズもそれに合わせて拡大・縮小アジャスタビリティpadding, font-sizeを変更することでサイズ調整可能フレキシビリティあらゆるHTML要... 続きを読む

全画面をスライドとして使うダイナミックなナビゲーションを構築する2KB以下の軽量jQueryプラグイン - かちびと.net

2010/12/19 259 users ナビゲーション スライド net jQuery 全画面

全画面をスライドギャラリー風にするダイナミック なナビゲーションをjQueryを使って実装するサン プルです。透過処理が必要ですが、IE6、IE7の 両問題児でも問題なく動いてくれますので、実践 でもプロモーションなどに利用できるっぽいですね。 スライドするとロゴが平行してスライドする事で視差 効果も出しています。 クロスブラウザ対応なので使いどころも出て来るかもしれませんね。ダイナミックに動いて... 続きを読む

たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」:phpspot開発日誌

2010/11/26 150 users jQueryプラグイン phpspot開発日誌 ブロック

Pina たった１行でIEでも使えるブロックの角丸を実現できるjQueryプラグイン「Pina」 pina(20, 'blue', 'classname1'); のようにするだけで角丸が実現できます。 IE6のような古いブラウザにも対応しているのが特徴。 CSS3になって対応ブラウザでは便利になったとはいえ、クロスブラウザ対応というと１行では実現できないので、利用を検討してみてもよさそうです。 p... 続きを読む

[JS]IE6にも対応、簡単設置のカスタマイズも容易なアコーディオンのスクリプト -Easy Accordion | コリス

2010/09/14 118 users コリス アコーディオン アクセシブル スクリプト jQuery

テキストや画像、div要素などが配置されたパネルをアニメーションでスライドさせるアコーディオンを実装するjQueryのプラグインを紹介します。 アクセシブルで初期表示に任意のパネルを選択できるなど、高性能な超軽量スクリプトなので、アコーディオンを導入する方は是非検討してみてはいかがでしょうか？ Easy Accordionの主な特長 IE6を含め、クロスブラウザ対応。 スムースなアニメーションを伴... 続きを読む

[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider | コリス

2010/07/25 232 users コリス アクセシブル Ajax スクリプト スライダー

クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。... 続きを読む

CSS+HTMLのみで実装出来る、クロスブラウザ対応のWebデザインテクニック集 - かちびと.net

2010/06/15 821 users CSS net ソース HTMLタグ ドロップダウンメニュー

cssとHTMLタグのマークアップ のみで実装出来るテクニック集 です。クロスブラウザ対応のみ をcss-playから探したので、 ついでにご紹介します。 jsが使えない環境でデザインする機会があったのでメモがてらエントリー。css-playを中心に、あとはググったりSBMで探したり。マークアップはリンク先をご確認下さい。css-playはソースを。 シンプルなドロップダウンメニュー シンプルなド... 続きを読む

jQuery時代に生きるクロスブラウザ対応の知恵 8選 : tech.kayac.com - KAYAC engineers' blog

2009/10/09 328 users KAYAC engineers 知恵 Blog

Auto Copyが移植されたらchromeへの移行を検討します。agoです。 jQueryを使用するようになってクロスブラウザを意識することは少なくなりましたが、それでもjQueryではカバーしきれない差異はそれなりにあります。 そこでjQueryを使っていてもはまる可能性の高いクロスブラウザのtipsをご紹介したいと思います。 1 Objectリテラル内の末尾カンマ { 'key' : 'va... 続きを読む

[CSS]検索フォームを素敵なデザインするスタイルシート集 | コリス

2009/03/04 331 users コリス background images CSS URL

検索フォームを素敵なデザインにスタイリングする、クロスブラウザ対応のスタイルシートをCss Finestから紹介します。 HTML CSS /* style1*/ #searchform1 {background:url(images/search1.gif) left top no-repeat; display: block;width: 240px; height: 32px;} #sear... 続きを読む

[CSS]クロスブラウザ対応のフリーのナビゲーション集 -Styled Menu | コリス

2008/12/10 256 users Opera Safari Firefox Chrome コリス

Styled Menuから、IE6/7, Firefox, Opera, Safari, Chromeに対応した、フリーのナビゲーションを紹介します。 Styled Menu ナビゲーションはリスト要素で実装されており、ラベルを日本語に変更するなどカスタマイズも可能です。 続きを読む

[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス

2008/10/30 509 users div コリス カラム CSS エントリー

Matthew James Taylorのエントリーから、高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介します。 Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラム demo: 3カラム 以前、紹介した「高さの異なるカラムを揃えるスタイルシート」では、ページ内アンカーで要素が消失したり、IEで印刷で... 続きを読む

Webアプリに使えるAjaxライブラリ8選！ ― ＠IT

2006/11/21 711 users Ajaxライブラリ Ajax ライブラリ 利点 Webアプリ

どのようなプログラミング言語でもライブラリが存在するように、Ajaxにおいてもライブラリが存在します。 初めにAjaxライブラリの必要性について見ていきたいと思いますが、ここではAjax開発ならではのライブラリの必要性を2点取り上げます（ほかの言語のライブラリと共通する必要性はあらためて取り上げません）。 ■クロスブラウザ対応 Ajaxの利点として、さまざまな環境における一般的なWebブラウザ上で... 続きを読む