{"id":1759,"date":"2020-02-07T03:04:03","date_gmt":"2020-02-06T18:04:03","guid":{"rendered":"https:\/\/took.jp\/?p=1759"},"modified":"2020-10-19T18:58:20","modified_gmt":"2020-10-19T09:58:20","slug":"unko","status":"publish","type":"post","link":"https:\/\/took.jp\/tech-blog\/unko\/","title":{"rendered":"CSS\u3067\u7dba\u9e97\u306a\u3046\u3093\u3053\u3092\u4f5c\u6210\u3059\u308b\u3010\u30e9\u30a4\u30d6\u30e9\u30ea\u914d\u5e03\u3011"},"content":{"rendered":"<p>css\u304c\u82e6\u624b\u306a\u306e\u3067\u3001\u7df4\u7fd2\u304c\u3066\u3089\u306b\u300c\u3046\u3093\u3053\u300d\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n<h2>\u3053\u3060\u308f\u308a\u30dd\u30a4\u30f3\u30c8<\/h2>\n<p>\u30fbdiv\u30bf\u30b0\u306bunko\u30af\u30e9\u30b9\u3092\u4ed8\u4e0e\u3059\u308b\u3060\u3051\u3067\u3001\u751f\u6210\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u305f\u3044\u3002<\/p>\n<p>\uff08\u8907\u6570\u306e\u30bf\u30b0\u3092\u4f7f\u7528\u3059\u308b\u306e\u306f\u9762\u5012\uff09<\/p>\n<p>\u30fb\u30ea\u30a2\u30eb\u306a\u30d6\u30c4\u3067\u306f\u306a\u304f\u3001\u30a2\u30cb\u30e1\u306a\u3069\u3067\u8868\u73fe\u3055\u308c\u308b\u3088\u3046\u306a\u3082\u306e\u306b\u3057\u305f\u3044\u3002<\/p>\n<p>\u30fb\uff08\u3067\u304d\u308c\u3070\uff09\u30e9\u30a4\u30d6\u30e9\u30ea\u5316\u3057\u305f\u3044\u3002<\/p>\n<h2>\u3046\u3093\u3053\u7b2c\u4e00\u53f7<\/h2>\n<p>\u3046\u3093\u3053\u547c\u3073\u51fa\u3057\u6642\u306e\u30bf\u30b0\u306f\u4e00\u3064\u3067\u547c\u3073\u51fa\u3057\u305f\u3044\u3051\u308c\u3069\u3001\u751f\u6210\u3059\u308b\u306b\u306f\u7591\u4f3c\u8981\u7d20\u3060\u3051\u3067\u306f\u3001\u518d\u73fe\u3067\u304d\u306a\u304b\u3063\u305f\u305f\u3081\u3001JavaScript\u3092\u5229\u7528\u3057\u3001\u30bf\u30b0\u3092\u751f\u6210\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u3053\u308c\u304c\u672c\u5f53\u306e\u7cde\u30b3\u30fc\u30c9\u3002<\/p>\n<pre class=\"wp-block-luxe-blocks-syntaxhighlighter line-numbers language-markup\"><code class=\"language-markup\">&lt;style&gt;\r\n.unko{\r\n    height:60px;\r\n    width:100px;\r\n}\r\n.unko .stage_top{\r\n    height:35%;\r\n    width:25%;\r\n    display:block;\r\n    margin: 0 auto; \r\n    transform: rotate(-110deg);\r\n    margin-bottom:-20%;\r\n}\r\n.unko .stage_top .top{\r\n    height:100%;\r\n    width:100%;\r\n    background-color:brown;\r\n    border-radius: 50% 50% 0 50%;\r\n    display:inline-block;\r\n}\r\n.unko .stage_1{\r\n    height:30%;\r\n    width:40%;\r\n    display:block;  \r\n    margin: 0 auto;  \r\n}\r\n.unko .stage_2{\r\n    height:30%;\r\n    width:60%;\r\n    display:block;  \r\n    margin: 0 auto;  \r\n}\r\n.unko .stage_3{\r\n    height:30%;\r\n    width:80%;\r\n    display:block;  \r\n    margin: 0 auto;  \r\n}\r\n.unko div .left{\r\n    height:100%;\r\n    width:30%;\r\n    border-radius:50%;\r\n    background-color:brown;\r\n    display:inline-block;\r\n}\r\n.unko div .right{\r\n    height:100%;\r\n    width:30%;\r\n    border-radius:50%;\r\n    background-color:brown;\r\n    display:inline-block;\r\n}\r\n.unko .stage_1 .center{\r\n    margin-left:-15%;\r\n    margin-right:-15%;\r\n    height:100%;\r\n    width:60%;\r\n    background-color:brown;\r\n    display:inline-block;\r\n}\r\n.unko .stage_2 .center{\r\n    margin-left:-15%;\r\n    margin-right:-15%;\r\n    height:100%;\r\n    width:60%;\r\n    background-color:brown;  \r\n    display:inline-block;\r\n}\r\n.unko .stage_3 .center{\r\n    margin-left:-15%;\r\n    margin-right:-15%;\r\n    height:100%;\r\n    width:60%;\r\n    background-color:brown;  \r\n    display:inline-block;\r\n}\r\n&lt;\/style&gt;\r\n&lt;div class=\"unko\"&gt;&lt;\/div&gt;\r\n&lt;script&gt;\r\n    const stage = 3;\r\n    var unkos = [].slice.call(document.getElementsByClassName('unko'));\r\n    unkos.forEach( function(unko) {\r\n        var stage_top = document.createElement('div');\r\n        stage_top.className = 'stage_top';\r\n        var top = document.createElement('div');\r\n        top.className = 'top';\r\n        stage_top.appendChild(top);\r\n        unko.appendChild(stage_top);\r\n        \r\n        for (var i=1; stage &gt;= i; i++ ){\r\n            var parent = document.createElement('div');\r\n            parent.className = 'stage_'+i;\r\n            var left = document.createElement('span');\r\n            left.className = 'left';\r\n            parent.appendChild(left);\r\n            var center = document.createElement('span');\r\n            center.className = 'center';\r\n            parent.appendChild(center);\r\n            var right = document.createElement('span');\r\n            right.className = 'right';\r\n            parent.appendChild(right);\r\n            unko.appendChild(parent);\r\n        }\r\n    });\r\n&lt;\/script&gt;<\/code><\/pre>\n<p>\u304b\u306a\u308a\u96d1\u306a\u30b3\u30fc\u30c9\u306a\u306e\u3067\u3001\u4fee\u6b63\u70b9\u304c\u307e\u3060\u3042\u308b\u304b\u3082\u3002<\/p>\n<p>\u3053\u306e\u30b3\u30fc\u30c9\u3067\u751f\u6210\u3055\u308c\u305f\u300c\u3046\u3093\u3053\u69d8\u7b2c\u4e00\u53f7\u300d\u304c\u3053\u3061\u3089\u3002<\/p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"294\" height=\"251\" src=\"https:\/\/took.jp\/wp-content\/uploads\/2020\/02\/image-1.png\" alt=\"\" class=\"wp-image-1761\" \/><figcaption><\/figcaption><\/figure>\n<p>\u306a\u3093\u3068\u3082\u53ef\u611b\u3089\u3057\u3044...\u3002<\/p>\n<p>\u3082\u3046\u5c11\u3057\u3001\u7acb\u4f53\u611f\u304c\u307b\u3057\u3044\u305f\u3081\u6539\u5584\u3057\u3066\u307f\u308b\u3002<\/p>\n<h2>\u3046\u3093\u3053\u7b2c\u4e8c\u53f7<\/h2>\n<pre class=\"wp-block-luxe-blocks-syntaxhighlighter line-numbers language-markup\"><code class=\"language-markup\">&lt;style&gt;\r\n.unko{\r\n    height:60px;\r\n    width:100px;\r\n    margin-top:30px;\r\n    position:absolute;\r\n}\r\n.unko .stage_top{\r\n    height:35%;\r\n    width:25%;\r\n    display:block;\r\n    margin: 0 auto; \r\n    transform: rotate(-110deg);\r\n    margin-bottom:-20%;\r\n    position:relative;\r\n    top:-11px;\r\n}\r\n.unko .stage_top .top{\r\n    height:100%;\r\n    width:100%;\r\n    background-color:brown;\r\n    border-radius: 50% 50% 0 50%;\r\n    display:inline-block;\r\n}\r\n.unko div[class^='stage_']:not(.stage_top){\r\n    height:30%;\r\n    display:block;  \r\n    margin: 0 auto;  \r\n    position:relative;\r\n}\r\n.unko .stage_1{\r\n    width:40%;\r\n}\r\n.unko .stage_2{\r\n    width:60%;\r\n}\r\n.unko .stage_3{\r\n    width:80%;\r\n}\r\n.unko div[class^='stage_'] .main-contents{\r\n    height:182%;\r\n    width:100%;\r\n    display:block;  \r\n    margin: 0 auto;\r\n    background-color:brown;\r\n    top:-7px;\r\n    content:'';\r\n    position:absolute;\r\n    border-radius:50%;\r\n    z-index:2;\r\n}\r\n&lt;\/style&gt;\r\n\r\n&lt;div class=\"unko\"&gt;&lt;\/div&gt;\r\n&lt;script&gt;\r\n    const stage = 3;\r\n    var unkos = [].slice.call(document.getElementsByClassName('unko'));\r\n    unkos.forEach( function(unko) {\r\n        var stage_top = document.createElement('div');\r\n        stage_top.className = 'stage_top';\r\n\r\n        var top = document.createElement('div');\r\n        top.className = 'top';\r\n        stage_top.appendChild(top);\r\n        unko.appendChild(stage_top);\r\n        \r\n        for (var i=1; stage &gt;= i; i++ ){\r\n            var parent = document.createElement('div');\r\n            parent.className = 'stage_'+i;\r\n\r\n            var parent_bk = document.createElement('div');\r\n            parent_bk.className = 'main-contents';\r\n\r\n            parent.appendChild(parent_bk);\r\n\r\n            unko.appendChild(parent);\r\n        }\r\n    });\r\n&lt;\/script&gt;<\/code><\/pre>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"264\" height=\"234\" data-src=\"https:\/\/took.jp\/wp-content\/uploads\/2020\/02\/image-2.png\" alt=\"\" class=\"wp-image-1762 lazyload\" \/><\/figure>\n<p>\u304a\u3049\u3001\u3053\u308c\u3053\u308c\uff01<\/p>\n<p>\u307e\u3055\u3057\u304f\u3001\u3053\u308c\u304c\u79c1\u306e\u6c42\u3081\u308b\u3046\u3093\u3053\u3060\uff01<\/p>\n<p>\u5f8c\u306f\u3001\u5f71\u3092\u3064\u3051\u3066\u3001\u7121\u99c4\u306a\u30b3\u30fc\u30c9\u3092\u524a\u9664\u3057\u3066\u3001\u30e9\u30a4\u30d6\u30e9\u30ea\u5316\u3057\u305f\u3044\u3002<\/p>\n<h2>\u3046\u3093\u3053\u7b2c\u4e09\u53f7<\/h2>\n<pre class=\"wp-block-luxe-blocks-syntaxhighlighter line-numbers language-javascript\"><code class=\"language-javascript\">!function(){\r\n    var style = `\r\n        &lt;style&gt;\r\n            .unko{\r\n                height:60px;\r\n                width:100px;\r\n                margin:33px;\r\n                display:inline-block;\r\n            }\r\n            .unko .stage_top{\r\n                height:45%;\r\n                width:25%;\r\n                display:block;\r\n                margin: 0 auto; \r\n                transform: rotate(-110deg);\r\n                margin-bottom:-25%;\r\n                position:relative;\r\n                top:-11%;\r\n            }\r\n            .unko .stage_top .top{\r\n                height:100%;\r\n                width:100%;\r\n                background-color:brown;\r\n                border-radius: 50% 50% 0 50%;\r\n                display:inline-block;\r\n                border-left:3px solid #911c1c;\r\n            }\r\n            .unko div[class^='stage_']:not(.stage_top){\r\n                height:30%;\r\n                display:block;  \r\n                margin: 0 auto;  \r\n                position:relative;\r\n            }\r\n            .unko div[class^='stage_'] .main-contents{\r\n                height:182%;\r\n                width:100%;\r\n                display:block;  \r\n                margin: 0 auto;\r\n                background-color:#b22222;\r\n                top:-7%;\r\n                border-bottom:3px solid #911c1c;\r\n                position:absolute;\r\n                border-radius:50%;\r\n                z-index:2;\r\n            }\r\n        &lt;\/style&gt;\r\n    `;\r\n    document.write(style);\r\n}();\r\n\r\nwindow.addEventListener('DOMContentLoaded', function(){\r\n    const stage = 3;\r\n    var zIndex = stage + 10000;\r\n    var number = new RegExp(\/^[0-9]*$\/);\r\n    var unkos = [].slice.call(document.getElementsByClassName('unko'));\r\n    unkos.forEach( function(unko) {\r\n        var size = unko.getAttribute('size') ? unko.getAttribute('size') : 0;\r\n        if(!number.test(size)) throw new SyntaxError('size\u306fint\u578b\u3092\u6307\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002');\r\n        var stage_top = document.createElement('div');\r\n        stage_top.className = 'stage_top';\r\n        stage_top.style.zIndex = zIndex;\r\n        var top = document.createElement('div');\r\n        top.className = 'top';\r\n\r\n        if(size != 0){\r\n            unko.style.height = (size * 0.6) + 'px';\r\n            unko.style.width = size + 'px';\r\n            unko.style.margin = (size * 0.3) + 'px';\r\n            top.style.borderLeft = (size * 0.03) + 'px solid #911c1c'\r\n        }\r\n        stage_top.appendChild(top);\r\n        unko.appendChild(stage_top);\r\n        for (var i=1; stage &gt;= i; i++ ){\r\n            zIndex--;\r\n            var parent = document.createElement('div');\r\n            parent.className = 'stage_'+i;\r\n            parent.style.width = ((i * 20) + 20) + '%';\r\n            parent.style.zIndex = zIndex;\r\n            var child = document.createElement('div');\r\n            child.className = 'main-contents';\r\n\r\n            if(size != 0) child.style.borderBottom = (size * 0.03) + 'px solid #911c1c';\r\n            parent.appendChild(child);\r\n            unko.appendChild(parent);\r\n        }\r\n    });\r\n});<\/code><\/pre>\n<p>\u30e9\u30a4\u30d6\u30e9\u30ea\u306b\u3057\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p>\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3057\u3066\u547c\u3073\u51fa\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"wp-block-luxe-blocks-syntaxhighlighter line-numbers language-markup\"><code class=\"language-markup\">  \r\n&lt;script type=\"text\/javascript\" src=\".\/unko.js\"&gt;&lt;\/script&gt;\r\n&lt;div class=\"unko\" size=8&gt;&lt;\/div&gt;\r\n&lt;div class=\"unko\" size=10&gt;&lt;\/div&gt;\r\n&lt;div class=\"unko\" size=12&gt;&lt;\/div&gt;\r\n&lt;div class=\"unko\" size=14&gt;&lt;\/div&gt;\r\n&lt;div class=\"unko\" size=16&gt;&lt;\/div&gt;\r\n&lt;div class=\"unko\" size=18&gt;&lt;\/div&gt;\r\n&lt;div class=\"unko\" size=20&gt;&lt;\/div&gt;\r\n&lt;div class=\"unko\" size=22&gt;&lt;\/div&gt;\r\n&lt;div class=\"unko\" size=24&gt;&lt;\/div&gt;\r\n&lt;div class=\"unko\" size=26&gt;&lt;\/div&gt;<\/code><\/pre>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"396\" height=\"87\" data-src=\"https:\/\/took.jp\/wp-content\/uploads\/2020\/02\/image-3.png\" alt=\"\" class=\"wp-image-1763 lazyload\" data-srcset=\"https:\/\/took.jp\/tech-blog\/wp-content\/uploads\/2020\/02\/image-3.png 396w, https:\/\/took.jp\/tech-blog\/wp-content\/uploads\/2020\/02\/image-3-300x66.png 300w\" data-sizes=\"(max-width: 396px) 100vw, 396px\" \/><\/figure>\n<p>size\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u8ffd\u52a0\u3059\u308b\u3053\u3068\u3067\u597d\u304d\u306a\u5927\u304d\u3055\u306e\u3046\u3093\u3053\u3092\u751f\u6210\u3059\u308b\u3053\u3068\u306b\u3082\u6210\u529f\u3057\u307e\u3057\u305f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>css\u304c\u82e6\u624b\u306a\u306e\u3067\u3001\u7df4\u7fd2\u304c\u3066\u3089\u306b\u300c\u3046\u3093\u3053\u300d\u3092\u4f5c\u6210\u3057\u3066\u307f\u307e\u3059\u3002 \u3053\u3060\u308f\u308a\u30dd\u30a4\u30f3\u30c8 \u30fbdiv\u30bf\u30b0\u306bunko\u30af\u30e9\u30b9\u3092\u4ed8\u4e0e\u3059\u308b\u3060\u3051\u3067\u3001\u751f\u6210\u3055\u308c\u308b\u3088\u3046\u306b\u3057\u305f\u3044\u3002 \uff08\u8907\u6570\u306e\u30bf\u30b0\u3092\u4f7f\u7528\u3059\u308b\u306e\u306f\u9762\u5012\uff09 \u30fb\u30ea\u30a2\u30eb\u306a\u30d6\u30c4\u3067\u306f\u306a\u304f\u3001\u30a2\u30cb\u30e1\u306a\u3069\u3067\u8868\u73fe\u3055\u308c\u308b\u3088\u3046\u306a\u3082\u2026<\/p>\n","protected":false},"author":3,"featured_media":1807,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[89,62],"tags":[],"class_list":["post-1759","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-it"],"_links":{"self":[{"href":"https:\/\/took.jp\/tech-blog\/wp-json\/wp\/v2\/posts\/1759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/took.jp\/tech-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/took.jp\/tech-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/took.jp\/tech-blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/took.jp\/tech-blog\/wp-json\/wp\/v2\/comments?post=1759"}],"version-history":[{"count":0,"href":"https:\/\/took.jp\/tech-blog\/wp-json\/wp\/v2\/posts\/1759\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/took.jp\/tech-blog\/wp-json\/wp\/v2\/media\/1807"}],"wp:attachment":[{"href":"https:\/\/took.jp\/tech-blog\/wp-json\/wp\/v2\/media?parent=1759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/took.jp\/tech-blog\/wp-json\/wp\/v2\/categories?post=1759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/took.jp\/tech-blog\/wp-json\/wp\/v2\/tags?post=1759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}