{"id":52,"date":"2022-12-19T17:11:51","date_gmt":"2022-12-19T08:11:51","guid":{"rendered":"http:\/\/phantom-cgray03.xyz\/?p=52"},"modified":"2022-12-19T18:47:02","modified_gmt":"2022-12-19T09:47:02","slug":"52","status":"publish","type":"post","link":"https:\/\/phantom-cgray03.xyz\/?p=52","title":{"rendered":"\u30c7\u30b6\u30a4\u30f3\u304c\u5168\u3066\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u306e\u30a2\u30f3\u30b1\u30fc\u30c8"},"content":{"rendered":"<div class=\"radiocheck__area\">\n<div class=\"checkItem__box\">\n<div class=\"qNum__box\">\n<p class=\"qNum\">Q1<\/p>\n<\/p><\/div>\n<div class=\"head__box\">\n<p class=\"head\">\u8cea\u554f<sup>\u203b<\/sup>\u304c\u5165\u308a\u307e\u3059\u3002\u8cea\u554f\u304c\u5165\u308a\u307e\u3059\u3002<\/p>\n<\/p><\/div>\n<div class=\"check__box\">\n            <input type=\"radio\" name=\"q1\" id=\"q1-1\"><label for=\"q1-1\">\u56de\u7b541-1<\/label><input type=\"radio\" name=\"q1\" id=\"q1-2\"><label for=\"q1-2\">\u56de\u7b541-2<\/label>\n        <\/div>\n<p class=\"attention\">\u203b\u6ce8\u610f\u66f8\u304d\u304c\u5165\u308a\u307e\u3059<\/p>\n<\/div>\n<div class=\"checkItem__box\">\n<div class=\"qNum__box\">\n<p class=\"qNum\">Q2<\/p>\n<\/div>\n<div class=\"head__box\">\n<p class=\"head\">\u8cea\u554f\u304c\u5165\u308a\u307e\u3059\u3002\uff08\u8907\u6570\u9078\u629e\u53ef\uff09<\/p>\n<\/div>\n<div class=\"check__box\">\n<input type=\"checkbox\" name=\"q2\" id=\"q2-1\"><label for=\"q2-1\">\u56de\u7b542-1<\/label><br \/>\n<input type=\"checkbox\" name=\"q2\" id=\"q2-2\"><label for=\"q2-2\">\u56de\u7b542-2<\/label>\n        <\/div>\n<\/p><\/div>\n<div class=\"resultItem__box\">\n        <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" height=\"380\" width=\"570\" draggable=\"false\">\n    <\/div>\n<div class=\"fingerBtn__area\">\n        <a href=\"ooooo\" class=\"btn\" draggable=\"false\"><span class=\"_small\">\u30c6\u30ad\u30b9\u30c8\u304c<\/span><br \/>\n\u5165\u308a\u307e\u3059<br \/>\n            <span class=\"fingerImg\"><br \/>\n                <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d24894ewhzyuok.cloudfront.net\/uploads\/article_photo\/photo\/1150211\/33b233d6-e386-4a1a-a710-c36f66893446.png\" alt=\"\u6307\" draggable=\"false\" height=\"46\" width=\"50\"><br \/>\n            <\/span><\/a>\n    <\/div>\n<\/div>\n<p>\u4e0b\u8a18Beyond\u30b3\u30fc\u30c9<\/p>\n<p>JS head<\/p>\n<p>\u306a\u3057<\/p>\n<p>HTML<\/p>\n<pre><code>&lt;div class=&quot;radiocheck__area&quot;&gt;\r\n&lt;div class=&quot;checkItem__box&quot;&gt;\r\n&lt;div class=&quot;qNum__box&quot;&gt;\r\n&lt;p class=&quot;qNum&quot;&gt;Q1&lt;\/p&gt;\r\n        &lt;\/div&gt;\r\n&lt;div class=&quot;head__box&quot;&gt;\r\n&lt;p class=&quot;head&quot;&gt;\u8cea\u554f&lt;sup&gt;\u203b&lt;\/sup&gt;\u304c\u5165\u308a\u307e\u3059\u3002\u8cea\u554f\u304c\u5165\u308a\u307e\u3059\u3002&lt;\/p&gt;\r\n        &lt;\/div&gt;\r\n\r\n        \r\n&lt;div class=&quot;check__box&quot;&gt;\r\n            &lt;input type=&quot;radio&quot; name=&quot;q1&quot; id=&quot;q1-1&quot;&gt;&lt;label for=&quot;q1-1&quot;&gt;\u56de\u7b541-1&lt;\/label&gt;&lt;input type=&quot;radio&quot; name=&quot;q1&quot; id=&quot;q1-2&quot;&gt;&lt;label for=&quot;q1-2&quot;&gt;\u56de\u7b541-2&lt;\/label&gt;\r\n        &lt;\/div&gt;        \r\n&lt;p class=&quot;attention&quot;&gt;\u203b\u6ce8\u610f\u66f8\u304d\u304c\u5165\u308a\u307e\u3059&lt;\/p&gt;&lt;\/div&gt;\r\n\r\n&lt;div class=&quot;checkItem__box&quot;&gt;\r\n&lt;div class=&quot;qNum__box&quot;&gt;\r\n&lt;p class=&quot;qNum&quot;&gt;Q2&lt;\/p&gt;&lt;\/div&gt;\r\n&lt;div class=&quot;head__box&quot;&gt;&lt;p class=&quot;head&quot;&gt;\u8cea\u554f\u304c\u5165\u308a\u307e\u3059\u3002\uff08\u8907\u6570\u9078\u629e\u53ef\uff09&lt;\/p&gt;&lt;\/div&gt;\r\n&lt;div class=&quot;check__box&quot;&gt;\r\n&lt;input type=&quot;checkbox&quot; name=&quot;q2&quot; id=&quot;q2-1&quot;&gt;&lt;label for=&quot;q2-1&quot;&gt;\u56de\u7b542-1&lt;\/label&gt;\r\n&lt;input type=&quot;checkbox&quot; name=&quot;q2&quot; id=&quot;q2-2&quot;&gt;&lt;label for=&quot;q2-2&quot;&gt;\u56de\u7b542-2&lt;\/label&gt;\r\n        &lt;\/div&gt;\r\n\r\n    &lt;\/div&gt;\r\n\r\n\r\n    \r\n&lt;div class=&quot;resultItem__box&quot;&gt;\r\n        &lt;img src=&quot;https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png&quot; alt=&quot;&quot; height=&quot;380&quot; width=&quot;570&quot; draggable=&quot;false&quot;&gt;\r\n    &lt;\/div&gt;\r\n\r\n\r\n    \r\n&lt;div class=&quot;fingerBtn__area&quot;&gt;\r\n        &lt;a href=&quot;ooooo&quot; class=&quot;btn&quot; draggable=&quot;false&quot;&gt;&lt;span class=&quot;_small&quot;&gt;\u30c6\u30ad\u30b9\u30c8\u304c&lt;\/span&gt;&lt;br&gt;\r\n\u5165\u308a\u307e\u3059\r\n            &lt;span class=&quot;fingerImg&quot;&gt;\r\n                &lt;img src=&quot;https:\/\/d24894ewhzyuok.cloudfront.net\/uploads\/article_photo\/photo\/1150211\/33b233d6-e386-4a1a-a710-c36f66893446.png&quot; alt=&quot;\u6307&quot; draggable=&quot;false&quot; height=&quot;46&quot; width=&quot;50&quot;&gt;\r\n            &lt;\/span&gt;&lt;\/a&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<p>CSS<\/p>\n<pre><code> .radiocheck__area {\r\n  width: 100%;\r\n  height: auto;\r\n}\r\n\r\n .checkItem__box {\r\n  width: 100%;\r\n  padding: 20px 0;\r\n}\r\n\r\n .checkItem__box+.checkItem__box {\r\n  border-top: 1px solid #D45D87;\r\n}\r\n\r\n .qNum {\r\n  color: #fff;\r\n  font-size: 36px;\r\n  font-weight: bold;\r\n  text-align: center;\r\n  width: 150px;\r\n  height: auto;\r\n  padding: 5px 0;\r\n  margin: 0;\r\n  border-radius: 5px;\r\n  background: #D45D87;\r\n  position: relative;\r\n}\r\n\r\n .qNum:after {\r\n  content: &#039;&#039;;\r\n  width: 0;\r\n  height: 0;\r\n  border-style: solid;\r\n  border-width: 10px 10px 0 10px;\r\n  border-color: #d45d87 transparent transparent transparent;\r\n  position: absolute;\r\n  bottom: -13px;\r\n  left: 45%;\r\n  transform: translateY(-45%);\r\n}\r\n\r\n .head__box .head {\r\n  font-size: 24px;\r\n  font-weight: bold;\r\n  color: #333;\r\n  margin-bottom: 0;\r\n}\r\n\r\n@media screen and (max-width:600px) {\r\n   .head__box .head {\r\n    font-size: 20px;\r\n  }\r\n}\r\n\r\n .head__box .head sup {\r\n  font-size: 16px;\r\n}\r\n\r\n .check__box {\r\n  margin-top: 20px;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n .check__box input {\r\n  display: none;\r\n}\r\n\r\n .check__box label {\r\n  position: relative;\r\n  font-size: 16px;\r\n  color: #333;\r\n  margin-top: 10px;\r\n  padding-left: 25px;\r\n}\r\n\r\n .check__box input[type=&quot;radio&quot;]+label:before,\r\n .check__box input[type=&quot;checkbox&quot;]+label:before {\r\n  content: &#039;&#039;;\r\n  width: 16px;\r\n  height: 16px;\r\n  border: 1px solid #ccc;\r\n  background: #eee;\r\n  border-radius: 8px;\r\n  position: absolute;\r\n  top: 3px;\r\n  left: 0;\r\n}\r\n\r\n .check__box input[type=&quot;radio&quot;]:checked+label:after,\r\n .check__box input[type=&quot;checkbox&quot;]:checked+label:after {\r\n  content: &#039;&#039;;\r\n  width: 12px;\r\n  height: 12px;\r\n  background: #d45d87;\r\n  border-radius: 6px;\r\n  position: absolute;\r\n  top: 6px;\r\n  left: 3px;\r\n}\r\n\r\n .attention {\r\n  margin: 30px 0 0;\r\n  font-size: 12px;\r\n  color: #666;\r\n}\r\n\r\n .attention+.attention {\r\n  margin-top: 5px;\r\n}\r\n\r\n .resultItem__box {\r\n  margin-top: 30px;\r\n}\r\n\r\n .resultItem__box img {\r\n  width: 100%;\r\n  height: auto;\r\n}\r\n\r\n .fingerBtn__area {\r\n  width: 100%;\r\n  height: auto;\r\n  margin-top: 30px;\r\n}\r\n\r\n .btn {\r\n  width: 80%;\r\n  max-width: 500px;\r\n  height: auto;\r\n  margin: 0 auto;\r\n  padding: 8px 0;\r\n  background: #d45d87;\r\n  color: #fff;\r\n  text-align: center;\r\n  font-size: 24px;\r\n  font-weight: bold;\r\n  text-decoration: none;\r\n  display: block;\r\n  position: relative;\r\n  border-radius: 5px;\r\n  box-shadow: 0 3px 1px #BF1E56;\r\n  line-height: 1.3;\r\n  transition: opacity 0.2s;\r\n  opacity: 1;\r\n}\r\n\r\n .btn:hover {\r\n  opacity: 0.8;\r\n}\r\n\r\n .btn .fingerImg {\r\n  position: absolute;\r\n  bottom: -30px;\r\n  right: -5px;\r\n  width: 50px;\r\n  height: auto;\r\n}\r\n\r\n .fingerImg img {\r\n  width: 100%;\r\n  height: auto;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Q1 \u8cea\u554f\u203b\u304c\u5165\u308a\u307e\u3059\u3002\u8cea\u554f\u304c\u5165\u308a\u307e\u3059\u3002 \u56de\u7b541-1\u56de\u7b541-2 \u203b\u6ce8\u610f\u66f8\u304d\u304c\u5165\u308a\u307e\u3059 Q2 \u8cea\u554f\u304c\u5165\u308a\u307e\u3059\u3002\uff08\u8907\u6570\u9078\u629e\u53ef\uff09 \u56de\u7b542-1 \u56de\u7b542-2 \u30c6\u30ad\u30b9\u30c8\u304c \u5165\u308a\u307e\u3059 \u4e0b\u8a18Beyond\u30b3\u30fc\u30c9 JS head \u306a\u3057 HT<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[4,3],"class_list":["post-52","post","type-post","status-publish","format-standard","hentry","category-6","tag-simplicity02","tag-3"],"_links":{"self":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/52","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=52"}],"version-history":[{"count":7,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/52\/revisions"}],"predecessor-version":[{"id":59,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/52\/revisions\/59"}],"wp:attachment":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=52"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=52"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=52"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}