{"id":1616,"date":"2015-02-06T23:59:41","date_gmt":"2015-02-06T14:59:41","guid":{"rendered":"http:\/\/uda2.com\/blog\/?p=1616"},"modified":"2018-10-31T01:00:50","modified_gmt":"2018-10-30T16:00:50","slug":"zan","status":"publish","type":"post","link":"https:\/\/uda2.com\/blog\/zan\/","title":{"rendered":"HTML\u30fbCSS\u3066\u3099\u5200\u3066\u3099\u65ac\u308b\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3"},"content":{"rendered":"<p>\u6700\u8fd1LIG\u306e\u30d6\u30ed\u30b0\u3092\u898b\u308b\u6a5f\u4f1a\u304c\u591a\u304f\u306a\u3063\u305f\u3002LIG\u306f<a href=\"http:\/\/www.kayac.com\/\" target=\"_blank\">\u9762\u767d\u6cd5\u4eba\u30ab\u30e4\u30c3\u30af<\/a>\u3084<a href=\"http:\/\/bhb.co.jp\/\" target=\"_blank\">\u30d0\u30fc\u30b0\u30cf\u30f3\u30d0\u30fc\u30b0\u30d0\u30fc\u30b0<\/a>\u306e\u6d41\u308c\u3092\u6c72\u3093\u3060\u30ad\u30ef\u30e2\u30ce\u7cfb\u306e\u5236\u4f5c\u4f1a\u793e\u3067\u3001\u305d\u306eLIG\u306e\u30d6\u30ed\u30b0\u304c\u6280\u8853\u7cfb\u306e\u8a18\u4e8b\u304c\u5897\u3048\u3066\u304d\u305f\u306e\u3067\u6bce\u65e5\u8aad\u3093\u3067\u308b\u3002\u6628\u65e5\u3082<a href=\"http:\/\/liginc.co.jp\/web\/html-css\/143360\" target=\"_blank\">\u5200\u3066\u3099\u30b9\u3099\u30cf\u3099\u30c3\u3068\u65ac\u308b\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092HTML\u30fbCSS\u30fbJS\uff08jQuery\uff09\u3066\u3099\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5 | \u682a\u5f0f\u4f1a\u793eLIG<\/a>\u3092\u8aad\u3093\u3067\u300c\u3055\u3059\u304cLIG\u3001\u3053\u306e\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u9996\u3092\u306f\u306d\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u4f5c\u308b\u3068\u306f\u30fb\u30fb\u30fb\u300d\u3068\u3082\u601d\u3063\u305f\u304c\u4ffa\u3082\u4f5c\u3063\u3066\u307f\u305f\u3002<br \/>\n<!--more--><br \/>\n\u307e\u305aLIG\u7248\u306fPhotoShop\u3067\u52a0\u5de5\u3057\u30663\u679a\u306e\u753b\u50cf\u3092\u4f5c\u3063\u3066\u305f\u304c\u3001\u3053\u3063\u3061\u306f<strong>clip-path<\/strong>\uff08CSS\uff09\u3092\u4f7f\u3063\u3066\u5207\u308a\u629c\u304f\u3053\u3068\u306b\u3057\u305f\uff08clip-path\u306fIE\u304c\u672a\u5bfe\u5fdc\u306a\u306e\u3067\u5b9f\u52d9\u7684\u306b\u306f\u4f7f\u3046\u6a5f\u4f1a\u304c\u5c11\u306a\u3044\uff09\u3001clip-path\u3092\u4f7f\u3063\u3066\u30d6\u30e9\u30a6\u30b6\u4e0a\u3067\u5207\u308a\u629c\u3044\u3066\u308b\u306e\u3067\u3069\u3063\u304b\u3089\u3067\u3082\u5f15\u3063\u5f35\u3063\u3066\u3053\u308c\u308b\u3002\u753b\u50cf\u306f\u502b\u7406\u7684\u306a\u554f\u984c\u304b\u3089amazon\u306e\u30ea\u30f3\u30b4\u753b\u50cf\u306b\u3057\u305f\u3002<br \/>\n\u3061\u306a\u307f\u306bLIG\u7248\u306f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u7d42\u308f\u308a\u306e\u30a4\u30d9\u30f3\u30c8\u53d6\u5f97\u306bwebkitAnimationEnd\u3057\u304b\u4f7f\u3063\u3066\u7121\u3044\u305f\u3081webkit\u7cfb\u3067\u3057\u304b\u52d5\u304b\u306a\u3044\u3051\u3069\u300canimationend webkitAnimationEnd oAnimationEnd\u300d\u306a\u611f\u3058\u3067\u5165\u308c\u305f\u3089Firefox\u3084\u65e7opera\u3067\u3082\u52d5\u304f\u3088\u3046\u306b\u306a\u308b\u3002<\/p>\n<p>clip-path\u306f\u5148\u6708\u306e<a href=\"http:\/\/coliss.com\/articles\/build-websites\/operation\/css\/css-clip-path-clippy.html\" target=\"_blank\">\u5de5\u592b\u306e\u3042\u308bUI\u304c\u3044\u3044\uff01CSS\u3067\u5186\u30fb\u6955\u5186\u30fb\u591a\u89d2\u5f62\u306a\u3069\u306e\u30af\u30ea\u30c3\u30d7\u30d1\u30b9\u304c\u7c21\u5358\u306b\u4f5c\u6210\u3067\u304d\u308b\u30aa\u30f3\u30e9\u30a4\u30f3\u30b5\u30fc\u30d3\u30b9 -Clippy | \u30b3\u30ea\u30b9<\/a>\u3067\u77e5\u3063\u3066\u304b\u3089\u6c17\u306b\u306f\u306a\u3063\u3066\u3044\u305f\u304c\u3001firefox\u304c\u52d5\u304b\u306a\u304b\u3063\u305f\u306e\u3067\u3001\u307e\u3060\u307e\u3060\u672a\u6765\u306e\u6280\u8853\u3060\u3068\u601d\u3063\u3066\u30b9\u30eb\u30fc\u3057\u3066\u3044\u305f\u304c\u3001\u4eca\u56de\u6539\u3081\u3066\u8abf\u3079\u308b\u3068clip-path\u3067\u6307\u5b9a\u3059\u308b\u30af\u30ea\u30c3\u30d7\u30d1\u30b9\u306fwebkit\u7528\u306e\u300cCSS\u306e\u76f4\u66f8\u304d\u300d\u3068firefox\u7528\u306e\u300cSVG\u5185\u90e8\u53c2\u7167\u300d\u300cSVG\u5916\u90e8\u53c2\u7167\u300d\u306e3\u30d1\u30bf\u30fc\u30f3\u306e\u8a2d\u5b9a\u65b9\u6cd5\u304c\u3042\u308b\u304c\u3001<a href=\"http:\/\/bennettfeely.com\/clippy\/\" target=\"_blank\">Clippy<\/a>\u304cwebkit\u306b\u3057\u304b\u5bfe\u5fdc\u3057\u3066\u3044\u306a\u3044\u3060\u3051\u3067\u3001\u81ea\u524d\u3067SVG\u3092\u7528\u610f\u3057\u3066\u3084\u308b\u3068\u5207\u308a\u629c\u3051\u308b\u4e8b\u304c\u5206\u3063\u305f\u3002\uff08\u305d\u308c\u3067\u3082IE\u306f\u672a\u5bfe\u5fdc\u3060\u304c\uff09<br \/>\nLIG\u306e\u4eba\u3082\u66f8\u3044\u3066\u308b\u304c\u659c\u3081\u306b\u5207\u308a\u53d6\u3063\u305f\u753b\u50cf\u3092\u4e26\u3079\u308b\u3068\u5fae\u5999\u306b\u9699\u9593\u304c\u7a7a\u304f\u3002\u305d\u3053\u3067\u3001\u3042\u3048\u3066\u9699\u9593\u3092\u7a7a\u3051\u3066\u65ac\u308b\u524d\u306e\u30b7\u30fc\u30f3\u306e\u70ba\u306b\u5f8c\u308d\u306b\u5207\u308a\u53d6\u3063\u3066\u306a\u3044\u753b\u50cf\u3092\u7528\u610f\u3057\u305f\u3002\u305d\u306e\u753b\u50cf\u3092\u305a\u3089\u3057\u3066\u65ac\u3063\u305f\u98a8\u306a\u611f\u3058\u3092\u51fa\u3057\u3066\u308b\u3002<\/p>\n<p>LIG\u7248\u306f\u4e0a\u4e0b\u304c\u5207\u308a\u96e2\u3055\u308c\u3066\u308b\u611f\u3058\u306b\u306a\u3063\u3066\u305f\u304c\u3001\u677f\u3092\u5207\u3063\u305f\u69d8\u306b\u4e0a\u90e8\u304c\u5d29\u308c\u843d\u3061\u308b\u98a8\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306b\u3057\u305f\u3002<br \/>\n\u3042\u3068\u3001LIG\u7248\u306fjQuery\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u958b\u59cb\u7d42\u4e86\u3092\u5236\u5fa1\u3057\u3066\u308b\u304c\u3001\u3054\u3066\u3054\u3066\u3059\u308b\u306e\u3067animation\u306e\u30c7\u30a3\u30ec\u30a4\u3067\u8aa4\u9b54\u5316\u3057\u305f\u3002<\/p>\n<p>CSS<\/p>\n<pre><code>@keyframes slashSord {\r\n  0%   {transform: translate3d(0,0,0);}\r\n  100% {transform: translate3d(-640px,0,0);}\r\n}\r\n\r\n@keyframes slashUp{\r\n  0%   {transform: translate3d(0,0,0) rotate(0deg);}\r\n  70%  {transform: translate3d(-32px,24px,0) rotate(0deg);}\r\n  75%  {transform: translate3d(-32px,24px,0) rotate(0deg);}\r\n  100% {transform: translate3d(64px,540px,0) rotate(-80deg);}\r\n}\r\n@-webkit-keyframes slashSord {\r\n  0%   {-webkit-transform: translate3d(0,0,0);}\r\n  100% {-webkit-transform: translate3d(-640px,0,0);}\r\n}\r\n\r\n@-webkit-keyframes slashUp{\r\n  0%   {-webkit-transform: translate3d(0,0,0) rotate(0deg);}\r\n  70%  {-webkit-transform: translate3d(-32px,24px,0) rotate(0deg);}\r\n  75%  {-webkit-transform: translate3d(-32px,24px,0) rotate(0deg);}\r\n  100% {-webkit-transform: translate3d(64px,540px,0) rotate(-80deg);}\r\n}\r\n\r\n.zan img {\r\n  position:absolute;\r\n  top:0;\r\n  left:0;\r\n}\r\n.zan img.ue {\r\n  -webkit-clip-path: polygon(0 479px,639px 0,0 0);\r\n  clip-path: url(\"#clipPolygon7\");\r\n  -webkit-animation: slashUp 3.5s ease 2s both;\r\n  animation: slashUp 3.5s ease 2s both;\r\n}\r\n.zan img.all {\r\n  -webkit-animation: slashSord 0.25s ease 1.5s both;\r\n  animation: slashSord 0.25s ease 1.5s both;\r\n}\r\n.zan img.shita {\r\n  -webkit-clip-path: polygon(0 480px,640px 0,640px 480px);\r\n  clip-path: url(\"#clipPolygon3\");\r\n}\r\n\r\n.zan {\r\n  position:relative;\r\n  margin:90px auto;\r\n  width:640px;\r\n  height:480px;\r\n  overflow:hidden;\r\n}<\/code><\/pre>\n<p>HTML<\/p>\n<pre><code>&lt;div class=&quot;zan&quot;&gt;&lt;a href=&quot;http:\/\/www.amazon.co.jp\/exec\/obidos\/ASIN\/B00SWFGK1I\/ref=nosim&quot; target=&quot;_blank&quot;&gt;\r\n&lt;img src=&quot;http:\/\/ecx.images-amazon.com\/images\/I\/81kVL7QeoxL._SL1500_SR640,480_.jpg&quot; alt=&quot;&quot; class=&quot;all&quot; \/&gt;\r\n&lt;img src=&quot;http:\/\/ecx.images-amazon.com\/images\/I\/81kVL7QeoxL._SL1500_SR640,480_.jpg&quot; alt=&quot;&quot; class=&quot;ue&quot; \/&gt;\r\n&lt;img src=&quot;http:\/\/ecx.images-amazon.com\/images\/I\/81kVL7QeoxL._SL1500_SR640,480_.jpg&quot; alt=&quot;\u30ea\u30f3\u30b4&quot; class=&quot;shita&quot; \/&gt;\r\n&lt;\/a&gt;&lt;\/div&gt;\r\n&lt;svg width=&quot;0&quot; height=&quot;0&quot;&gt;\r\n&lt;clipPath id=&quot;clipPolygon7&quot;&gt;\r\n&lt;polygon points=&quot;0 479,639 0,0 0&quot;&gt;&lt;\/polygon&gt;\r\n&lt;\/clipPath&gt;\r\n&lt;clipPath id=&quot;clipPolygon3&quot;&gt;\r\n&lt;polygon points=&quot;0 480,640 0,640 480&quot;&gt;&lt;\/polygon&gt;\r\n&lt;\/clipPath&gt;\r\n&lt;\/svg&gt;<\/code><\/pre>\n<p>\u3067\u304d\u305f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u300c<a href=\"\/zan.html\" target=\"_blank\">\u30ea\u30f3\u30b4\u3092\u65ac\u308b\uff01<\/a>\u300d<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6700\u8fd1LIG\u306e\u30d6\u30ed\u30b0\u3092\u898b\u308b\u6a5f\u4f1a\u304c\u591a\u304f\u306a\u3063\u305f\u3002LIG\u306f\u9762\u767d\u6cd5\u4eba\u30ab\u30e4\u30c3\u30af\u3084\u30d0\u30fc\u30b0\u30cf\u30f3\u30d0\u30fc\u30b0\u30d0\u30fc\u30b0\u306e\u6d41\u308c\u3092\u6c72\u3093\u3060\u30ad\u30ef\u30e2\u30ce\u7cfb\u306e\u5236\u4f5c\u4f1a\u793e\u3067\u3001\u305d\u306eLIG\u306e\u30d6\u30ed\u30b0\u304c\u6280\u8853\u7cfb\u306e\u8a18\u4e8b\u304c\u5897\u3048\u3066\u304d\u305f\u306e\u3067\u6bce\u65e5\u8aad\u3093\u3067\u308b\u3002\u6628\u65e5\u3082\u5200\u3066\u3099\u30b9\u3099\u30cf\u3099\u30c3\u3068\u65ac\u308b\u3088<\/p>\n","protected":false},"author":2,"featured_media":1617,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[205],"tags":[238,57,276],"class_list":["post-1616","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creatorsdiary","tag-css3","tag-html","tag-276"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u6700\u8fd1LIG\u306e\u30d6\u30ed\u30b0\u3092\u898b\u308b\u6a5f\u4f1a\u304c\u591a\u304f\u306a\u3063\u305f\u3002LIG\u306f\u9762\u767d\u6cd5\u4eba\u30ab\u30e4\u30c3\u30af\u3084\u30d0\u30fc\u30b0\u30cf\u30f3\u30d0\u30fc\u30b0\u30d0\u30fc\u30b0\u306e\u6d41\u308c\u3092\u6c72\u3093\u3060\u30ad\u30ef\u30e2\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"uda2\"\/>\n\t<meta name=\"keywords\" content=\"css3,html,\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/uda2.com\/blog\/zan\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\n\t\t<!-- Global site tag (gtag.js) - Google Analytics -->\n<script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=G-PEC0Y4Y4KL\"><\/script>\n<script>\n  window.dataLayer = window.dataLayer || [];\n  function gtag(){dataLayer.push(arguments);}\n  gtag('js', new Date());\n\n  gtag('config', 'G-PEC0Y4Y4KL');\n<\/script>\n\t\t<meta property=\"og:locale\" content=\"ja_JP\" \/>\n\t\t<meta property=\"og:site_name\" content=\"\u30a6\u30c02Blog\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"HTML\u30fbCSS\u3066\u3099\u5200\u3066\u3099\u65ac\u308b\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 | \u30a6\u30c02Blog\" \/>\n\t\t<meta property=\"og:description\" content=\"\u6700\u8fd1LIG\u306e\u30d6\u30ed\u30b0\u3092\u898b\u308b\u6a5f\u4f1a\u304c\u591a\u304f\u306a\u3063\u305f\u3002LIG\u306f\u9762\u767d\u6cd5\u4eba\u30ab\u30e4\u30c3\u30af\u3084\u30d0\u30fc\u30b0\u30cf\u30f3\u30d0\u30fc\u30b0\u30d0\u30fc\u30b0\u306e\u6d41\u308c\u3092\u6c72\u3093\u3060\u30ad\u30ef\u30e2\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/uda2.com\/blog\/zan\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/uda2.com\/blog\/wp-content\/uploads\/zan_s.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/uda2.com\/blog\/wp-content\/uploads\/zan_s.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"450\" \/>\n\t\t<meta property=\"og:image:height\" content=\"338\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2015-02-06T14:59:41+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2018-10-30T16:00:50+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"HTML\u30fbCSS\u3066\u3099\u5200\u3066\u3099\u65ac\u308b\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 | \u30a6\u30c02Blog\" \/>\n\t\t<meta name=\"twitter:description\" content=\"\u6700\u8fd1LIG\u306e\u30d6\u30ed\u30b0\u3092\u898b\u308b\u6a5f\u4f1a\u304c\u591a\u304f\u306a\u3063\u305f\u3002LIG\u306f\u9762\u767d\u6cd5\u4eba\u30ab\u30e4\u30c3\u30af\u3084\u30d0\u30fc\u30b0\u30cf\u30f3\u30d0\u30fc\u30b0\u30d0\u30fc\u30b0\u306e\u6d41\u308c\u3092\u6c72\u3093\u3060\u30ad\u30ef\u30e2\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/uda2.com\/blog\/wp-content\/uploads\/zan_s.jpg\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/zan\\\/#article\",\"name\":\"HTML\\u30fbCSS\\u3066\\u3099\\u5200\\u3066\\u3099\\u65ac\\u308b\\u3088\\u3046\\u306a\\u30a2\\u30cb\\u30e1\\u30fc\\u30b7\\u30e7\\u30f3 | \\u30a6\\u30c02Blog\",\"headline\":\"HTML\\u30fbCSS\\u3066\\u3099\\u5200\\u3066\\u3099\\u65ac\\u308b\\u3088\\u3046\\u306a\\u30a2\\u30cb\\u30e1\\u30fc\\u30b7\\u30e7\\u30f3\",\"author\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/author\\\/uda2\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/uda2.com\\\/blog\\\/wp-content\\\/uploads\\\/zan_s.jpg\",\"width\":450,\"height\":338,\"caption\":\"\\u30ea\\u30f3\\u30b4\\u3092\\u65ac\\u308b\"},\"datePublished\":\"2015-02-06T23:59:41+09:00\",\"dateModified\":\"2018-10-31T01:00:50+09:00\",\"inLanguage\":\"ja\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/zan\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/zan\\\/#webpage\"},\"articleSection\":\"\\u5236\\u4f5c\\u65e5\\u8a18, css3, html, \\u30a2\\u30cb\\u30e1\\u30fc\\u30b7\\u30e7\\u30f3\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/zan\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog#listItem\",\"position\":1,\"name\":\"\\u30db\\u30fc\\u30e0\",\"item\":\"https:\\\/\\\/uda2.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/category\\\/creatorsdiary\\\/#listItem\",\"name\":\"\\u5236\\u4f5c\\u65e5\\u8a18\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/category\\\/creatorsdiary\\\/#listItem\",\"position\":2,\"name\":\"\\u5236\\u4f5c\\u65e5\\u8a18\",\"item\":\"https:\\\/\\\/uda2.com\\\/blog\\\/category\\\/creatorsdiary\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/zan\\\/#listItem\",\"name\":\"HTML\\u30fbCSS\\u3066\\u3099\\u5200\\u3066\\u3099\\u65ac\\u308b\\u3088\\u3046\\u306a\\u30a2\\u30cb\\u30e1\\u30fc\\u30b7\\u30e7\\u30f3\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog#listItem\",\"name\":\"\\u30db\\u30fc\\u30e0\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/zan\\\/#listItem\",\"position\":3,\"name\":\"HTML\\u30fbCSS\\u3066\\u3099\\u5200\\u3066\\u3099\\u65ac\\u308b\\u3088\\u3046\\u306a\\u30a2\\u30cb\\u30e1\\u30fc\\u30b7\\u30e7\\u30f3\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/category\\\/creatorsdiary\\\/#listItem\",\"name\":\"\\u5236\\u4f5c\\u65e5\\u8a18\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/#organization\",\"name\":\"\\u30a6\\u30c02Blog\",\"description\":\"\\u5927\\u962a\\u3067\\u30d5\\u30ea\\u30fc\\u30e9\\u30f3\\u30b9\\u3068\\u3057\\u3066WEB\\u5236\\u4f5c\\u3057\\u3066\\u3044\\u308b\\u7ba1\\u7406\\u4eba\\u304c\\u6c17\\u306b\\u306a\\u3063\\u305f\\u6280\\u8853\\u3092\\u30e1\\u30e2\\u3063\\u305f\\u308a\\u3001\\u4f5c\\u3063\\u305f\\u30c4\\u30fc\\u30eb\\u306e\\u7d39\\u4ecb\\u306a\\u3069\\u3092\\u7db4\\u3063\\u3066\\u3044\\u308b\\u30d6\\u30ed\\u30b0\\u3067\\u3059\\u3002\",\"url\":\"https:\\\/\\\/uda2.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/author\\\/uda2\\\/#author\",\"url\":\"https:\\\/\\\/uda2.com\\\/blog\\\/author\\\/uda2\\\/\",\"name\":\"uda2\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/zan\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e71f43b9e5830ff1e243e7edc1de9530ebe46766d3add1ef213a72c35c0a7c98?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"uda2\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/zan\\\/#webpage\",\"url\":\"https:\\\/\\\/uda2.com\\\/blog\\\/zan\\\/\",\"name\":\"HTML\\u30fbCSS\\u3066\\u3099\\u5200\\u3066\\u3099\\u65ac\\u308b\\u3088\\u3046\\u306a\\u30a2\\u30cb\\u30e1\\u30fc\\u30b7\\u30e7\\u30f3 | \\u30a6\\u30c02Blog\",\"description\":\"\\u6700\\u8fd1LIG\\u306e\\u30d6\\u30ed\\u30b0\\u3092\\u898b\\u308b\\u6a5f\\u4f1a\\u304c\\u591a\\u304f\\u306a\\u3063\\u305f\\u3002LIG\\u306f\\u9762\\u767d\\u6cd5\\u4eba\\u30ab\\u30e4\\u30c3\\u30af\\u3084\\u30d0\\u30fc\\u30b0\\u30cf\\u30f3\\u30d0\\u30fc\\u30b0\\u30d0\\u30fc\\u30b0\\u306e\\u6d41\\u308c\\u3092\\u6c72\\u3093\\u3060\\u30ad\\u30ef\\u30e2\",\"inLanguage\":\"ja\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/zan\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/author\\\/uda2\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/author\\\/uda2\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/uda2.com\\\/blog\\\/wp-content\\\/uploads\\\/zan_s.jpg\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/zan\\\/#mainImage\",\"width\":450,\"height\":338,\"caption\":\"\\u30ea\\u30f3\\u30b4\\u3092\\u65ac\\u308b\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/zan\\\/#mainImage\"},\"datePublished\":\"2015-02-06T23:59:41+09:00\",\"dateModified\":\"2018-10-31T01:00:50+09:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/uda2.com\\\/blog\\\/\",\"name\":\"\\u30a6\\u30c02Blog\",\"description\":\"\\u5927\\u962a\\u3067\\u30d5\\u30ea\\u30fc\\u30e9\\u30f3\\u30b9\\u3068\\u3057\\u3066WEB\\u5236\\u4f5c\\u3057\\u3066\\u3044\\u308b\\u7ba1\\u7406\\u4eba\\u304c\\u6c17\\u306b\\u306a\\u3063\\u305f\\u6280\\u8853\\u3092\\u30e1\\u30e2\\u3063\\u305f\\u308a\\u3001\\u4f5c\\u3063\\u305f\\u30c4\\u30fc\\u30eb\\u306e\\u7d39\\u4ecb\\u306a\\u3069\\u3092\\u7db4\\u3063\\u3066\\u3044\\u308b\\u30d6\\u30ed\\u30b0\\u3067\\u3059\\u3002\",\"inLanguage\":\"ja\",\"publisher\":{\"@id\":\"https:\\\/\\\/uda2.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"HTML\u30fbCSS\u3066\u3099\u5200\u3066\u3099\u65ac\u308b\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 | \u30a6\u30c02Blog","description":"\u6700\u8fd1LIG\u306e\u30d6\u30ed\u30b0\u3092\u898b\u308b\u6a5f\u4f1a\u304c\u591a\u304f\u306a\u3063\u305f\u3002LIG\u306f\u9762\u767d\u6cd5\u4eba\u30ab\u30e4\u30c3\u30af\u3084\u30d0\u30fc\u30b0\u30cf\u30f3\u30d0\u30fc\u30b0\u30d0\u30fc\u30b0\u306e\u6d41\u308c\u3092\u6c72\u3093\u3060\u30ad\u30ef\u30e2","canonical_url":"https:\/\/uda2.com\/blog\/zan\/","robots":"max-image-preview:large","keywords":"css3,html,\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3","webmasterTools":{"miscellaneous":"&lt;!-- Global site tag (gtag.js) - Google Analytics --&gt;\n&lt;script async src=\"https:\/\/www.googletagmanager.com\/gtag\/js?id=G-PEC0Y4Y4KL\"&gt;&lt;\/script&gt;\n&lt;script&gt;\n&nbsp; window.dataLayer = window.dataLayer || [];\n&nbsp; function gtag(){dataLayer.push(arguments);}\n&nbsp; gtag('js', new Date());\n\n&nbsp; gtag('config', 'G-PEC0Y4Y4KL');\n&lt;\/script&gt;"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uda2.com\/blog\/zan\/#article","name":"HTML\u30fbCSS\u3066\u3099\u5200\u3066\u3099\u65ac\u308b\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 | \u30a6\u30c02Blog","headline":"HTML\u30fbCSS\u3066\u3099\u5200\u3066\u3099\u65ac\u308b\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3","author":{"@id":"https:\/\/uda2.com\/blog\/author\/uda2\/#author"},"publisher":{"@id":"https:\/\/uda2.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/uda2.com\/blog\/wp-content\/uploads\/zan_s.jpg","width":450,"height":338,"caption":"\u30ea\u30f3\u30b4\u3092\u65ac\u308b"},"datePublished":"2015-02-06T23:59:41+09:00","dateModified":"2018-10-31T01:00:50+09:00","inLanguage":"ja","mainEntityOfPage":{"@id":"https:\/\/uda2.com\/blog\/zan\/#webpage"},"isPartOf":{"@id":"https:\/\/uda2.com\/blog\/zan\/#webpage"},"articleSection":"\u5236\u4f5c\u65e5\u8a18, css3, html, \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3"},{"@type":"BreadcrumbList","@id":"https:\/\/uda2.com\/blog\/zan\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/uda2.com\/blog#listItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/uda2.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/uda2.com\/blog\/category\/creatorsdiary\/#listItem","name":"\u5236\u4f5c\u65e5\u8a18"}},{"@type":"ListItem","@id":"https:\/\/uda2.com\/blog\/category\/creatorsdiary\/#listItem","position":2,"name":"\u5236\u4f5c\u65e5\u8a18","item":"https:\/\/uda2.com\/blog\/category\/creatorsdiary\/","nextItem":{"@type":"ListItem","@id":"https:\/\/uda2.com\/blog\/zan\/#listItem","name":"HTML\u30fbCSS\u3066\u3099\u5200\u3066\u3099\u65ac\u308b\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3"},"previousItem":{"@type":"ListItem","@id":"https:\/\/uda2.com\/blog#listItem","name":"\u30db\u30fc\u30e0"}},{"@type":"ListItem","@id":"https:\/\/uda2.com\/blog\/zan\/#listItem","position":3,"name":"HTML\u30fbCSS\u3066\u3099\u5200\u3066\u3099\u65ac\u308b\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3","previousItem":{"@type":"ListItem","@id":"https:\/\/uda2.com\/blog\/category\/creatorsdiary\/#listItem","name":"\u5236\u4f5c\u65e5\u8a18"}}]},{"@type":"Organization","@id":"https:\/\/uda2.com\/blog\/#organization","name":"\u30a6\u30c02Blog","description":"\u5927\u962a\u3067\u30d5\u30ea\u30fc\u30e9\u30f3\u30b9\u3068\u3057\u3066WEB\u5236\u4f5c\u3057\u3066\u3044\u308b\u7ba1\u7406\u4eba\u304c\u6c17\u306b\u306a\u3063\u305f\u6280\u8853\u3092\u30e1\u30e2\u3063\u305f\u308a\u3001\u4f5c\u3063\u305f\u30c4\u30fc\u30eb\u306e\u7d39\u4ecb\u306a\u3069\u3092\u7db4\u3063\u3066\u3044\u308b\u30d6\u30ed\u30b0\u3067\u3059\u3002","url":"https:\/\/uda2.com\/blog\/"},{"@type":"Person","@id":"https:\/\/uda2.com\/blog\/author\/uda2\/#author","url":"https:\/\/uda2.com\/blog\/author\/uda2\/","name":"uda2","image":{"@type":"ImageObject","@id":"https:\/\/uda2.com\/blog\/zan\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/e71f43b9e5830ff1e243e7edc1de9530ebe46766d3add1ef213a72c35c0a7c98?s=96&d=mm&r=g","width":96,"height":96,"caption":"uda2"}},{"@type":"WebPage","@id":"https:\/\/uda2.com\/blog\/zan\/#webpage","url":"https:\/\/uda2.com\/blog\/zan\/","name":"HTML\u30fbCSS\u3066\u3099\u5200\u3066\u3099\u65ac\u308b\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 | \u30a6\u30c02Blog","description":"\u6700\u8fd1LIG\u306e\u30d6\u30ed\u30b0\u3092\u898b\u308b\u6a5f\u4f1a\u304c\u591a\u304f\u306a\u3063\u305f\u3002LIG\u306f\u9762\u767d\u6cd5\u4eba\u30ab\u30e4\u30c3\u30af\u3084\u30d0\u30fc\u30b0\u30cf\u30f3\u30d0\u30fc\u30b0\u30d0\u30fc\u30b0\u306e\u6d41\u308c\u3092\u6c72\u3093\u3060\u30ad\u30ef\u30e2","inLanguage":"ja","isPartOf":{"@id":"https:\/\/uda2.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/uda2.com\/blog\/zan\/#breadcrumblist"},"author":{"@id":"https:\/\/uda2.com\/blog\/author\/uda2\/#author"},"creator":{"@id":"https:\/\/uda2.com\/blog\/author\/uda2\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/uda2.com\/blog\/wp-content\/uploads\/zan_s.jpg","@id":"https:\/\/uda2.com\/blog\/zan\/#mainImage","width":450,"height":338,"caption":"\u30ea\u30f3\u30b4\u3092\u65ac\u308b"},"primaryImageOfPage":{"@id":"https:\/\/uda2.com\/blog\/zan\/#mainImage"},"datePublished":"2015-02-06T23:59:41+09:00","dateModified":"2018-10-31T01:00:50+09:00"},{"@type":"WebSite","@id":"https:\/\/uda2.com\/blog\/#website","url":"https:\/\/uda2.com\/blog\/","name":"\u30a6\u30c02Blog","description":"\u5927\u962a\u3067\u30d5\u30ea\u30fc\u30e9\u30f3\u30b9\u3068\u3057\u3066WEB\u5236\u4f5c\u3057\u3066\u3044\u308b\u7ba1\u7406\u4eba\u304c\u6c17\u306b\u306a\u3063\u305f\u6280\u8853\u3092\u30e1\u30e2\u3063\u305f\u308a\u3001\u4f5c\u3063\u305f\u30c4\u30fc\u30eb\u306e\u7d39\u4ecb\u306a\u3069\u3092\u7db4\u3063\u3066\u3044\u308b\u30d6\u30ed\u30b0\u3067\u3059\u3002","inLanguage":"ja","publisher":{"@id":"https:\/\/uda2.com\/blog\/#organization"}}]},"og:locale":"ja_JP","og:site_name":"\u30a6\u30c02Blog","og:type":"article","og:title":"HTML\u30fbCSS\u3066\u3099\u5200\u3066\u3099\u65ac\u308b\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 | \u30a6\u30c02Blog","og:description":"\u6700\u8fd1LIG\u306e\u30d6\u30ed\u30b0\u3092\u898b\u308b\u6a5f\u4f1a\u304c\u591a\u304f\u306a\u3063\u305f\u3002LIG\u306f\u9762\u767d\u6cd5\u4eba\u30ab\u30e4\u30c3\u30af\u3084\u30d0\u30fc\u30b0\u30cf\u30f3\u30d0\u30fc\u30b0\u30d0\u30fc\u30b0\u306e\u6d41\u308c\u3092\u6c72\u3093\u3060\u30ad\u30ef\u30e2","og:url":"https:\/\/uda2.com\/blog\/zan\/","og:image":"https:\/\/uda2.com\/blog\/wp-content\/uploads\/zan_s.jpg","og:image:secure_url":"https:\/\/uda2.com\/blog\/wp-content\/uploads\/zan_s.jpg","og:image:width":450,"og:image:height":338,"article:published_time":"2015-02-06T14:59:41+00:00","article:modified_time":"2018-10-30T16:00:50+00:00","twitter:card":"summary","twitter:title":"HTML\u30fbCSS\u3066\u3099\u5200\u3066\u3099\u65ac\u308b\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 | \u30a6\u30c02Blog","twitter:description":"\u6700\u8fd1LIG\u306e\u30d6\u30ed\u30b0\u3092\u898b\u308b\u6a5f\u4f1a\u304c\u591a\u304f\u306a\u3063\u305f\u3002LIG\u306f\u9762\u767d\u6cd5\u4eba\u30ab\u30e4\u30c3\u30af\u3084\u30d0\u30fc\u30b0\u30cf\u30f3\u30d0\u30fc\u30b0\u30d0\u30fc\u30b0\u306e\u6d41\u308c\u3092\u6c72\u3093\u3060\u30ad\u30ef\u30e2","twitter:image":"https:\/\/uda2.com\/blog\/wp-content\/uploads\/zan_s.jpg"},"aioseo_meta_data":{"post_id":"1616","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":"","og_description":"","og_object_type":"article","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":"","og_article_tags":"","twitter_use_og":false,"twitter_card":"summary","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[],"defaultGraph":"","defaultPostTypeGraph":""},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2021-02-16 06:45:34","updated":"2022-10-03 20:59:34","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/uda2.com\/blog\" title=\"\u30db\u30fc\u30e0\">\u30db\u30fc\u30e0<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/uda2.com\/blog\/category\/creatorsdiary\/\" title=\"\u5236\u4f5c\u65e5\u8a18\">\u5236\u4f5c\u65e5\u8a18<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHTML\u30fbCSS\u3066\u3099\u5200\u3066\u3099\u65ac\u308b\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"\u30db\u30fc\u30e0","link":"https:\/\/uda2.com\/blog"},{"label":"\u5236\u4f5c\u65e5\u8a18","link":"https:\/\/uda2.com\/blog\/category\/creatorsdiary\/"},{"label":"HTML\u30fbCSS\u3066\u3099\u5200\u3066\u3099\u65ac\u308b\u3088\u3046\u306a\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3","link":"https:\/\/uda2.com\/blog\/zan\/"}],"_links":{"self":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/1616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/comments?post=1616"}],"version-history":[{"count":11,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/1616\/revisions"}],"predecessor-version":[{"id":2290,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/1616\/revisions\/2290"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/media\/1617"}],"wp:attachment":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/media?parent=1616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/categories?post=1616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/tags?post=1616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}