HOME
サイトマップ
営業日カレンダー
お問い合わせ
HOME
サイトマップ
営業日カレンダー
お問い合わせ
ツール集：CSS、jQuery等のテストページ・カテゴリー分類(2)
このページは、「webページ制作担当者用CSS、jQuery等のテストページ」の主な記事をピックアップして、カテゴリー分けしたものの(2)です（重複あり）。
画像加工・処理 関連
HTML5「background-size:cover;」を使って、画像を正方形にトリミング
CSSのclip-pathプロパティを使って、画像をクリッピングパスで切り抜き
JavascriptによるPhotoshopのような画像合成
jQueryプラグインpixastic.custom.jsを使って、画像加工
jQueryプラグイン lake.jsを使って、湖面に映った画像を生成
jQueryとCSS3 canvasで画像をアルファチャンネルマスクを使って透過PNGに変換
HTML5・CanvasのメソッドとjQueryを使って、カラー画像をグレイスケール（モノクロ）に変換
jQueryプラグインgreyScale.jsを使って、画像をグレイスケール（モノクロ）表示
jquery.colorimazer.jsを使って、画像を加工（色調補正など）
jQueryプラグインseurat.jsを使って、画像を網点に分解
jQueryプラグインcomponent.jsとHTML5のcanvasを使って、画像のリサイズと切り抜き
jquery.filterme.jsを使って、Photoshopのトーンカーブによる画像加工
jQueryとCanvasを使って、画像のヒストグラムを表示
jQueryとHTML5のCanvasを使って、ダミー画像ジェネレータ
CSSのfilterとVibrant.jsを使って、画像から色を抽出
jquery-sortable-photos.jsを使って、ドラッグできる自動並び替え画像一覧
アニメーション関連
リストマークを背景画像（アニメーションgif）で代替え
CSS3で動かすアニメーションテスト
CSS3で作るアニメーション・バナー
svg要素を使って、曲線のパスに沿ったアニメーション
svg要素を使って、曲線のパスに沿ったアニメーション（２）
CSS 小さなアニメgifを使って、hover時に画像編集ソフトの選択範囲のような動く破線
CSS3と画像を使って、テキストの見た目にアニメーション効果
jQuery waveanimate.jsを使い、波のような動きのアニメーションでフェードイン・アウト
jQueryのanimate()を使ってプログレスバー用アニメーションgifをプレビュー
jQuery UI：toggleClass()を使い、classを追加、削除する切り替えをアニメーション
jQueryプラグインtextualizer.jsを使って、サイネージテキストにアニメーションエフェクト
jQuery custombox.jsを使ってアニメーション効果付きモーダルウィンドウ
jQueryプラグインanimated_bg.jsを使って、各要素の背景色をアニメ効果でスムーズに変化
jQueryプラグインjwise.jsを使って、テキストをアニメーション効果で切り替えて連続表示
jQueryプラグインrotate3di.jsを使って、簡単に作るフリップアニメーション
jQueryとCSS3 transitionなどを使って、きれいなアイコンアニメーション
jQueryプラグインquietflow.jsを使って、動く図形の背景を実装
jQueryプラグインjquery.color.jsを使って、七色に変化するテキスト
jQuery attr()などを使ってDOM操作
jQuery DOM操作：append()とappendTo()の違い
jQuery DOM操作：prepend()とprependTo()の違い
jQuery DOM操作：html()を使って、htmlのソースを取得
jQuery DOM操作：html()を使って、htmlの内容を書き換え
jQuery DOM操作：attr()を使って、要素の属性値を制御（１）
jQuery DOM操作：attr()を使って、要素の属性値を制御（２）
jQuery attr()などを使って、チェックボックスの一括チェック
jQuery DOM操作：attr()を使って、aタグのtarget属性を変更
jQuery DOM操作：html要素を追加する場合のappend()とload()の比較
jQuery DOM操作：tableのtd要素内のテキストを入力した任意のテキストに書き換え
CSS3 疑似クラス
CSS3 :not疑似クラスを使って、エレメントの関係を同列で明確に（１）
CSS3 :not疑似クラスを使って、エレメントの関係を同列で明確に（２）
CSS3 :empty疑似クラスと、:before擬似要素を使って、空要素であることを明示的に表示
CSS3 :only-child擬似クラスを使って、子要素が一つだけの場合にスタイル適用
CSS3 :not()擬似クラスを使って、表示する画像ファイルの拡張子を選別
CSS3 :first-child疑似クラス、:not()擬似クラスなどを組み合わせて、やや複雑な要素選択
CSS3 :nth-child疑似クラスを使って、先頭から数えてn番目の子要素にcssを適用
CSS3 :nth-of-type疑似クラスを使って、先頭から数えてn番目の子要素（指定要素の）にcssを適用
CSS3 :only-of-type擬似クラスを使い、子要素が指定した要素タイプ一つだけの場合にスタイル適用
CSS3 :disabled擬似クラスなどを使って、input要素を種別ごとに色分け
CSSの:before、:after疑似要素を使って作る簡単なパンくずリスト
CSSの::before、::after疑似要素を使って作るパンくずリストと進捗確認（steps）
CSS3 :target疑似クラスを使い、CSSだけで要素の表示非表示のトグル風切り替え
CSS3 :target疑似クラスを使い、CSSのみで順を追ったページ内リンクの切り替え
CSS3 :target疑似クラスを使い、CSSのみで順を追ったページ内リンクの切り替え（２）
CSS3 :target疑似クラスと:before疑似要素を使い、CSSだけでテキストの書き換え
CSS3 :empty疑似クラスと、:after擬似要素を使って、テキスト無しリンクの処理
CSS 疑似要素や疑似クラスを使って、tableのセルをハイライト
CSS3 :target疑似クラスを使い、CSSだけでアニメーション（画像）の開始と停止
CSS3 :target疑似クラスを使い、CSSだけでアニメーション（テロップ）の開始と停止
［CSS］:checked疑似クラスと間接セレクタを使って、要素を表示非表示
［CSS］疑似クラスの:in-rangeと:out-of-rangeの確認
jQuery yuga.jsを使って、:empty疑似クラスの要素（空要素）を指定
最終更新日：
2019.04.10
※引用、参考：
Amazon.co.jp ウィジェット
株式会社コニファ：ミニbanner画像include用-1（フルパス）
株式会社コニファのSaaS、ASP
