webページ制作担当者用CSS、jQuery等のテストページ
webページ制作担当者用CSS、jQuery等のテストページ
ツール紹介やプログラム集topへ
特殊なもの、まとめ、その他
CSS、CSS3、html関連
javascript、jQueryl関連
最下段の記事へ
文字列・ライブ検索:
検索結果は、文字列のバックグラウンドを黄色でハイライトします。
※jQueryなどで「IE対応」としているものは、特に指定していない場合、おおむね Windows 7 pro、IE9 の環境で確認したものです。
CSSの小技・まとめ
画像を使わず、jQueryとCSS3で作る光るようなエフェクトのタブ
jQuery select.jsを使ってセレクター指定のチェック
パーセントに対応するcss棒グラフ / 打ち消し線サンプル
overflow: hidden; を使った画像置換 / リストマークを背景画像で代替え
リストマークを背景画像(アニメーションgif)で代替え
CSSのみで、入力フォームのフォーカス(IE非対応)
CSSとcsshover3.htcで、入力フォームのフォーカス(IEにも対応)
CSSを使った角丸ボタン。コメントの囲みにも利用可能
opacityで画像の透明度を変化させて、下の画像を表示する
Ultimate CSS Gradient Generatorで作成したグラデーションを利用したボタン(画像不使用)
target属性の確認(JS不使用)
target属性の確認(JS不使用)2・指定フレームの内容を換える
IE8の罫線が意図したように表示されないバグの対処
[CSS]
div要素内にある横並びブロックに、div要素の幅に合わせてマージンをつける
min-heightの確認・指定ブロック要素の最小の高さを指定
空白文字(半角スペース、改行、タブ)の表示に関わるwhite-spaceのふるまい
PIE.htcなどを使わず、css3のみでデコレーション(グラデーション)をIEに適応させる
半透明のpng画像を利用した角丸カラーボタン(横サイズ可変)
入れ子の親要素と子要素のoverflow:hidden;を使って画像をトリミング表示
javascriptを使わず、HTML5とCSS3で作成した登録フォームサンプル
html5の基本形サンプル
IEのブラウザモードとドキュメントモードの確認
CSS3だけで作るドロップダウンナビゲーションメニュー
CSS3だけで作るブログポストなどに貼付けるカレンダーアイコン
画像を使わず、CSSだけで作る角丸ボタン(その2)
IE9のみに対応するIEハックのテスト
HTML5とCSS3で作るFlexible Boxのテスト
HTML5とCSS3で作るFlexible Boxのテスト(2)
CSS3で動かすアニメーションテスト
CSS3のborder-imageを使って、画像でボーダーを描く
CSS3のmedia queryを使ったデバイスの方向確認、振り分け
CSS3のmedia queryを使って、デバイスとブラウザ画面の横サイズ確認、振り分け
CSS3のmedia queryを使って、デバイスの解像度にあわせたレイアウト変更
CSS3に未対応のIE8以下に、filterを使って不透明度を実装するテスト
CSSだけで、補足情報を表示するツールチップを表示
CSSだけで、IE6、IE7、IE8、IE9を判別する条件付きのHTML classとハック
CSS floatで横並びさせたリストで構成するページネーションのセンタリング
CSS floatした画像とそのまわりのテキストの動き
CSS3で、フォトアルバムなどに使えそうなポラロイド風写真表示
CSS3で作るアニメーション・バナー
CSS3で作るヘアライン加工風ボタン
CSS3の映像効果と変換による回転するボタン
JSを使った角丸ボタン。border-radiusに対応しないIE対策
htcを使った角丸ボタン。border-radiusに対応しないIE対策2
JSで外部テキストファイルを読み込み。JSでcssを書き換えて内部テキストの表示、非表示
PIE.htcを使って、css3のデコレーションをIEに対応させたボタン
Javascript(jquery-1.4.2.min.js)で奇数行、偶数行の色かえ
js 表示する内容の高さを取得し、その内容に合わせてiframeの高さを変更する
js 表示する内容の高さを取得し、その内容に合わせてiframeの高さを変更する(2)
jQueryでhtmlを画面に読み込む。その間loading.gifを表示
jQueryでローディングインジケーター(activity indicator)画像不使用
jQuery Spinで、数値入力にスピンボタン
jQueryで、縦スクロールニュースティッカー(ticker)・IEうまく動作せず
jQueryで、li要素を順に表示するニュースティッカー(ticker)2
jQueryで、li要素を順に表示するニュースティッカー(ticker)3・一文字ずつ表示
jQueryで、li要素を順に表示するニュースティッカー(ticker)4・fadeIn、fadeOut
jQueryのeachで個別処理(ループ)、すべてのp要素の前に「→」+文字数、バック色変更
jQueryを使ってレイティング・星で段階評価(例は5段階評価)
jQuery UIを使ったタブ切り替え
jQuery UIのDatepickerでカレンダーを表示して日付入力
jQueryで、要素にクラスを追加する
jQuery.data(elem)で、主に内部的な処理に用いられるIDを表示
jQuery.hover(over, out)で、オンマウス時にspan要素を追加
jQueryで、セレクタの要素ごとにプロパティを変更
jQueryの:not(selector)で指定以外の要素のプロパティ変更
jQueryの:contains(text)で、指定の文字を含む要素のプロパティを変更
jQuery・Annotation Overlay Effectで、説明画像に注釈文表示
jQuery・Jcropで、画像トリミングサイズチェック
excanvas.jsで、html5<canvas>をIE8以下にも対応させる
jquery.jqchart.jsで折れ線グラフ表示
jQuery・jqtransform.jsでフォームを整形
jQueryの animate 、toggleを使って、要素の表示、非表示
jquery.qrcode.min.jsを使って、記載した文字列をQRコードで表示
qrtip-1.0-jquery.jsを使って、リンク部分にオンマウスでその場にQRコードを表示
jQuery toggleClassを使って、要素のcssクラスの有り無しを切り替える
jQuery 階層関係を指定してエレメントを選択。子孫の要素
jQuery 配列の各値を関数で処理して、新たな配列を作成
code.google.comのuuppaプロジェクト・uuCanvas.jsのオーバーレイデモ
Better Check Boxes with jQueryを使ったチェックボックス
jQueryでゆっくりフェードするボタン画像
jquery.mobile.jsを利用して携帯用ページをhtml5対応のスマホ用に変更
jQuery innerHeightを使って、要素の内部の高さを取得、レイアウト確認用サンプルに
jQuery innerWidthを使って、要素の内部の幅を取得、レイアウト確認用サンプルに
jQueryを使って、clickイベントにファンクションをbindする
jQueryを使って、classを切り替えた要素のクローンを作成する
jQuery contents()を使って、要素内の子要素の内容を取得して、操作
jQuery change(fn)を使って、Eventオブジェクトを取得
jQuery css(name)を使って、style属性から指定スタイルの値を取得、表示
JSでサブウィンドウを画面中央に表示、+window.closeの比較
jQuery csv2tableとjqchartで、外部のCSVデータを読み込み、グラフ作成
jQuery csv2tableで、外部のCSVデータを読み込み、表を作成
jQuery slideToggleとtoggleで、要素の表示、非表示切り替えの比較
jQuery loadで、各種外部ファイル読み込み
jQuery inArrayで、カンマ区切り配列データからインデックスを取り出す
jQuery の is(expr)とif文で、要素集合のプロパティを判別
jQuery show(speed)で、ファイルの表示時間を変更
jQuery UIを使って、アコーデオン表示
jQuery UI を使ってフォーム入力の注意ダイアログ表示
jQuery simplemodal.jsを利用した確認ダイアログ表示
jQuery switchClassで、cssを変更
jQuery UI Droppablを使ってShopping Cartのような動き
jQuery load mouseoverを使って各種外部ファイル読み込み、mouseoutで空に
jQuery UI Effectsを使って要素を隠す際の効果の確認
jQuery UI Effectsを使って要素を表示する際の効果の確認
jQuery tableHover pluginを使ってテーブルの行、列をハイライト
jQuery slides.jsを使って、ブロック要素をスライドエフェクトをかけて切り替える
jQuery fixHeight.jsを使って、横に並ぶブロック要素の高さを合わせ
jQueryとhtml5で描くプログレスバー
jQuery simplelib overlayOthers.jsで、ロールオーバーしたもの以外の画像を薄くする
jQuery simplelib trimmedScroll.jsでロールオーバーすると画像を置き換えスクロール表示
jQuery UI Positionで、親のブロック要素からの相対位置の確認
jQuery UI Resizableを使って、ブロック要素をドラッグで縮小拡大
jQuery removeClassでclass指定を削除、addClassで元に戻す
jQuery UI Sortableを使って、要素を移動、並べ替え
jQuery UI Sliderを使って、スライダーで値を選ぶカラーピッカー
jQuery UI Selectableを使って、複数の要素選択を可能に
jQueryを使って、表示するフォントサイズ変更
jQuery とfarbtastic.jsを使ったカラーピッカー
jQuery EasyUIとjsonファイルを使って入力補完するフォーム
jQuery EasyUIを使って、ファイルの移動が可能なツリー構造
jQuery EasyUIを使って、ドラッグして移動できるウィンドウ
jQuery yuga.jsを使って、:empty疑似クラスの要素(空要素)を指定
jsでIE未対応のcss3テキストシャドウを付加するテスト
jQuery animate-textshadow でテキストシャドウにanimate効果
jQuery jQselectable.jsを使って、selectボックスを選択しやすいプルダウンに拡張
jQuery jQselectable.jsとAjaxZip2.jsで郵便番号から住所自動入力
jQueryを使って、デバイスの解像度にあわせたレイアウト変更
jQuery を使ってテキストエリアの入力文字数のカウントと処理
jQuery waveanimate.jsを使い、波のような動きのアニメーションでフェードイン・アウト
jQuery loadでイメージのロードとアンロード
jQuery Pagination.jsを使って、自動的に表示するページネーション
jQuery pager.jsを使って、自動的に表示するページネーション
jQuery 外部ファイルを読み込み、ページネーション化(1)
jQuery 外部ファイルを読み込み、ページネーション化(2)
jQuery 外部ファイルを読み込み、ページネーション化(3)(パラメーター変更付き)
jQuery load( url, data)を使って、1つのhtmlから部分を読み込み
jQuery プラグイン、replaceImg.jsを使って、テキストを画像に置換え
jQuery visibleなどを使って、画像の表示、非表示を操作
jQuery プラグインtapas.jsを使って、ページ内文字検索
jQuery mouseoverで、テキスト置き換え、mouseoutで元に戻す
jQuery click、dblclickで、テキストフィールドの入力文字列と置き換え
jQuery inputHintBox.jsを使って、フォームにツールチップでヒント
jQuery scrollTop()、scrollLeft()を使って、スクロールの位置を取得
jQuery DOM操作:appendTo()、prependTo()を使って、要素を移動
jQueryプラグインのpageFlipper.jsを使って、ページフリッパー
jQuery cssemoticons.min.jsを使って、欧米式顔文字
jQuery DOM操作:append()とappendTo()の違い
jQuery DOM操作:prepend()とprependTo()の違い
jQuery DOM操作:html()を使って、htmlのソースを取得
jQuery DOM操作:html()を使って、htmlの内容を書き換え
jQuery DOM操作:attr()を使って、要素の属性値を制御
jQuery attr()などを使って、チェックボックスの一括チェック
jQuery DOM操作:attr()を使って、aタグのtarget属性を変更
jQuery flowernav.jsを使ったフラワーナビゲーション
jQuery prop()を使って、tableのtrごと選択できるチェックボックス
jQuery DOM操作:html要素を追加する場合のappend()とload()の比較
jQuery DOM操作:tableのtd要素内のテキストを入力した任意のテキストに書き換え
jQuery ページスクロールすると、ページトップへ戻るボタンを表示
jQuery dynatree.jsを使って、ツリー型ナビゲーション(iframeから相互に操作)
jQuery drag-drop-folder-tree.jsを使って、ツリー型ナビゲーション(ドラッグ可能)
jQueryのeach()などで、tableまわりのデザイン変更
jQuery Waypoints pluginを使って、動的にコンテンツのデザイン変更
Query プラグインmousewheel.jsを使って、マウスホイールの状態を表示
jQuery UI Widgetを使って、ボックスの背景色をランダムに変更
jQuery alerts.jsを使って、きれいなアラートを表示
jQuery getData()などで入力データをtableに追加
jQuery Easy Paginateを使って、リスト要素から自動でページネーション作成
jQuery jTag pluginを使って、画像の一部分にラベル名を付けたタグを作成
jQuery プラグインcolResizableを使って、リサイズできるテーブルカラム
jQuery hover()を使って、リンクのマウスホバーを強調
jQuery slidesubnav.jsを使って、横スライド型のナビゲーションメニュー
jQuery .stop().animateを使って、残像効果のあるナビゲーション
jQuery xmltree.jsを使って、xmlファイルの構造をツリー表示
jQuery 標準で、外部cssを変更
jQuery .replace()を使って、URLテキストをリンク付きに変換
jQuery autosize.jsを使って、テキストエリアをテキスト量にあわせてリサイズ
jQuery jnotify.jsを使って各種の通知表示
jQuery floater.jsを使って、フローティングタイプのナビゲーション
jQueryプラグイン demoEmbedder.jsを使って、jsからのiframeの扱いを簡単に
jQueryプラグイン UI Virtual Keyboardを使って、入力時にキーボード表示
jQuery readmore.jsを使って、 既存テキストの折りたたみ
jQuery tablesorter.jsとtableEditor.jsを使って、セル内容を変更できるtable
jQuery quicksearch.jsを使って、table内の文字検索から、すばやく該当するtrを表示
jQuery appleslider.jsを使って、Apple風スライダー
jQuery.fixheadertableを使って、多機能なtable
jQuery プラグイン無しで、クリック効果音とslide関連を使った表示・非表示の切り替え
jQueryプラグインHorizontal Accordion を使って、横方向アコーディオン
jQuery Tutorial Pluginを使ってチュートリアルページを作成
jQueryプラグインcarouFredSel.jsを使ってループするカルーセルパネル
jQuery webticker.jsを使って、電光掲示板のようなニュースティッカー
jQuery ct1.jquery.jsを使って、メニューなどにツールチップ
jQueryプラグインjBreadCrumbを使って、折りたためるパンくずリスト
jQuery jit.jsを使って、静的なグラフ構造の相関図
jQueryプラグイン LivingFadeを使って、要素をランダムにフェ−ド
JS SyntaxHighlighterを使って、ソースコードを見やすくハイライト表示
JS google-code-prettifyを使ったシンタックスハイライト
jQuery linenumberwriter.jsを使って、ソースコードを見やすく表示
jQueryプラグインjmorph.jsを使って、モーフィングする画像ギャラリー
jQuery backstretch.jsを使って、ページの壁紙を簡単にロード、変更
jQueryプラグインfittext.jsを使って、文字の自動リサイズ
Google Chart APIを使って、Pie Chart(円グラフ)を作成
jQueryプラグインpeity.jsを使って、小さなPie Chart(円グラフ)などを作成
jQueryとCSSで左右の背景画像を個別に表示、変更する
jQueryプラグインcontenthover.jsを使って、画像hover時にコンテンツ表示
JSのRayCaster.jsとCSS3のcanvasを使って、ダンジョンゲーム風の動き
jQuery corner.jsを使ってboxの角を装飾。CSS3非対応のIE8以下にも対応させる
jQuery constantfooter.jsを使って、位置固定のfooter表示
jQuery(プラグイン無し)スクロールすると上部に固定されるナビ
jQuery(プラグイン無し)スクロールすると上部に固定されるナビ(2)
jQueryプラグインVertical Mega Menuを使って、項目数が大量のサブメニュー表示
jQueryプラグイン grumble.jsを使って回転する(ような)ツールチップ
jQuery :カラーピッカーで色を決め、縦列のcol要素ごとに背景色変更
jQuery プラグインanytime.jsを使って、日付入力と時間入力のピッカー
jQuery プラグインMasonryを使って、アイテム追加と石積みのように並び替え
jQuery プラグインhightabler.jsを使って、table要素の行をハイライト
jQueryプラグイン pixelentity.hilightを使って、スライドエフェクト
jQuery MagicLine Navigationを使って、移動追随型ナビゲーション
jQuery-uiを使って、ドラッグ & ドロップで並べ替えできる段落
jQuery プラグインtablednd.jsを使って、テーブルの行をドラッグ &ドロップで移動
jQueryプラグインhighlight.jsを使って、文字列をライブ検索してハイライト
jQueryとcssスプライトで、スライド式の日時、曜日付き時計
jQueryプラグインchartify.jsを使ってtableデータからグラフを作成
NEW
jQueryのみで、プラグインを使わず、XMLをきれいにパース
NEW
prototypeやjQueryなどに依存せず、ColorUtils.jsのみで、各種カラー操作
NEW
jQuery focus(fn)とblur(fn)を使って、フォーム入力欄の状態を確認するテスト
NEW
jQueryプラグインwookmark.jsを使って、要素の整列
NEW
JavascriptによるPhotoshopのような画像合成
NEW
JjQuery プラグインaddInputArea.jsを使って、form要素の追加と削除
NEW
ツール紹介やプログラム集topへ
このページのtopへ
|
コニファHOME
|
サイトマップ
|
会社案内
|
eメール
|
Copyright® 2012 Conifer,Inc. All rights reserved.