{"id":2944,"date":"2016-09-13T08:50:09","date_gmt":"2016-09-12T23:50:09","guid":{"rendered":"http:\/\/agn.jp\/blog\/?p=2944"},"modified":"2016-09-12T19:37:14","modified_gmt":"2016-09-12T10:37:14","slug":"jquery%e3%81%a8css%e3%81%a7%e9%81%8a%e3%81%bc%e3%81%86%e3%80%90%e5%88%9d%e7%b4%9a%e8%80%85%e5%90%91%e3%81%91%e3%80%91","status":"publish","type":"post","link":"http:\/\/agn.jp\/blog\/?p=2944","title":{"rendered":"jQuery\u3068CSS\u3067\u904a\u307c\u3046\u3010\u521d\u7d1a\u8005\u5411\u3051\u3011"},"content":{"rendered":"<p><a href=\"http:\/\/agn.jp\/blog\/wp-content\/uploads\/2016\/09\/blog160912.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/agn.jp\/blog\/wp-content\/uploads\/2016\/09\/blog160912-1024x538.png\" alt=\"blog160912\" width=\"660\" height=\"347\" class=\"aligncenter size-large wp-image-2943\" srcset=\"http:\/\/agn.jp\/blog\/wp-content\/uploads\/2016\/09\/blog160912-1024x538.png 1024w, http:\/\/agn.jp\/blog\/wp-content\/uploads\/2016\/09\/blog160912-300x158.png 300w, http:\/\/agn.jp\/blog\/wp-content\/uploads\/2016\/09\/blog160912-768x403.png 768w, http:\/\/agn.jp\/blog\/wp-content\/uploads\/2016\/09\/blog160912.png 1200w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/a><\/p>\n<p>\u4eca\u56de\u306f\u30c7\u30b6\u30a4\u30f3\u2192\u3067\u304d\u308b\uff01\u3001HTML\u2192OK\uff01\u3001CSS\u2192\u306a\u3093\u3068\u304b\u3044\u3051\u308b\u3088\u3002\u3002\u3001Javascript\u2192\u306a\u3093\u304b\u6016\u3044\u3002\u3002\u3002\u3063\u3066\u3044\u3046\u4eba\u5411\u3051\u3067\u3059\u3002<\/p>\n<p>\u307e\u305a\u306f<a href=\"http:\/\/agn.jp\/blog\/examples\/160906_sample.html\" target=\"_blank\">\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8\u306f\u3053\u3061\u3089<\/a>\u3002<br \/>\n\u4f5c\u3063\u3066\u3044\u308b\u3046\u3061\u306b\u904a\u3093\u3067\u3057\u307e\u3044\u307e\u3057\u305f\u3002<\/p>\n<p>\u6700\u521d\u306b\u4eca\u56de\u306e\u304a\u984c\u3067\u3059\u3002(\u30b3\u30fc\u30c9\u3060\u3051\u3060\u3051\u3069\u30fb\u30fb\u30fb)<br \/>\n\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3057\u307e\u3059\u3002Web\u30b5\u30a4\u30c8\u4f7f\u3063\u3066\u3044\u308b\u3068\u5f53\u305f\u308a\u524d\u306b\u898b\u308b\u30a8\u30d5\u30a7\u30af\u30c8\u3067\u3059\u306d\u3002<\/p>\n<p>\u3053\u308c\u3092\u3061\u3087\u3063\u3068\u524d\u307e\u3067\u306f\u3069\u3046\u3084\u3063\u3066\u3044\u305f\u304b\u3068\u3044\u3046\u3068\u3001jQuery\u3092\u4f7f\u3063\u3066\u3084\u3063\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n<pre>\n<code>\n\n$(document).ready(function(){\n     $('.button').on({\n        'click' : function(){\n            $('.target').fadeIn(500, 'ease');\n            $('.target').css({\n                 'padding-top' : '50px',\n                 'padding-left' : '50px',\n            });\n        }\n    });   \n});\n\n<\/code>\n<\/pre>\n<p>\u3044\u307e\u3067\u306f\u3001\u3053\u306e\u3088\u3046\u306a\u4f7f\u3044\u65b9\u3092\u3059\u308b\u3053\u3068\u304c\u591a\u3044\u3067\u3059\u3002<\/p>\n<pre>\n<code>\n\n\/\/jQuery\n$(document).ready(function(){\n     $('.button').on(\n        'click' : function(){\n            $('.target').toggleClass('active');\n    });   \n});\n<\/code>\n<\/pre>\n<pre>\n<code>\n\/* CSS *\/\n.target{\n    opacity: 0;\n    padding-top: 0;\n    padding-left: 0;\n    transition: all 0.5s ease;\n}\n.target.active{\n    padding-top: 50px;\n    padding-left: 50px;\n}\n\n<\/code>\n<\/pre>\n<p>jQuery\u306e\u4ed5\u4e8b\u306f\u30af\u30e9\u30b9\u3092\u4ed8\u4e0e\u3059\u308b\u3060\u3051\u3001\u6b8b\u308a\u306e\u8a2d\u5b9a\u306fCSS\u3067\u3084\u308d\u3046\u3001\u3068\u3044\u3046\u3053\u3068\u3067\u3059\u306d\u3002<\/p>\n<h2>jQuery\u3092\u4f7f\u3046<\/h2>\n<p>CSS3\u304c\u30ac\u30f3\u30ac\u30f3\u4f7f\u3048\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3053\u3046\u3044\u3046\u3053\u3068\u306f\u5f53\u305f\u308a\u524d\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3051\u3069\u3001\u307b\u3093\u306e\u3061\u3087\u3063\u3068\u524d\u306f\u3053\u3093\u306a\u3053\u3068\u3057\u3066\u307e\u3057\u305f\u3002<br \/>\nFlash\u304c\u4f7f\u308f\u308c\u306a\u304f\u306a\u308a\u59cb\u3081\u3001\u3055\u307e\u3056\u307e\u306aJavascript\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u4e2d\u304b\u3089jQuery\u304c\u982d\u3072\u3068\u3064\u629c\u3051\u51fa\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u304c\u65b0\u3057\u304f\u306a\u3063\u3066CSS3\u3067\u8868\u73fe\u3067\u304d\u308b\u3053\u3068\u304c\u305a\u3063\u3068\u5e83\u304c\u3063\u305f\u3002\u305d\u3046\u3044\u3046\u7d4c\u7def\u3067\u3059\u3002<\/p>\n<p>jQuery\u306e\u5834\u5408\u306f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u9650\u308a\u307e\u305b\u3093\u304c\u521d\u3081\u306b\u30bb\u30ec\u30af\u30bf\u3092\u9078\u3076\u3002\u300c$(&#8216;selector&#8217;)\u300d\u306e\u90e8\u5206\u3067\u3059\u306d\u3002<br \/>\n\u305d\u308c\u304b\u3089\u3001\u305d\u306e\u30bb\u30ec\u30af\u30bf\u30fc\u306e\u52d5\u4f5c\u3001\u82f1\u8a9e\u306e\u52d5\u8a5e\u306b\u3042\u305f\u308b\u3088\u3046\u306a\u90e8\u5206\u3092\u66f8\u304d\u307e\u3059\u3002\u300c.fadeIn()\u300d\u306a\u3069\u3067\u3059\u3002<br \/>\n\u7d42\u308f\u308a\u306f\u300c; (\u30bb\u30df\u30b3\u30ed\u30f3)\u300d\u3067\u3059\u3002<\/p>\n<p>\u4e0a\u8a18\u306e\u4f8b\u3067\u306f\u521d\u3081\u306b\u300c.button\u300d\u304c\u300con\u300d\u3059\u308b\u3068\u8a00\u3063\u3066\u3044\u307e\u3059\u3002<br \/>\non()\u306f\u3001click\u3084mouseenter\u306a\u3069\u306e\u52d5\u4f5c\u306e\u6642\u306b\u547d\u4ee4\u3092\u767a\u52d5\u3055\u305b\u307e\u3059\u3002<br \/>\n\u4f8b\u3067\u306f\u300cclick\u300d\u30a4\u30d9\u30f3\u30c8\u304c\u8d77\u3053\u3063\u305f\u3068\u304d\u306b\u3001<\/p>\n<pre>\n<code>\n\n$('.target').fadeIn(500, 'ease');\u3000\/\/\u2460\n$('.target').animate({\n     'padding-top' : '50px',\n     'padding-left' : '50px',\n}, 500, 'ease');\u3000\/\/\u2461\n\n<\/code>\n<\/pre>\n<p>\u306e2\u3064\u306e\u547d\u4ee4\u3092\u3057\u3066\u3044\u307e\u3059\u3002<br \/>\n\u2460\u3067\u306f500ms(\u30df\u30ea\u30bb\u30ab\u30f3\u30c9)\u3001\u3064\u307e\u308a0.5\u79d2\u304b\u3051\u3066\u30d5\u30a7\u30a4\u30c9\u30a4\u30f3\u3092\u3055\u305b\u3066\u3044\u307e\u3059\u3002&#8217;ease&#8217;\u306f\u30a4\u30fc\u30b8\u30f3\u30b0\u306e\u6307\u5b9a\u3067\u3059\u3002<br \/>\n\u2461\u306f0.5\u79d2\u304b\u3051\u3066padding-top\u3068padding-left\u304c\u305d\u308c\u305e\u308c50px\u79fb\u52d5\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u3063\u3066\u3001\u30bf\u30fc\u30b2\u30c3\u30c8\u306f\u53f3\u4e0b\u306b\u5e83\u304c\u308b\u3088\u3046\u306b\u898b\u3048\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n<h2>CSS\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u3064\u3044\u3066<\/h2>\n<p>CSS\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3059\u308b\u306b\u306f2\u901a\u308a\u306e\u65b9\u6cd5\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>1.transition\u3092\u4f7f\u3046\u65b9\u6cd5\u30682.animation\u3092\u4f7f\u3046\u65b9\u6cd5\u3067\u3059\u3002<br \/>\ntransition\u306f\u81ea\u52d5\u3067\u306f\u30b9\u30bf\u30fc\u30c8\u3057\u307e\u305b\u3093\u3002\u307e\u305f\u30eb\u30fc\u30d7\u3082\u3067\u304d\u307e\u305b\u3093\u3002<br \/>\n\u3057\u304b\u3057\u30b5\u30a4\u30c8\u5236\u4f5c\u4e0a\u3001\u3088\u304f\u4f7f\u3046\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u3053\u3061\u3089\u3092\u4f7f\u3046\u3053\u3068\u304c\u591a\u3044\u3067\u3059\u3002<br \/>\ntransition\u3068\u306f\u300c\u9077\u79fb\u300d\u306e\u3053\u3068\u3067\u3059\u304b\u3089\u3001\u3042\u308b\u72b6\u614b\u304b\u3089\u3042\u308b\u72b6\u614b\u3078\u79fb\u884c\u3059\u308b\u3001\u3068\u3044\u3046\u30a4\u30e1\u30fc\u30b8\u3067\u3057\u3087\u3046\u304b\u3002<\/p>\n<p>animation\u306ftransition\u306b\u6bd4\u3079\u3001\u3088\u308a\u7d30\u304b\u3044\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n\u30ad\u30fc\u30d5\u30ec\u30fc\u30e0\u3054\u3068\u306b\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u8a2d\u5b9a\u304c\u3067\u304d\u308b\u306e\u3067\u3001\u81ea\u5206\u306e\u60f3\u50cf\u306b\u8fd1\u3044\u52d5\u304d\u3092\u7d30\u304b\u304f\u3064\u3051\u3066\u3044\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<h3>CSS\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u306e\u6ce8\u610f\u70b9<\/h3>\n<p>CSS\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u306f\u57fa\u672c\u7684\u306b\u6570\u5024\u3084\u8a08\u7b97\u5f0f\u3067\u64cd\u308c\u308b\u3082\u306e\u3057\u304b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u304d\u307e\u305b\u3093\u3002<br \/>\n\u4f8b\u3048\u3070top\u306e\u5024\u304c0\u304b\u308950px\u306b\u3059\u308b\u3053\u3068\u308250%\u306b\u3059\u308b\u3053\u3068\u30825em\u306b\u3059\u308b\u306e\u3082OK\u3067\u3059\u3002<\/p>\n<p>\u3057\u304b\u3057\u3001margin-left\u306e\u5024\u30920\u304b\u3089auto\u306b\u3059\u308b\u3001\u3053\u308c\u306f\u30a2\u30a6\u30c8\u3067\u3059\u3002<br \/>\ntransition\u3092\u4f7f\u3063\u3066\u3001margin-right\u3068margin-left\u3092auto\u306b\u3057\u3001\u30dc\u30c3\u30af\u30b9\u3092\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u306a\u304c\u3089\u4e2d\u592e\u306b\u5bc4\u305b\u308b\u3068\u3044\u3046\u3053\u3068\u306f\u3067\u304d\u307e\u305b\u3093\u3002<br \/>\n\u3082\u3061\u308d\u3093\u3001text-align\u3092left\u304b\u3089center\u306b\u3057\u3066\u3082\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u3057\u307e\u305b\u3093\u3002<br \/>\n\u6570\u5024\u3092\u6271\u3046\u3082\u306e\u3057\u304b\u4f7f\u3048\u306a\u3044\u3001\u3068\u304a\u307c\u3048\u3066\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002<br \/>\n\u5148\u307b\u3069\u306e\u30dc\u30c3\u30af\u30b9\u3092\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u306a\u304c\u3089\u4e2d\u592e\u306b\u5bc4\u305b\u308b\u3001\u306a\u3093\u3066\u3044\u3046\u306e\u306fJavascript\u3067\u8a08\u7b97\u3057\u306a\u304c\u3089\u3084\u3063\u3066\u3082\u3044\u3044\u3067\u3059\u3002<br \/>\n\u203bmargin\u3092auto\u3057\u3066\u4e2d\u592e\u5bc4\u305b\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306f\u3067\u304d\u307e\u305b\u3093\u304c\u3001\u540c\u3058\u52d5\u304d\u306a\u3089\u304a\u305d\u3089\u304f\u4e0b\u306e\u30b3\u30fc\u30c9\u3067\u884c\u3051\u308b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<pre>\n<code>\n.target-parent{\n    position: relative;\n    width: 100%;\n    height: 200px;\n}\n.target{\n    position: absolute;\n    top: 50%;\n    left: 0;\n    transform: translateX(0) translateY(-50%);\n    transition: all 0.5s ease;\n}\n.target.anime{\n    left: 50%;\n    transform: translateX(-50%) translateY(-50%);\n}\n<\/code>\n<\/pre>\n<h2>\u767a\u706b<\/h2>\n<p>\u3053\u308c\u307e\u3067\u306fjQuery\u3092\u4f7f\u3063\u3066\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3057\u3066\u3044\u305f\u52d5\u304d\u306fCSS\u3067\u3082\u8868\u73fe\u3067\u304d\u308b\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3057\u305f\u3002<br \/>\nCSS\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u3046\u5834\u5408\u306f\u4f55\u3089\u304b\u306e\u767a\u706b\u30a4\u30d9\u30f3\u30c8\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u304c\u591a\u304f\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u4f8b\u3048\u3070\u4e0a\u8ff0\u306e\u30af\u30ea\u30c3\u30af\u306e\u30a4\u30d9\u30f3\u30c8\u3082\u305d\u3046\u3067\u3059\u3057\u3001\u5f53\u305f\u308a\u524d\u306b\u3088\u304f\u4f7f\u3046\u306e\u306f\u30dc\u30bf\u30f3\u306e\u4e0a\u306b\u30ab\u30fc\u30bd\u30eb\u304c\u306e\u3063\u305f\u6642\u3001\u306a\u3069\u3067\u3059\u306d\u3002\u3053\u306e\u30ab\u30fc\u30bd\u30eb\u304c\u30dc\u30bf\u30f3\u306b\u306e\u308b\u52d5\u304d\u306fCSS\u306e\u30bb\u30ec\u30af\u30bf(:hover)\u3067\u5224\u5b9a\u3067\u304d\u307e\u3059\u304b\u3089\u3001CSS\u3060\u3051\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u5b8c\u7d50\u3055\u305b\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u3057\u304b\u3057\u3001CSS\u306e\u30bb\u30ec\u30af\u30bf\u3060\u3051\u3067\u306f\u5224\u5b9a\u3067\u304d\u306a\u3044\u3082\u306e\u3082\u591a\u304f\u3042\u308a\u307e\u3059\u3002<br \/>\n\u4f8b\u3048\u3070\u304a\u7533\u8fbc\u307f\u30d5\u30a9\u30fc\u30e0\u3067\u3001\u300c\u5229\u7528\u6761\u4ef6\u306b\u540c\u610f\u3059\u308b\u300d\u306e\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306b\u30c1\u30a7\u30c3\u30af\u304c\u5165\u3063\u3066\u3044\u306a\u3044\u3068\u3001\u9001\u4fe1\u30dc\u30bf\u30f3\u304c\u62bc\u305b\u306a\u3044\u4ed5\u639b\u3051\u306f\u3088\u304f\u898b\u308b\u3067\u3057\u3087\u3046\u3002(\u3042\u308c\u306fCSS\u306a\u3057\u3067jQeury(Javascript)\u3060\u3051\u3067\u5b9f\u88c5\u3057\u305f\u308a\u3057\u307e\u3059\u304c)<br \/>\n\u3082\u3057\u304f\u306f\u3001\u8981\u7d20\u304c\u753b\u9762\u306e\u4e0a\u90e8\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u305f\u3089\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u59cb\u307e\u308b\u3068\u3044\u3046\u5834\u5408\u3082\u3042\u308a\u307e\u3059\u306d\u3002<\/p>\n<p>\u3053\u3046\u3044\u3046\u6642\u306b\u3088\u304f\u4f7f\u3046\u65b9\u6cd5\u304c\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u52d5\u304d\u81ea\u4f53\u306fCSS\u3067\u8a2d\u5b9a\u3057\u3066\u304a\u304f\u3002\u2192\u4f55\u3089\u304b\u306e\u6761\u4ef6\u3092\u6e80\u305f\u3057\u305f\u5834\u5408\u306bjQuery\u3092\u4f7f\u3063\u3066\u305d\u306e\u8981\u7d20\u306b\u30af\u30e9\u30b9\u3092\u4ed8\u4e0e\u3059\u308b\u3002\u2192\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\uff01\u307f\u305f\u3044\u306a\u65b9\u6cd5\u3067\u3059\u3002<\/p>\n<p>\u4e0a\u8a18\u306e\u4f8b\u3067\u3044\u3048\u3070\u3001.target\u306b\u306f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3059\u308b\u524d\u306e\u72b6\u614b\u3068transition\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3059\u308b\u3053\u3068\u304c\u66f8\u304b\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\n\u305d\u3057\u3066.target.anime\u306b\u306f\u3001.target\u306b.anime\u3068\u3044\u3046\u30af\u30e9\u30b9\u304c\u4ed8\u4e0e\u3055\u308c\u305f\u5834\u5408\u306b\u8d77\u3053\u308b\u7d50\u679c\u304c\u66f8\u3044\u3066\u3042\u308a\u307e\u3059\u3002<br \/>\n\u4f8b\u3048\u3070\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3068\u304d\u306b\u3001\u4f8b\u3048\u3070\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u3066\u304d\u305f\u6642\u306b\u3001jQuery\u306eaddClass()\u3092\u4f7f\u3063\u3066\u30af\u30e9\u30b9\u3092\u4ed8\u4e0e\u3057\u3066\u3042\u3052\u308c\u3070\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u30b9\u30bf\u30fc\u30c8\u3059\u308b\u308f\u3051\u3067\u3059\u3002<\/p>\n<p>\u4e0b\u306e\u4f8b\u3067\u306f.button\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3068\u304d\u306b.target\u306b\u30af\u30e9\u30b9active\u304c\u4ed8\u4e0e\u3055\u308c\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u59cb\u307e\u308a\u307e\u3059\u3002<\/p>\n<pre>\n<code>\n\n$(document).ready(function(){\n     $('.button').on(\n        'click' : function(){\n            $('.target').addClass('active');\n    }); \n});\n\n<\/code>\n<\/pre>\n<p>\u307e\u305f\u3001jQuery\u3092\u4f7f\u3046\u306a\u3089\u3070\u3001toggleClass()\u3082\u3088\u304f\u4f7f\u3046\u306e\u3067\u304a\u307c\u3048\u3066\u304a\u304f\u3068\u4fbf\u5229\u3067\u3059\u3002<br \/>\n\u4e0b\u306e\u4f8b\u3067\u306f\u3001.button\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3068\u304d\u306b.target\u306b\u30af\u30e9\u30b9active\u304c\u306a\u3051\u308c\u3070\u30af\u30e9\u30b9active\u3092\u4ed8\u4e0e\u3001\u3042\u3063\u305f\u5834\u5408\u306f\u30af\u30e9\u30b9active\u3092\u524a\u9664\u3057\u307e\u3059\u3002<\/p>\n<pre>\n<code>\n\n$(document).ready(function(){\n     $('.button').on(\n        'click' : function(){\n            $('.target').toggleClass('active');\n    }); \n});\n\n<\/code>\n<\/pre>\n<h2>\u3055\u307e\u3056\u307e\u306a\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u30fc\u3084\u30e9\u30a4\u30d6\u30e9\u30ea<\/h2>\n<p>\u81ea\u5206\u3067\u5b9f\u88c5\u3059\u308b\u3068\u306a\u308b\u3068\u3001\u3053\u3093\u304c\u3089\u304c\u308b\u90e8\u5206\u3082\u521d\u3081\u306e\u3046\u3061\u306f\u591a\u3044\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\n\u305d\u3093\u306a\u4eba\u3067\u3082\u30ab\u30f3\u30bf\u30f3\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u3001\u3042\u308a\u304c\u305f\u3044\u3053\u3068\u306bjQuery\u306b\u305b\u3088CSS\u306b\u305b\u3088\u3044\u308d\u3044\u308d\u306a\u30e9\u30a4\u30d6\u30e9\u30ea\u3084\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u304c\u51fa\u3066\u304d\u307e\u3057\u305f\u3002<br \/>\n\u4f5c\u8005\u3055\u3093\u305f\u3061\u306b\u611f\u8b1d\u3057\u3064\u3064\u3001\u3053\u3046\u3044\u3046\u306e\u3092\u4f7f\u3046\u306e\u3082\u5236\u4f5c\u30b9\u30d4\u30fc\u30c9\u3092\u4e0a\u3052\u308b\u4e0a\u3067\u306f\u6709\u7528\u3060\u3068\u601d\u3044\u307e\u3059\u3002<br \/>\nJavascript\u306f\u6016\u3044\u3068\u601d\u3063\u3066\u308b\u30c7\u30b6\u30a4\u30ca\u30fc\u3055\u3093\u306b\u3001\u4eca\u56de\u3084\u3063\u305f\u306e\u306fjQuery\u3092\u5229\u7528\u3057\u3066\u3001\u30af\u30e9\u30b9\u3092\u4ed8\u3051\u305f\u308a\u6d88\u3057\u305f\u308a\u3057\u305f\u3060\u3051\u3067\u3059\u3002<br \/>\n\u305f\u3063\u305f5\u884c\u3002\u6163\u308c\u308b\u3068\u4fbf\u5229\u3067\u3059\u304b\u3089\u3001\u3061\u3087\u3063\u3068\u305a\u3064\u89e6\u3063\u3066\u3044\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u306d\u3002<\/p>\n<ul>\n<li><a href=\"http:\/\/agn.jp\/blog\/examples\/160906_sample.html\" target=\"_blank\">\u4eca\u56de\u306e\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8<\/a><\/li>\n<\/ul>\n<h2>\u53c2\u8003\u30b5\u30a4\u30c8<\/h2>\n<ul>\n<li><a href=\"http:\/\/www.tam-tam.co.jp\/tipsnote\/html_css\/post7917.html\">CSS3\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\uff1a\u521d\u6b69\u306e\u521d\u6b69<\/a><\/li>\n<li><a href=\"http:\/\/semooh.jp\/jquery\/api\/effects\/animate\/params,+%5Bduration%5D,+%5Beasing%5D,+%5Bcallback%5D\/\">jQuery\u65e5\u672c\u8a9e\u30ea\u30d5\u30a1\u30ec\u30f3\u30b9<\/a><\/li>\n<li><a href=\"http:\/\/www.webcreatorbox.com\/tech\/animation-libraries\/\">\u624b\u8efd\u306b\u5b9f\u88c5\uff01Web\u30b5\u30a4\u30c8\u306b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u52a0\u3048\u3089\u308c\u308bCSS\uff06JavaScript\u30e9\u30a4\u30d6\u30e9\u30ea\u30fc<\/a><\/li>\n<\/ul>\n<div class='wp_social_bookmarking_light'>        <div class=\"wsbl_hatena_button\"><a href=\"\/\/b.hatena.ne.jp\/entry\/http:\/\/agn.jp\/blog\/?p=2944\" class=\"hatena-bookmark-button\" data-hatena-bookmark-title=\"jQuery\u3068CSS\u3067\u904a\u307c\u3046\u3010\u521d\u7d1a\u8005\u5411\u3051\u3011\" data-hatena-bookmark-layout=\"simple-balloon\" title=\"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"> <img loading=\"lazy\" decoding=\"async\" src=\"\/\/b.hatena.ne.jp\/images\/entry-button\/button-only@2x.png\" alt=\"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\" width=\"20\" height=\"20\" style=\"border: none;\" \/><\/a><script type=\"text\/javascript\" src=\"\/\/b.hatena.ne.jp\/js\/bookmark_button.js\" charset=\"utf-8\" async=\"async\"><\/script><\/div>        <div class=\"wsbl_facebook_like\"><div id=\"fb-root\"><\/div><fb:like href=\"http:\/\/agn.jp\/blog\/?p=2944\" layout=\"button_count\" action=\"like\" width=\"100\" share=\"false\" show_faces=\"false\" ><\/fb:like><\/div>        <div class=\"wsbl_facebook_share\"><div id=\"fb-root\"><\/div><fb:share-button href=\"http:\/\/agn.jp\/blog\/?p=2944\" type=\"button_count\" ><\/fb:share-button><\/div>        <div class=\"wsbl_twitter\"><a href=\"https:\/\/twitter.com\/share\" class=\"twitter-share-button\" data-url=\"http:\/\/agn.jp\/blog\/?p=2944\" data-text=\"jQuery\u3068CSS\u3067\u904a\u307c\u3046\u3010\u521d\u7d1a\u8005\u5411\u3051\u3011\" data-lang=\"ja\">Tweet<\/a><\/div>        <div class=\"wsbl_google_plus_one\"><g:plusone size=\"medium\" annotation=\"none\" href=\"http:\/\/agn.jp\/blog\/?p=2944\" ><\/g:plusone><\/div><\/div>\n<br class='wp_social_bookmarking_light_clear' \/>\n","protected":false},"excerpt":{"rendered":"<p>\u4eca\u56de\u306f\u30c7\u30b6\u30a4\u30f3\u2192\u3067\u304d\u308b\uff01\u3001HTML\u2192OK\uff01\u3001CSS\u2192\u306a\u3093\u3068\u304b\u3044\u3051\u308b\u3088\u3002\u3002\u3001Javascript\u2192\u306a\u3093\u304b\u6016\u3044\u3002\u3002\u3002\u3063\u3066\u3044\u3046\u4eba\u5411\u3051\u3067\u3059\u3002 \u307e\u305a\u306f\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8\u306f\u3053\u3061\u3089\u3002 \u4f5c\u3063\u3066\u3044\u308b\u3046\u3061\u306b\u904a\u3093\u3067\u3057\u307e\u3044\u307e\u3057\u305f\u3002 \u6700\u521d\u306b\u4eca\u56de\u306e\u304a\u984c &hellip; <a href=\"http:\/\/agn.jp\/blog\/?p=2944\" class=\"more-link\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"screen-reader-text\">jQuery\u3068CSS\u3067\u904a\u307c\u3046\u3010\u521d\u7d1a\u8005\u5411\u3051\u3011<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[42,4],"tags":[],"class_list":["post-2944","post","type-post","status-publish","format-standard","hentry","category-css","category-javascript"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/agn.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/agn.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/agn.jp\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/agn.jp\/blog\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"http:\/\/agn.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2944"}],"version-history":[{"count":0,"href":"http:\/\/agn.jp\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2944\/revisions"}],"wp:attachment":[{"href":"http:\/\/agn.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/agn.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2944"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/agn.jp\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}