{"id":169,"date":"2017-09-12T11:23:12","date_gmt":"2017-09-12T02:23:12","guid":{"rendered":"http:\/\/genicca.wp.xdomain.jp\/?p=169"},"modified":"2025-02-13T11:59:43","modified_gmt":"2025-02-13T02:59:43","slug":"html%e3%81%a8css%e3%81%a0%e3%81%91%e3%81%a7%e3%82%bf%e3%83%96%e3%81%8c%e5%ae%9f%e8%a3%85%ef%bc%81%ef%bc%9f%ef%bc%9f%ef%bc%81","status":"publish","type":"post","link":"https:\/\/genicca.cloudfree.jp\/?p=169","title":{"rendered":"HTML\u3068CSS\u3060\u3051\u3067\u30bf\u30d6\u304c\u5b9f\u88c5\uff01\uff1f\uff1f\uff01"},"content":{"rendered":"

\u3067\u304d\u308b\u3093\u3060\u306a\u30a1\u3053\u308c\u304c\u2026<\/p>\n

HTML\u306f\u3053\u308c<\/p>\n

\n
<div class=\"tab-content\">\r\n<input type=\"radio\" id=\"tab1\" name=\"tab\" checked><label for=\"tab1\">\u30bf\u30d61<\/label><input type=\"radio\" id=\"tab2\" name=\"tab\"><label for=\"tab2\">\u30bf\u30d62<\/label><input type=\"radio\" id=\"tab3\" name=\"tab\"><label for=\"tab3\">\u30bf\u30d63<\/label>\r\n<div class=\"tab-box\">\r\n<div id=\"tabView1\">\u30b3\u30f3\u30c6\u30f3\u30c41\u306e\u5185\u5bb9\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u30b3\u30f3\u30c6\u30f3\u30c41\u306e\u5185\u5bb9\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/div>\r\n<div id=\"tabView2\">\u30b3\u30f3\u30c6\u30f3\u30c42\u306e\u5185\u5bb9\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u30b3\u30f3\u30c6\u30f3\u30c42\u306e\u5185\u5bb9\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/div>\r\n<div id=\"tabView3\">\u30b3\u30f3\u30c6\u30f3\u30c43\u306e\u5185\u5bb9\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u30b3\u30f3\u30c6\u30f3\u30c43\u306e\u5185\u5bb9\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/div>\r\n<\/div>\r\n<\/div><\/code><\/pre>\n<\/div>\n
CSS\u306f\u3053\u308c<\/p>\n
\n
.tab-content input[type=\"radio\"] {\r\ndisplay: none;\r\n}\r\n\r\n.tab-content label {\r\ndisplay: inline-block;\r\npadding: 5px 10px;\r\nfont-weight: bold;\r\nfont-size: 13px;\r\ncolor: #009900;\r\nbackground-color: #e1fae1;\r\ncursor: pointer;\r\nbox-shadow: inset -1px 1px 2px rgba(0, 0, 0, 0.3);\r\nborder-radius: 5px 5px 0 0;\r\nbox-sizing: border-box;\r\n}\r\n.tab-content label:hover,\r\n.tab-content input[type=\"radio\"]:checked + label {\r\ncolor: #FFF;\r\nbackground-color: #009900;\r\n}\r\n\r\n.tab-content .tab-box {\r\nwidth: 250px;\r\nheight: 100px;\r\npadding: 10px;\r\nborder: 2px solid #009900;\r\nborder-radius: 0 5px 5px 5px;\r\nbox-sizing: border-box;\r\n}\r\n\r\n.tab-content > .tab-box > div {\r\ndisplay: none;\r\n}\r\n\r\n#tab1:checked ~ .tab-box > #tabView1 {\r\ndisplay: block;\r\n}\r\n\r\n#tab2:checked ~ .tab-box > #tabView2 {\r\ndisplay: block;\r\n}\r\n\r\n#tab3:checked ~ .tab-box > #tabView3 {\r\ndisplay: block;\r\n}<\/code><\/pre>\n<\/div>\n
\u7d20\u6674\u3089\u3057\u3044<\/p>\n","protected":false},"excerpt":{"rendered":"
\u3067\u304d\u308b\u3093\u3060\u306a\u30a1\u3053\u308c\u304c\u2026 HTML\u306f\u3053\u308c <div class=”tab-content”> <input type=”radio” id=”tab1″ name=”tab” checked>&lt […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-169","post","type-post","status-publish","format-standard","hentry","category-html_css"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/posts\/169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=169"}],"version-history":[{"count":4,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/posts\/169\/revisions"}],"predecessor-version":[{"id":600,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=\/wp\/v2\/posts\/169\/revisions\/600"}],"wp:attachment":[{"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/genicca.cloudfree.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}