{"id":1175,"date":"2016-12-19T20:31:41","date_gmt":"2016-12-19T11:31:41","guid":{"rendered":"http:\/\/css.programming.jp\/?p=1175"},"modified":"2017-03-30T13:22:05","modified_gmt":"2017-03-30T04:22:05","slug":"%e8%a4%87%e6%95%b0%e3%82%b7%e3%83%aa%e3%83%bc%e3%82%ba%e5%88%87%e6%8f%9b%e3%81%88%e5%9e%8b%e3%83%95%e3%82%a9%e3%83%88%e3%82%ae%e3%83%a3%e3%83%a9%e3%82%a2%e3%83%aa%e3%83%bc%ef%bc%92","status":"publish","type":"post","link":"https:\/\/css.programming.jp\/?p=1175","title":{"rendered":"\u8907\u6570\u30b7\u30ea\u30fc\u30ba\u5207\u63db\u3048\u578b\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30ea\u30fc\uff12"},"content":{"rendered":"

\u3000\u8907\u6570\u30b7\u30ea\u30fc\u30ba\u306e\u30b5\u30e0\u30cd\u30a4\u30eb\u7fa4\u3092\u3001\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u5207\u308a\u66ff\u3048\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u306e\u30af\u30ea\u30c3\u30af\u3067\u5199\u771f\u304cFadeIn\u8868\u793a\u3055\u308c\u308b\u30bf\u30a4\u30d7\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u3067\u3042\u308b\u3002\u5148\u306b\u3001\u300c\u8907\u6570\u30b7\u30ea\u30fc\u30ba\u5207\u63db\u3048\u578b\u30ae\u30e3\u30e9\u30ea\u30fc<\/a>\u300d\u3067\u3001\u5207\u308a\u66ff\u3048\u308b\u3068\u30b5\u30e0\u30cd\u30a4\u30eb\u304c\u6d41\u308c\u843d\u3061\u308b\u30bf\u30a4\u30d7\u3092\u63b2\u8f09\u3057\u3066\u3044\u308b\u3002\u3053\u306e\u305f\u3073\u306e\u300c\u8907\u6570\u30b7\u30ea\u30fc\u30ba\u5207\u63db\u3048\u578b\u30d5\u30a9\u30c8\u30ae\u30e3\u30e9\u30a2\u30ea\u30fc\uff12\u300d\u306f\u3001\u5207\u63db\u3048\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u304c\u683c\u5b50\u72b6\u306b\u62e1\u5927\u3057\u3066\u767b\u5834\u3059\u308b\u3088\u3046\u306b\u3057\u305f\u30bf\u30a4\u30d7\u3067\u3042\u308b\u3002
\n\u3000\u306a\u304a\u3001\u672c\u7a3f\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u306f\u3001Ie\u3001Edge\u306b\u306f\u5b8c\u5168\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u304c\u3001Firefox\u3001Chrome\u3067\u306f\u3054\u304f\u4e00\u90e8\u306b\u975e\u5bfe\u5fdc\u304c\u3042\u308b\uff08\u5b9f\u969b\u4e0a\u306f\u554f\u984c\u306b\u306a\u3089\u306a\u3044\u3068\u601d\u3046\u304c\uff09\u3002safari\u306f\u3001transform\u306etransition\u306b\u306f\u5bfe\u5fdc\u3057\u3066\u3044\u306a\u3044\u3068\u601d\u308f\u308c\u3001\u5bfe\u5fdc\u4e0d\u53ef\u3067\u3042\u308b\u3002\u305f\u3060\u3057\u3001\u3044\u305a\u308c\u3082Windows\u306e\u30d6\u30e9\u30a6\u30b6\u30fc\u306e\u8a71\u3067\u3001MacOS\u4e0a\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u306f\u8a66\u3057\u3066\u3044\u306a\u3044\u3002
\n\u203b\u6700\u65b0\u306eFirefox \u3067\u306f\u3001\u5de6\u306e\u30b7\u30ea\u30fc\u30ba\u5207\u63db\u3048\u5199\u771f\u306e\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3067\u3001\u4e0d\u5177\u5408\u304c\u767a\u751f\u3059\u308b\u306e\u3067\u3001CSS\u306e\u3001.ser_thumb:hover { \u5185\u306etransition\u8a18\u8ff0\u3092\u7121\u52b9\u306b\u3059\u308b\u306a\u3069\u306e\u5fc5\u8981\u304c\u3042\u308b\u3002
\n\u3055\u3089\u306b\u6700\u65b0\u306eFirefox\u3067\u306f\u4e0d\u5177\u5408\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/font><\/strong><\/p>\n

\u6e96\u5099<\/h4>\n

\u30fb\u30b5\u30e0\u30cd\u30a4\u30eb\u5199\u771f\uff08150*100\uff09\u3001\u53ca\u3073\u3001\u8868\u793a\u7528\u5199\u771f\uff08600*400\uff09\u3092\u3001html\u3068\u540c\u3058\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u30fc\u306e\u5404\u30b7\u30ea\u30fc\u30ba\u3054\u3068\u306b\u4f5c\u3089\u308c\u305f\u30d5\u30a9\u30eb\u30c0\u306b\u683c\u7d0d\u3059\u308b\u3002
\n\u3000\u3053\u3053\u3067\u306f\u3001img_kami\u3001img_hodaka\u3001img_yari\u3001img_chyo\u3002
\n\u30fb\u5207\u63db\u3048\u30dc\u30bf\u30f3\u7528\u306e\u5404\u30b7\u30ea\u30fc\u30ba\u306e\u5c0f\u5199\u771f\u3092\u540c\u3058\u30d5\u30a9\u30eb\u30c0\u306b\u683c\u7d0d\u3059\u308b\uff08s0.jpg\uff09\u3002<\/p>\n

\u30b5\u30f3\u30d7\u30eb\uff08DEMO\uff09<\/h4>\n

\u3000\u3053\u3061\u3089\u306e\u5225\u30da\u30fc\u30b8<\/u><\/a>\u306b\u3001HTML\u3068CSS\u306e\u30b3\u30fc\u30c9\u3068\u3068\u3082\u306b\u793a\u3057\u305f\u3002<\/p>\n

HTML\u306e\u30dd\u30a4\u30f3\u30c8\u8aac\u660e<\/h4>\n

\u30fb\u30ae\u30e3\u30e9\u30ea\u30fc\u306e\u7dcf\u67a0\u306f#stage\u3002
\n\u30fbdiv #stage\u5185\u306b\u3001\u5207\u63db\u3048\u7528\u5c0f\u5199\u771f\u3092\u5de6\u306b\u7e26\u306b\u4e26\u3079\u3001\u305d\u306e\u53f3\u306b\u3001div #frame\u3092\u7f6e\u304d\u3001\u305d\u306e\u4e2d\u306b\u3001\u30b5\u30e0\u30cd\u30a4\u30eb9\u679a\u3092\u683c\u5b50\u72b6\u306b\u3001\u8868\u793a\u5199\u771f\u3092\u3059\u3079\u3066\u91cd\u306d\u3066\u914d\u7f6e\u3059\u308b\u3002
\n\u30fb\u8868\u793a\u5199\u771f\u306e\u9589\u3058\u308b\u30dc\u30bf\u30f3\u306f\u3001\u8868\u793a\u5199\u771f\u3068\u540c\u3058div\uff08.photo\uff09\u5185\u306b\u7f6e\u304d\u3001\u5199\u771f\u3068\u3068\u3082\u306b\u898b\u3048\u96a0\u308c\u3059\u308b\u3088\u3046\u306b\u3057\u305f\u3002
\n\u30fb\u4ed6\u306e\u30b7\u30ea\u30fc\u30ba\u306e\u62e1\u5927\u5199\u771f\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u306e\u306b\u3001\u5207\u63db\u3048\u30dc\u30bf\u30f3\u5c0f\u5199\u771f\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3068\u304d\u306e\u5bfe\u5fdc\u3068\u3057\u3066\u3001\u5404\u5c0f\u5199\u771f\u306b\u3001#P110\uff08\u7a7a\uff09\u3078\u306e\u30ea\u30f3\u30af\u3092\u8cbc\u3063\u305f\uff08<a href=”#p110″>\uff09\u304c\u3001\u3053\u308c\u306f\u3001Ie\u3068Edge\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u308b\u304c\u3001Firefox\u3001Chrome\u306b\u306f\u5bfe\u5fdc\u3057\u3066\u3044\u306a\u3044\u3002\u3053\u306e\u4e21\u30d6\u30e9\u30a6\u30b6\u7528\u306b\u306f\u3001CSS\u3067\u4ed6\u306e\u30b7\u30ea\u30fc\u30ba\u306e.photo\u304copacity:0 \u306b\u306a\u308b\u3088\u3046\u306b\u3057\u3066\u5bfe\u5fdc\u3057\u305f\u3002
\n\u30fb\u5404\u30b5\u30e0\u30cd\u30a4\u30eb\u306b\u306f\u3001\u8a72\u5f53\u3059\u308b\u62e1\u5927\u5199\u771f\uff08.photo\uff09\u3078\u306e\u30ea\u30f3\u30af\u304c\u8cbc\u3063\u3066\u3042\u308a\u3001:target\u3067\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\u3092\u8a8d\u8b58\u3057\u3066\u3044\u308b\u3002<\/p>\n

CSS\u306e\u30dd\u30a4\u30f3\u30c8\u8aac\u660e<\/h4>\n

\u30fb\u5207\u63db\u3048\u30dc\u30bf\u30f3\u7528\u5c0f\u5199\u771f\u306f\u3001\u521d\u671f\u5024\u3092\u3001transform-origin: 0% 50%;\u3000transform: perspective(200px) rotateY(30deg);\u3068\u3057\u3001\u53f0\u5f62\u306b\u8868\u793a\u3057\u3066\u3044\u308b\u3002\u3053\u308c\u306b\u3001transition\u3092\u30bb\u30c3\u30c8\u3057\u3066\u3001\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3055\u308c\u305f\u3089\u3001transform: perspective(0px) rotateY(0deg);\u3000\u3067\u3001\u8d77\u304d\u4e0a\u304c\u308b\u3088\u3046\u306b\u77e9\u5f62\u306b\u623b\u3057\u3066\u3044\u308b\uff08Firefox\u3067\u4e0d\u767a\uff09\u3002
\n\u30fb\u305d\u308c\u305e\u308c\u306e\u30b5\u30e0\u30cd\u30a4\u30eb\u306f\u3001\u521d\u671f\u5024\u3067\u306f\u3001transform-origin: 50% 50%;\u3000transform: scale(0, 0);\u3000\u3068\u3057\u3001\u4e2d\u592e\u306b\u898b\u3048\u306a\u304f\u306a\u308b\u30b5\u30a4\u30ba\uff080pix\uff09\u3067\u914d\u7f6e\u3059\u308b\u3002
\n\u30fb\u5207\u63db\u3048\u5c0f\u5199\u771f\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u308b\u3068\uff08#r1:checked \u306a\u3069\uff09\u3001\u305d\u306e\u30b7\u30ea\u30fc\u30ba\u306b\u8a72\u5f53\u3059\u308b\u30b5\u30e0\u30cd\u30a4\u30eb\u7fa4\u304c transform: scale(1, 1); \u3067\u4e00\u6589\u306b\u62e1\u5927\u8868\u793a\u3055\u308c\u308b\u3002
\n\u30fb\u3055\u3089\u306b\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u308b\u3068\u3001\u8a72\u5f53\u3059\u308b\u5199\u771f\uff08:target\uff09\u304c\u30d5\u30a7\u30a4\u30c9\u30a4\u30f3\u3067\u8868\u793a\u3055\u308c\u308b\u3002
\n\u30fb\u5199\u771f\u3068\u3068\u3082\u306b\u8868\u793a\u3055\u308c\u308b\u3001\u9589\u3058\u308b\u30dc\u30bf\u30f3\u304c\u30af\u30ea\u30c3\u30af\u3055\u308c\u308b\u3068\u3001\u3053\u308c\u306b\u306f\u3001\u7a7a\u306e\u5199\u771f\u304c\u30ea\u30f3\u30af\u3055\u308c\u3066\u3044\u308b\uff08a href=”#p110″\uff09\u306e\u3067\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u7fa4\u8868\u793a\u306b\u623b\u308b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

\u3000\u8907\u6570\u30b7\u30ea\u30fc\u30ba\u306e\u30b5\u30e0\u30cd\u30a4\u30eb\u7fa4\u3092\u3001\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u5207\u308a\u66ff\u3048\u3001\u30b5\u30e0\u30cd\u30a4\u30eb\u306e\u30af\u30ea\u30c3\u30af\u3067\u5199\u771f\u304cFadeIn\u8868\u793a\u3055\u308c\u308b\u30bf\u30a4\u30d7\u306e\u30ae\u30e3\u30e9\u30ea\u30fc\u3067\u3042\u308b\u3002\u5148\u306b\u3001\u300c\u8907\u6570\u30b7\u30ea\u30fc\u30ba\u5207\u63db\u3048\u578b\u30ae\u30e3\u30e9\u30ea\u30fc\u300d\u3067\u3001\u5207\u308a\u66ff\u3048\u308b\u3068\u30b5\u30e0\u30cd\u30a4\u30eb\u304c\u6d41\u308c\u843d\u3061\u308b\u30bf\u30a4\u30d7\u3092 … \u7d9a\u304d\u3092\u8aad\u3080 →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-1175","post","type-post","status-publish","format-standard","hentry","category-4"],"_links":{"self":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1175"}],"version-history":[{"count":10,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1175\/revisions"}],"predecessor-version":[{"id":1233,"href":"https:\/\/css.programming.jp\/index.php?rest_route=\/wp\/v2\/posts\/1175\/revisions\/1233"}],"wp:attachment":[{"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1175"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1175"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css.programming.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}