{"id":2747,"date":"2020-12-07T17:56:21","date_gmt":"2020-12-07T08:56:21","guid":{"rendered":"https:\/\/freeladay.com\/?p=2747"},"modified":"2021-04-12T16:27:00","modified_gmt":"2021-04-12T07:27:00","slug":"%e3%80%90css%e3%80%91%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%aehover%e6%99%82%e3%81%ab%e3%81%b5%e3%82%8f%e3%81%a3%e3%81%a8%e3%81%95%e3%81%9b%e3%82%8b%e7%b0%a1%e5%8d%98%e3%81%aa%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/freeladay.com\/?p=2747","title":{"rendered":"\u3010CSS\u3011hover\u6642\u306e\u52b9\u679c\u3092\u3075\u308f\u3063\u3068\u3055\u305b\u308b\u7c21\u5358\u306a\u65b9\u6cd5"},"content":{"rendered":"<p>\u30dc\u30bf\u30f3\u306e\u30aa\u30f3\u30de\u30a6\u30b9\uff08\u30db\u30d0\u30fc\uff09\u6642\u306e\u52b9\u679c\u306f\u3001UX\u306b\u7f6e\u3044\u3066\u3082\u30ea\u30f3\u30af\u30dc\u30bf\u30f3\u3060\u3068\u3044\u3046\u3053\u3068\u304c\u611f\u899a\u3067\u5206\u304b\u308b\u70ba\u3001web\u30c7\u30b6\u30a4\u30f3\u7684\u306b\u3082\u6709\u52b9\u3067\u3059\u3002<\/p>\n<p>hover\u52b9\u679c\u306e\u65b9\u6cd5\u3084\u57fa\u672c\u7684\u306a\u52d5\u304d\u306b\u3064\u3044\u3066\u77e5\u308a\u305f\u3044\u65b9\u306f\u3001<a href=\"https:\/\/freeladay.com\/?p=2080\">\u3053\u3061\u3089<\/a>\u306e\u8a18\u4e8b\u3067\u30b5\u30f3\u30d7\u30eb\u3092\u8e0f\u307e\u3048\u8aac\u660e\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>https:\/\/freeladay.com\/?p=2080<\/p>\n<p>\u30dc\u30bf\u30f3\u30db\u30d0\u30fc\u6642\u306e\u52b9\u679c\u306b\u3064\u3044\u3066\u4ee5\u524d\u306e\u8a18\u4e8b\u3067\u306f\u3001\u5207\u308a\u66ff\u3048\u6642\u304c\u306f\u3063\u304d\u308a\u3057\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n<p>\u4eca\u56de\u306f\u305d\u306e\u5207\u308a\u66ff\u3048\u3092\u300e\u3075\u308f\u3063\u3068\u300f\u3055\u305b\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#hover\"><span class=\"toc_number toc_depth_1\">1<\/span> hover\u6642\u306b\u3075\u308f\u3063\u3068\u3055\u305b\u308b\u65b9\u6cd5<\/a><ul><li><a href=\"#i\"><span class=\"toc_number toc_depth_2\">1.1<\/span> \u3075\u308f\u3063\u3068\u3055\u305b\u305f\u3044\u8981\u7d20\u306e\u7528\u610f<\/a><\/li><li><a href=\"#hover-2\"><span class=\"toc_number toc_depth_2\">1.2<\/span> hover\u6642\u306e\u6307\u5b9a<\/a><\/li><li><a href=\"#i-2\"><span class=\"toc_number toc_depth_2\">1.3<\/span> \u3075\u308f\u3063\u3068\u3055\u305b\u308b\u6307\u5b9a<\/a><\/li><li><a href=\"#i-3\"><span class=\"toc_number toc_depth_2\">1.4<\/span> \u30de\u30a6\u30b9\u30a2\u30a6\u30c8\u6642\u306e\u6307\u5b9a<\/a><\/li><\/ul><\/li><li><a href=\"#i-4\"><span class=\"toc_number toc_depth_1\">2<\/span> \u7c21\u5358\u306a\u89e3\u8aac<\/a><ul><li><a href=\"#i-5\"><span class=\"toc_number toc_depth_2\">2.1<\/span> \u5909\u5316\u3092\u3082\u3063\u3068\u65e9\u304f\u3059\u308b<\/a><\/li><li><a href=\"#i-6\"><span class=\"toc_number toc_depth_2\">2.2<\/span> \u5909\u5316\u3092\u3082\u3063\u3068\u9045\u304f\u3059\u308b<\/a><\/li><\/ul><\/li><li><a href=\"#i-7\"><span class=\"toc_number toc_depth_1\">3<\/span> \u307e\u3068\u3081<\/a><\/li><\/ul><\/div>\n<h2><span id=\"hover\">hover\u6642\u306b\u3075\u308f\u3063\u3068\u3055\u305b\u308b\u65b9\u6cd5<\/span><\/h2>\n<h3><span id=\"i\">\u3075\u308f\u3063\u3068\u3055\u305b\u305f\u3044\u8981\u7d20\u306e\u7528\u610f<\/span><\/h3>\n<p>\u3067\u306f\u3001\u65e9\u901f\u300e\u3075\u308f\u3063\u3068\u300f\u3055\u305b\u308b\u65b9\u6cd5\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n<p>\u30b5\u30f3\u30d7\u30eb\u3068\u3057\u3066\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30b7\u30f3\u30d7\u30eb\u306a\u30dc\u30bf\u30f3\u3092\u4f7f\u7528\u3057\u3066\u8aac\u660e\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p class=\"codepen\" style=\"height: 161px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"161\" data-theme-id=\"dark\" data-default-tab=\"result\" data-user=\"freeladay\" data-slug-hash=\"BapYoRy\" data-pen-title=\"BapYoRy\">See the Pen <a href=\"https:\/\/codepen.io\/freeladay\/pen\/BapYoRy\"><br \/>\nBapYoRy<\/a> by FLD (<a href=\"https:\/\/codepen.io\/freeladay\">@freeladay<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>\u4e0a\u8a18\u30dc\u30bf\u30f3\u306eHTML\u3068CSS\u306e\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b<\/p>\n<h5>HTML<\/h5>\n<pre class=\"language-markup\"><code>&lt;div class=\"button\"&gt;BUTTON&lt;\/div&gt;<\/code><\/pre>\n<h5>CSS<\/h5>\n<pre class=\"language-css\"><code>.button{\r\n  width:300px;\r\n  border:solid 1px #000;\r\n  coler:#000;\r\n  padding:10px 0;\r\n  font-weight:bold;\r\n  text-align:center;\r\n}<\/code><\/pre>\n<h3><span id=\"hover-2\">hover\u6642\u306e\u6307\u5b9a<\/span><\/h3>\n<p>\u4e0a\u8a18\u30b5\u30f3\u30d7\u30eb\u30dc\u30bf\u30f3\u306b\u30db\u30d0\u30fc\u6642\u306e\u52b9\u679c\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p class=\"codepen\" style=\"height: 156px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"156\" data-theme-id=\"dark\" data-default-tab=\"result\" data-user=\"freeladay\" data-slug-hash=\"qBRxOjy\" data-pen-title=\"qBRxOjy\">See the Pen <a href=\"https:\/\/codepen.io\/freeladay\/pen\/qBRxOjy\"><br \/>\nqBRxOjy<\/a> by FLD (<a href=\"https:\/\/codepen.io\/freeladay\">@freeladay<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h5>CSS<\/h5>\n<pre class=\"language-css\"><code>\/*\u30db\u30d0\u30fc\u6642\u306e\u6307\u5b9a*\/\r\n.button:hover{\r\n background:#000;\r\n box-shadow:0px 0px 10px #666;\r\n color:#fff;\r\n}<\/code><\/pre>\n<p>\u4ee5\u4e0b\u306e\u30dc\u30bf\u30f3\u306b\u30de\u30a6\u30b9\u3092\u6301\u3063\u3066\u304f\u308b\u3068\u3001\u201d\u80cc\u666f\u8272\u306e\u5909\u5316\u30fb\u6587\u5b57\u8272\u306e\u5909\u5316\u30fb\u5f71\u304c\u4ed8\u304f\u201d\u3068\u3044\u3046\u52b9\u679c\u304c\u3064\u304d\u307e\u3057\u305f\u304c\u3001<\/p>\n<p>\u3053\u306e\u6642\u70b9\u3067\u306f\u30d1\u30ad\u30c3\u3068\u306f\u3063\u304d\u308a\u3057\u305f\u5207\u308a\u66ff\u3048\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<h3><span id=\"i-2\">\u3075\u308f\u3063\u3068\u3055\u305b\u308b\u6307\u5b9a<\/span><\/h3>\n<p>\u4e0a\u8a18\u306e\u30b3\u30fc\u30c9\u306b\u3075\u308f\u3063\u3068\u3055\u305b\u308b\u70ba\u306e\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<h5>CSS<\/h5>\n<pre class=\"language-css\"><code>transition : 1s;<\/code><\/pre>\n<p>\u3053\u306e\uff11\u884c\u3092\u6307\u5b9a\u3059\u308b\u3060\u3051\uff01<\/p>\n<p class=\"codepen\" style=\"height: 152px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"152\" data-theme-id=\"dark\" data-default-tab=\"result\" data-user=\"freeladay\" data-slug-hash=\"RwKQWZm\" data-pen-title=\"RwKQWZm\">See the Pen <a href=\"https:\/\/codepen.io\/freeladay\/pen\/RwKQWZm\"><br \/>\nRwKQWZm<\/a> by FLD (<a href=\"https:\/\/codepen.io\/freeladay\">@freeladay<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>\u30de\u30a6\u30b9\u3092\u4e57\u305b\u308b\u3068\u3075\u308f\u3063\u3068\u3057\u305f\u5909\u5316\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<p>\u5177\u4f53\u7684\u306a\u30b3\u30fc\u30c9\u306f\u3001\u4ee5\u4e0b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<h5 class=\"css\" title=\"CSS\"><span style=\"color: #222222; font-family: monospace;\">CSS<\/span><\/h5>\n<pre class=\"language-css\"><code>\/*\u30db\u30d0\u30fc\u6642\u306e\u6307\u5b9a*\/\r\n.button:hover{\r\n background:#000;\r\n box-shadow:0px 0px 10px #666;\r\n color:#fff;\r\n transition : 1s;\u3000\/*\u3075\u308f\u3063\u3068\u3055\u305b\u308b\u6307\u5b9a*\/\r\n}<\/code><\/pre>\n<p>&nbsp;<\/p>\n<p>\u3057\u304b\u3057\u3001\u3053\u306e\u307e\u307e\u3060\u3068\u30de\u30a6\u30b9\u304c\u30dc\u30bf\u30f3\u4e0a\u304b\u3089\u306f\u306a\u308c\u305f\u6642\u306e\u5207\u308a\u66ff\u3048\u304c\u306f\u3063\u304d\u308a\u3057\u305f\u307e\u307e\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/p>\n<p>\u305d\u3053\u3067\u3001\u4eca\u56de\u306f\u30de\u30a6\u30b9\u304c\u96e2\u308c\u305f\uff08\u30de\u30a6\u30b9\u30a2\u30a6\u30c8\uff09\u6642\u3082\u300e\u3075\u308f\u3063\u3068\u300f\u3055\u305b\u308b\u6307\u5b9a\u3092\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<h3><span id=\"i-3\">\u30de\u30a6\u30b9\u30a2\u30a6\u30c8\u6642\u306e\u6307\u5b9a<\/span><\/h3>\n<p>\u30de\u30a6\u30b9\u30a2\u30a6\u30c8\u6642\u306e\u6307\u5b9a\u306f\u3001\u30db\u30d0\u30fc\u524d\u306ecss\u306b\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<p class=\"codepen\" style=\"height: 145px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"145\" data-theme-id=\"dark\" data-default-tab=\"result\" data-user=\"freeladay\" data-slug-hash=\"jOyZbYV\" data-pen-title=\"jOyZbYV\">See the Pen <a href=\"https:\/\/codepen.io\/freeladay\/pen\/jOyZbYV\"><br \/>\njOyZbYV<\/a> by FLD (<a href=\"https:\/\/codepen.io\/freeladay\">@freeladay<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>\u30de\u30a6\u30b9\u304c\u30dc\u30bf\u30f3\u4e0a\u306b\u6765\u305f\u6642\u3001\u306f\u306a\u308c\u305f\u6642\u306e\u305d\u308c\u305e\u308c\u306b\u3075\u308f\u3063\u3068\u3057\u305f\u6307\u5b9a\u304c\u51fa\u6765\u307e\u3057\u305f\uff01<\/p>\n<h5>CSS<\/h5>\n<pre class=\"language-css\"><code>.button{\r\n width:300px;\r\n border:solid 1px #000;\r\n coler:#000; padding:10px 0;\r\n font-weight:bold;\r\n transition : 1s;\u3000\/*\u3075\u308f\u3063\u3068\u3055\u305b\u308b\u6307\u5b9a*\/\r\n}\r\n\r\n.button:hover{\r\n background:#000;\r\n box-shadow:0px 0px 10px #666;\r\n color:#fff;\r\n transition : 1s;\u3000\/*\u3075\u308f\u3063\u3068\u3055\u305b\u308b\u6307\u5b9a*\/\r\n}<\/code><\/pre>\n<h2><span id=\"i-4\">\u7c21\u5358\u306a\u89e3\u8aac<\/span><\/h2>\n<pre class=\"language-css\"><code>transition : 1s;<\/code><\/pre>\n<p>\u3053\u306e\u300e1s\u300f\u306e\u90e8\u5206\u306f\u300e\uff11\u79d2\u304b\u3051\u3066\u5909\u5316\u3055\u305b\u308b\u300f\u3068\u3044\u3046\u6307\u5b9a\u3067\u3059\u306e\u3067\u3001\u3082\u3061\u308d\u3093\u3082\u3063\u3068\u5909\u5316\u306e\u30b9\u30d4\u30fc\u30c9\u3092\u65e9\u304f\u3059\u308b\u3053\u3068\u3082\u9045\u304f\u3059\u308b\u3053\u3068\u3082\u51fa\u6765\u307e\u3059\u3002<\/p>\n<h3><span id=\"i-5\">\u5909\u5316\u3092\u3082\u3063\u3068\u65e9\u304f\u3059\u308b<\/span><\/h3>\n<p class=\"codepen\" style=\"height: 149px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"149\" data-theme-id=\"dark\" data-default-tab=\"result\" data-user=\"freeladay\" data-slug-hash=\"XWpZmqE\" data-pen-title=\"XWpZmqE\">See the Pen <a href=\"https:\/\/codepen.io\/freeladay\/pen\/XWpZmqE\"><br \/>\nXWpZmqE<\/a> by FLD (<a href=\"https:\/\/codepen.io\/freeladay\">@freeladay<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h5>CSS<\/h5>\n<pre class=\"language-css\"><code>.button{\r\n width:300px;\r\n border:solid 1px #000;\r\n coler:#000; padding:10px 0;\r\n font-weight:bold;\r\n transition : .5s; \/*0.5\u79d2\u3067\u5909\u5316*\/\r\n}\r\n\r\n.button:hover{\r\n background:#000;\r\n box-shadow:0px 0px 10px #666;\r\n color:#fff;\r\n transition : .5s; \/*0.5\u79d2\u3067\u5909\u5316*\/\r\n}<\/code><\/pre>\n<h3><span id=\"i-6\">\u5909\u5316\u3092\u3082\u3063\u3068\u9045\u304f\u3059\u308b<\/span><\/h3>\n<p class=\"codepen\" style=\"height: 153px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-height=\"153\" data-theme-id=\"dark\" data-default-tab=\"result\" data-user=\"freeladay\" data-slug-hash=\"ZELrbRa\" data-pen-title=\"ZELrbRa\">See the Pen <a href=\"https:\/\/codepen.io\/freeladay\/pen\/ZELrbRa\"><br \/>\nZELrbRa<\/a> by FLD (<a href=\"https:\/\/codepen.io\/freeladay\">@freeladay<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h5>CSS<\/h5>\n<pre class=\"language-css\"><code>.button{\r\n width:300px;\r\n border:solid 1px #000;\r\n coler:#000; padding:10px 0;\r\n font-weight:bold;\r\n transition : 3s; \/*3\u79d2\u3067\u5909\u5316*\/\r\n}\r\n\r\n.button:hover{\r\n background:#000;\r\n box-shadow:0px 0px 10px #666;\r\n color:#fff;\r\n transition : 3s; \/*3\u79d2\u3067\u5909\u5316*\/\r\n}<\/code><\/pre>\n<h2><span id=\"i-7\">\u307e\u3068\u3081<\/span><\/h2>\n<p>\u30db\u30d0\u30fc\u6642\u306e\u6307\u5b9a\u3092\u6ed1\u3089\u304b\u306b\u3059\u308b\u3053\u3068\u3067\u67d4\u3089\u304b\u306a\u5370\u8c61\u3092\u4e0e\u3048\u308b\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u3002<\/p>\n<p>\u30dc\u30bf\u30f3\u52b9\u679c\u306e\u6307\u5b9a\u6642\u306b\u4eca\u56de\u306e\u3088\u3046\u306a\u3072\u3068\u6280\u3092\u52a0\u3048\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u5168\u4f53\u306e\u96f0\u56f2\u6c17\u3082\u5909\u308f\u3063\u3066\u304f\u308b\u306e\u3067\u3001\u305c\u3072\u4f7f\u3063\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u306d\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30dc\u30bf\u30f3\u306e\u30aa\u30f3\u30de\u30a6\u30b9\uff08\u30db\u30d0\u30fc\uff09\u6642\u306e\u52b9\u679c\u306f\u3001UX\u306b\u7f6e\u3044\u3066\u3082\u30ea\u30f3\u30af\u30dc\u30bf\u30f3\u3060\u3068\u3044\u3046\u3053\u3068\u304c\u611f\u899a\u3067\u5206\u304b\u308b\u70ba\u3001web\u30c7\u30b6\u30a4\u30f3\u7684\u306b\u3082\u6709\u52b9\u3067\u3059\u3002 hover\u52b9\u679c\u306e\u65b9\u6cd5\u3084\u57fa\u672c\u7684\u306a\u52d5\u304d\u306b\u3064\u3044\u3066\u77e5\u308a\u305f\u3044\u65b9\u306f\u3001\u3053\u3061\u3089\u306e\u8a18\u4e8b\u3067\u30b5\u30f3\u30d7\u30eb\u3092\u8e0f\u307e\u3048\u8aac\u660e\u3057<\/p>\n","protected":false},"author":1,"featured_media":3666,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[222],"tags":[49,159],"_links":{"self":[{"href":"https:\/\/freeladay.com\/index.php?rest_route=\/wp\/v2\/posts\/2747"}],"collection":[{"href":"https:\/\/freeladay.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freeladay.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freeladay.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freeladay.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2747"}],"version-history":[{"count":47,"href":"https:\/\/freeladay.com\/index.php?rest_route=\/wp\/v2\/posts\/2747\/revisions"}],"predecessor-version":[{"id":3612,"href":"https:\/\/freeladay.com\/index.php?rest_route=\/wp\/v2\/posts\/2747\/revisions\/3612"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freeladay.com\/index.php?rest_route=\/wp\/v2\/media\/3666"}],"wp:attachment":[{"href":"https:\/\/freeladay.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freeladay.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freeladay.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}