{"id":1119,"title":"CSS\u306e\u307f\u3067Google\u306e\u30b9\u30a4\u30c3\u30c1\u3092\u5b8c\u5168\u518d\u73fe\u3059\u308b\uff01","slug":"2018-03-11","date":"2018\u5e7403\u670811\u65e5","voting":{"good":"","bad":""},"modified":"2023\u5e7408\u670817\u65e5","tags":[{"name":"CSS","slug":"css"},{"name":"\u30c7\u30b6\u30a4\u30f3","slug":"design"},{"name":"Web","slug":"web"},{"name":"WebDev","slug":"webdev"}],"content":"<div class=\"separator\" style=\"clear: both; text-align: center;\"><a\n      href=\"https:\/\/1.bp.blogspot.com\/-OoyB0MEkmvA\/WqSpMfXdOWI\/AAAAAAABSMI\/IhxC4GqzbV4_g76GnZ1r21AfqMJPAPoNQCLcBGAs\/s1600\/thumbnail.001.jpeg\"\n      imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"><img border=\"0\"\n      src=\"https:\/\/1.bp.blogspot.com\/-OoyB0MEkmvA\/WqSpMfXdOWI\/AAAAAAABSMI\/IhxC4GqzbV4_g76GnZ1r21AfqMJPAPoNQCLcBGAs\/s1600\/thumbnail.001.jpeg\"\/><\/a><\/div><p>\u307f\u306a\u3055\u3093\u3053\u3093\u306b\u3061\u306f2001Y\uff08<a href=\"\/\/twitter.com\/Y20010920T\" target=\"_blank\" rel=\"noopener\">@Y20010920T<\/a>\uff09\u3067\u3059\u3002\n      <\/p><p>Google\u306e\u30b9\u30a4\u30c3\u30c1\u3092\u4f7f\u3044\u305f\u3044\u5834\u9762\u304c\u3042\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u3069\u30fc\u3082Google\u306f\u30b7\u30f3\u30d7\u30eb\u306a\u69cb\u9020\u3067\u4f5c\u3089\u308c\u3066\u3044\u307e\u305b\u3093\u3002\u304a\u305d\u3089\u304f\u305d\u308c\u306b\u3082\u610f\u5473\u304c\u3042\u308b\u306f\u305a\u3067\u3059\u304c\u3001\u4f7f\u3046\u8eab\u3068\u3057\u3066\u306f\u975e\u5e38\u306b\u4f7f\u3044\u306b\u304f\u3044\u3002\n      <\/p><p>Codepen\u306a\u3069\u3092\u63a2\u3063\u3066\u307f\u3066\u307f\u305f\u3082\u306e\u306e\u3042\u307e\u308a\u518d\u73fe\u5ea6\u304c\u9ad8\u304f\u306a\u304b\u3063\u305f\u305f\u3081\u3001\u81ea\u5206\u3067\u4f5c\u3063\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002 <\/p><a\n      name='more'><\/a><h2>\u306a\u304b\u306a\u304b\u305d\u308c\u3063\u307d\u304f\u518d\u73fe<\/h2><div class=\"separator\" style=\"clear: both; text-align:\n      center;\"><a\n      href=\"https:\/\/4.bp.blogspot.com\/-CgxdCdn4O1Y\/WqSVnaXtkdI\/AAAAAAABSL4\/XwRxxNUmb0gRPjivrOip3-SIGCSblwc4gCLcBGAs\/s1600\/picture-2.png\"\n      imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"><img border=\"0\"\n      src=\"https:\/\/4.bp.blogspot.com\/-CgxdCdn4O1Y\/WqSVnaXtkdI\/AAAAAAABSL4\/XwRxxNUmb0gRPjivrOip3-SIGCSblwc4gCLcBGAs\/s640\/picture-2.png\"\/><\/a><\/div><p>\u306a\u304b\u306a\u304b\u305d\u308c\u3063\u307d\u304f\u306a\u3063\u305f\u304b\u3068\u601d\u3044\u307e\u3059\u3002\u6570\u5024\u306a\u3069\u306f\u3059\u3079\u3066\u306eGoogle\u306e\u3082\u306e\u3092\u6301\u3063\u3066\u304d\u307e\u3057\u305f\u3002\n      <\/p><p data-height=\"265\" data-theme-id=\"light\" data-slug-hash=\"QQrKKL\" data-default-tab=\"css,result\"\n      data-user=\"2001Y\" data-embed-version=\"2\" data-pen-title=\"GoogleSwitch\" class=\"codepen\">See the Pen <a\n      href=\"https:\/\/codepen.io\/2001Y\/pen\/QQrKKL\/\">GoogleSwitch<\/a> by Y20010920T (<a\n      href=\"https:\/\/codepen.io\/2001Y\">@2001Y<\/a>) on <a\n      href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p><script async\n      src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><pre class=\"css\"><br\n      \/><code>.GoogleSwitch {<br \/> visibility : hidden;<br \/> width: 37px;<br \/> position:\n      relative;<br \/> -webkit-appearance: none;<br \/> -moz-appearance: none;<br \/> appearance:\n      none;<br \/>}<br \/>.GoogleSwitch:before {<br \/> content: \"\";<br \/> height: 14px;<br\n      \/> width: 37px;<br \/> margin: 0 auto;<br \/> background: #b9b9b9;<br \/> border-radius:\n      7px;<br \/> display: block;<br \/> visibility : visible;<br \/> transition: .1s;<br \/>\n      z-index: 0;<br \/>}<br \/>.GoogleSwitch:after {<br \/> content: \"\";<br \/> height: 20px;<br\n      \/> width: 20px;<br \/> background: #fafafa;<br \/> border-radius: 50%;<br \/> box-shadow: 0 1px\n      3px rgba(0,0,0,.4);<br \/> display: block;<br \/> visibility : visible;<br \/> transition:\n      .2s;<br \/> position: absolute;<br \/> top: -3px;<br \/> left: 0;<br \/> z-index: 1;<br\n      \/>}<br \/>.GoogleSwitch:checked:before {<br \/> background: rgba(66,133,244,.5);<br \/>}<br\n      \/>.GoogleSwitch:checked:after {<br \/> background: #4285f4;<br \/> left: 17px;<br\n      \/>}<\/code><br \/><\/pre><p>\u80cc\u666f\u3068\u30dc\u30bf\u30f3\u306fafter\u3068before\u3067\u8868\u793a\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u306e\u30c7\u30b6\u30a4\u30f3\u306f<span\n      class=\"code\">appearance: none;<\/span>\u3067\u6d88\u3057\u307e\u3059\u3002\u305d\u308c\u3067\u3082iOS\u3067\u306f\u6d88\u3048\u306a\u304b\u3063\u305f\u305f\u3081\u3001<span class=\"code\">visibility :\n      visible;<\/span>\u3092\u4f7f\u3044\u975e\u8868\u793a\u306b\u3057\u307e\u3057\u305f\u3002 <\/p><div class=\"check\"><span class=\"code\">display:\n      none;<\/span> \u3067\u306fafter\u3084before\u307e\u3067\u6d88\u3048\u3066\u3057\u307e\u3046\u305f\u3081 <span class=\"code\">visibility : visible;<\/span> \u3092\u4f7f\u3044\u307e\u3059\u3002\n      <\/div><p>Google\u304c\u6709\u52b9\u6642\u306e\u80cc\u666f\u306b\u534a\u900f\u660e\u3092\u4f7f\u3063\u3066\u3044\u305f\u305f\u3081\u3001\u305d\u306e\u307e\u307e\u6d41\u7528\u3057\u307e\u3057\u305f\u304c\u3001<span class=\"code\">#a0bcfb<\/span>\n      \u3067\u3082\u8fd1\u3044\u8272\u306b\u306a\u308a\u307e\u3059\u3002 <\/p><h3>\u6307\u5b9a\u306f\u30af\u30e9\u30b9\u4e00\u3064\u3067OK<\/h3><pre class=\"html\"><br\n      \/><code>&lt;input type=&quot;checkbox&quot;\n      class=&quot;GoogleSwitch&quot;\/&gt;<\/code><br\n      \/><\/pre><p>\u3053\u306e\u30c7\u30b6\u30a4\u30f3\u3092\u6307\u5b9a\u3059\u308b\u306b\u306f\u3001\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u30fb\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306b\u30af\u30e9\u30b9\u30921\u3064\u8ffd\u52a0\u3059\u308b\u3060\u3051\u3067\u3059\u3002\n      <\/p><p>form\u3067\u56f2\u3093\u3067\u3042\u308b\u304b\u306a\u3044\u304b\u306f\u95a2\u4fc2\u3042\u308a\u307e\u305b\u3093\u3002\u307e\u305f\u3001\u672c\u6765\u3042\u308b\u3079\u304d\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u30fb\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u305f\u3081label\u3082\u52d5\u4f5c\u3057\u307e\u3059\u3002\n      <\/p><h2>\u6700\u5f8c\u306b<\/h2><div class=\"balloon-left\"><a href=\"\/\/twitter.com\/Y20010920T\" target=\"_blank\" rel=\"noopener\"><div><\/div><span>2001Y<\/span><\/a><p>Google\u306fJS\u3067\u8272\u3005\u3057\u305f\u308a\u3057\u3066\u308b\u3093\u3060\u3068\u601d\u3044\u307e\u3059\u304c\u3001JS\u304c\u82e6\u624b\u306a\u306e\u3067\u7121\u7406\u3084\u308a\u9811\u5f35\u3063\u3066\u307f\u307e\u3057\u305f\u3002\u51fa\u6765\u306a\u3044\u3053\u3068\u306f\u51fa\u6765\u308b\u3053\u3068\u3067\u88dc\u3046\u3057\u304b\u306a\u3044\uff01\n      <\/p><\/div>"}