{"id":21144,"date":"2022-03-05T16:44:07","date_gmt":"2022-03-05T07:44:07","guid":{"rendered":"https:\/\/dubdesign.net\/?p=21144"},"modified":"2022-03-21T21:59:01","modified_gmt":"2022-03-21T12:59:01","slug":"stylewidth-drawer","status":"publish","type":"post","link":"https:\/\/dubdesign.net\/javascript\/stylewidth-drawer\/","title":{"rendered":"JavaScript\u306e.style.width\u3067\u5de6\u304b\u3089\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u306e\u30c9\u30ed\u30ef\u30fc\u30e1\u30cb\u30e5\u30fc"},"content":{"rendered":"\n<p>\u30d8\u30c3\u30c0\u30fc\u306a\u3069\u306e\u30e1\u30cb\u30e5\u30fc\u306b\u3088\u304f\u4f7f\u308f\u308c\u308b\u30c9\u30ed\u30ef\u30fc\u3002\u3053\u306eUI\u3082\u6570\u884c\u306eJavaScript\u306e\u30b3\u30fc\u30c9\u3067\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u753b\u9762\u3092\u8986\u3044\u96a0\u3059\u5f62\u306e\u30c9\u30ed\u30ef\u30fc\u306e\u4f5c\u308a\u65b9\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">\u76ee\u6b21<\/p><ul class=\"toc_list\"><li><a href=\"#stylewidth\">.style.width<\/a><\/li><li><a href=\"#i\">\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u958b\u304f\u30c9\u30ed\u30ef\u30fc\u306e\u30b5\u30f3\u30d7\u30eb<\/a><\/li><li><a href=\"#i-2\">\u30b5\u30f3\u30d7\u30eb\u306e\u30b3\u30fc\u30c9<\/a><ul><li><a href=\"#HTML\">HTML<\/a><\/li><li><a href=\"#JavaScript\">JavaScript<\/a><\/li><li><a href=\"#CSS\">CSS<\/a><\/li><\/ul><\/li><\/ul><\/div>\n<h2><span id=\"stylewidth\">.style.width<\/span><\/h2>\n\n\n\n<p>JavaScript\u306e <code>.style.width<\/code> \u306f\u3001\u8981\u7d20\u306e\u300c\u5e45\uff08width\uff09\u300d\u3092\u53d6\u5f97\u30fb\u64cd\u4f5c\u3057\u307e\u3059\u3002<\/p>\n\n\n<div class=\"windowin\">\n<div class=\"window\">\n<div class=\"window__head\">\n<div class=\"buttons__wrap\">\n<div class=\"buttons__item button_red\"><\/div>\n<div class=\"buttons__item button_yellow\"><\/div>\n<div class=\"buttons__item button_blue\"><\/div>\n<\/div>\n<\/div>\n<div class=\"window__body\">\n<pre><code>element.style.width = '250px'; <\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p><meta charset=\"utf-8\">\u300c\u5e45\uff08width\uff09\u300d\u306e\u6307\u5b9a\u306f\u3001px \u3084 \uff05 \u306a\u3069\u3001CSS\u3067\u4f7f\u3063\u3066\u3044\u308b\u5358\u4f4d\u3067\u6307\u5b9a\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n<h2><span id=\"i\">\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u958b\u304f\u30c9\u30ed\u30ef\u30fc\u306e\u30b5\u30f3\u30d7\u30eb<\/span><\/h2>\n\n\n\n<p>\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u3001\u5de6\u5074\u304b\u3089\u753b\u9762\u3092\u8986\u3044\u5c3d\u304f\u3059\u300c\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u300d\u306e\u30c9\u30ed\u30ef\u30fc\u30e1\u30cb\u30e5\u30fc\u304c\u958b\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div id=\"drawerNavi\" class=\"overlay\">\n  <div id=\"drawerClose\"><span class=\"lineClose\"><\/span><\/div>\n  <ul class=\"overlay-content\">\n    <li><a href=\"#\">MENU1<\/a><\/li>\n    <li><a href=\"#\">MENU2<\/a><\/li>\n    <li><a href=\"#\">MENU3<\/a><\/li>\n    <li><a href=\"#\">MENU4<\/a><\/li>\n    <li><a href=\"#\">MENU5<\/a><\/li>\n  <\/ul>\n<\/div>\n\n<div class=\"javaSample\">\n<button id=\"drawerOpen\">\u30c9\u30ed\u30ef\u30fc\u3092\u958b\u304f<\/button>\n<\/div>\n\n\n\n<script>\ndocument.getElementById('drawerOpen').addEventListener('click', () => {\n  document.getElementById(\"drawerNavi\").style.width = \"100%\";\n});\n\ndocument.getElementById('drawerClose').addEventListener('click', () => {\n  document.getElementById(\"drawerNavi\").style.width = \"0%\";\n});\n<\/script>\n\n\n\n<p>\u958b\u3044\u305f\u30c9\u30ed\u30ef\u30e1\u30cb\u30e5\u30fc\u306f\u3001\u53f3\u4e0a\u306e\u300cX\u300d\u30dc\u30bf\u30f3\u3067\u9589\u3058\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2><span id=\"i-2\">\u30b5\u30f3\u30d7\u30eb\u306e\u30b3\u30fc\u30c9<\/span><\/h2>\n\n\n\n<p>\u30b5\u30f3\u30d7\u30eb\u306e\u30b3\u30fc\u30c9\u306f\u3001HTML\u30fbJavaScript\u30fbCSS\u306e3\u7a2e\u3067\u3059\u3002\u9806\u306b\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h3><span id=\"HTML\">HTML<\/span><\/h3>\n\n\n\n<p>HTML\u306f\u4e3b\u306b2\u7a2e\u985e\u3067\u3001\u300cdrawerNavi\u300d\u306eid\u540d\u304c\u3064\u3044\u305f\u8981\u7d20\u304c\u30c9\u30ed\u30ef\u30fc\u3067\u958b\u304f\u30e1\u30cb\u30e5\u30fc\u3002\u305d\u3057\u3066\u3001\u300cdrawerOpen\u300d\u306eid\u540d\u304c\u3064\u3044\u305f <code>button<\/code> \u30bf\u30b0\u304c\u30c9\u30ed\u30ef\u30fc\u3092\u958b\u304f\u30c8\u30ea\u30ac\u30fc\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n<div class=\"windowin\">\n<div class=\"window\">\n<div class=\"window__head\">\n<div class=\"buttons__wrap\">\n<div class=\"buttons__item button_red\"><\/div>\n<div class=\"buttons__item button_yellow\"><\/div>\n<div class=\"buttons__item button_blue\"><\/div>\n<\/div>\n<\/div>\n<div class=\"window__body\">\n<pre><code>&lt;div id=\"drawerNavi\" class=\"overlay\"&gt;\n  &lt;div id=\"drawerClose\"&gt;&lt;span class=\"lineClose\"&gt;&lt;\/span&gt;&lt;\/div&gt;\n  &lt;ul class=\"overlay-content\"&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;MENU1&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;MENU2&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;MENU3&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;MENU4&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;MENU5&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/div&gt;\n\n&lt;!-- drawer --&gt;\n&lt;button id=\"drawerOpen\"&gt;\u30c9\u30ed\u30ef\u30fc\u3092\u958b\u304f&lt;\/button&gt;\n&lt;!-- drawer --&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p><meta charset=\"utf-8\">\u300cdrawerNavi\u300d\u306eid\u540d\u304c\u3064\u3044\u305f\u8981\u7d20\u306e\u4e2d\u306b\u3042\u308b\u300cdrawerClose\u300d\u306eid\u540d\u306e\u8981\u7d20\u304c\u3001\u30e1\u30cb\u30e5\u30fc\u3092\u9589\u3058\u308b\u30c8\u30ea\u30ac\u30fc\u306b\u306a\u308a\u3001\u305d\u306e\u4e2d\u306e\u8981\u7d20\u304c\u9589\u3058\u308b\u30dc\u30bf\u30f3\u306eUI\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-sgb-say sgb-block-say sgb-block-say--left\"><div class=\"sgb-block-say-avatar\"><img src=\"https:\/\/dubdesign.net\/wp-content\/uploads\/2020\/04\/face2.svg\" alt=\"\u304b\u304b\u304b\u305a\" style=\"border-color:#eaedf2\"\/><div class=\"sgb-block-say-avatar__name\">\u304b\u304b\u304b\u305a<\/div><\/div><div class=\"sgb-block-say-text\"><div class=\"sgb-block-say-text__content\" style=\"color:#333;border-color:#d5d5d5;background-color:#FFF\">\n<p>\u30b5\u30f3\u30d7\u30eb\u306e\u9589\u3058\u308b\u30dc\u30bf\u30f3\u306f\u3001CSS\u3067\u300cX\u300d\u3092\u4f5c\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<span class=\"sgb-block-say-text__before\" style=\"border-right-color:#d5d5d5\"><\/span><span class=\"sgb-block-say-text__after\" style=\"border-right-color:#FFF\"><\/span><\/div><\/div><\/div>\n\n\n\n<h3><span id=\"JavaScript\">JavaScript<\/span><\/h3>\n\n\n\n<p>JavaScript\u306e\u30b3\u30fc\u30c9\u306f\u7c21\u5358\u306a2\u7a2e\u985e\u3067\u3001\u30c9\u30ed\u30ef\u30fc\u3092\u958b\u304f\u30fb\u9589\u3058\u308b\u306e2\u3064\u306e\u52d5\u4f5c\u3092 <code>.addEventListener<\/code> \u306e\u30af\u30ea\u30c3\u30af\u3067\u4f5c\u308a\u307e\u3059\u3002<\/p>\n\n\n<div class=\"windowin\">\n<div class=\"window\">\n<div class=\"window__head\">\n<div class=\"buttons__wrap\">\n<div class=\"buttons__item button_red\"><\/div>\n<div class=\"buttons__item button_yellow\"><\/div>\n<div class=\"buttons__item button_blue\"><\/div>\n<\/div>\n<\/div>\n<div class=\"window__body\">\n<pre><code>document.getElementById('drawerOpen').addEventListener('click', () =&gt; {\n  document.getElementById(\"drawerNavi\").style.width = \"100%\";\n});\n\ndocument.getElementById('drawerClose').addEventListener('click', () =&gt; {\n  document.getElementById(\"drawerNavi\").style.width = \"0%\";\n});<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>\u30c9\u30ed\u30ef\u30fc\u3092\u958b\u3044\u305f\u969b\u306b\u306f\u3001<code>width<\/code> \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u300c100\uff05\u300d\u306b\u3057\u3066\u3001\u9589\u3058\u305f\u969b\u306b\u306f\u300c0\uff05\u300d\u306b\u3057\u3066\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u3055\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<h3><span id=\"CSS\">CSS<\/span><\/h3>\n\n\n\n<p>CSS\u306f\u3001\u300c\u30aa\u30fc\u30d0\u30fc\u30ec\u30a4\u300d\u306e\u8981\u7d20\u3068\u3001\u300c\u4e2d\u306e\u30e1\u30cb\u30e5\u30fc\u300d\u300c\u9589\u3058\u308b\u30dc\u30bf\u30f3\u300d\u306e3\u7a2e\u3067\u3067\u3059\u3002<\/p>\n\n\n<div class=\"windowin\">\n<div class=\"window\">\n<div class=\"window__head\">\n<div class=\"buttons__wrap\">\n<div class=\"buttons__item button_red\"><\/div>\n<div class=\"buttons__item button_yellow\"><\/div>\n<div class=\"buttons__item button_blue\"><\/div>\n<\/div>\n<\/div>\n<div class=\"window__body\">\n<pre><code>.overlay {\n  height: 100%;\n  width: 0;\n  position: fixed;\n  z-index: 99;\n  left: 0;\n  top: 0;\n  background-color: rgb(0,0,0);\n  background-color: rgba(0,0,0, 0.9);\n  overflow-x: hidden;\n  transition: 0.5s;\n}\n\n#drawerNavi ul.overlay-content {\n    padding: 0;\n    list-style: none;\n    border: none;\n    position: absolute;\n    width: 100%;\n    text-align: center;\n    top: 50%;\n    transform: translateY(-50%);\n}\nul.overlay-content li {\n    padding: 0;\n}\n.overlay-content li a {\n    padding: 8px;\n    text-decoration: none;\n    font-size: 1.9rem;\n    color: #707070;\n    display: block;\n    transition: 0.3s;\n}\n\n.overlay-content li a:hover, .overlay-content li a:focus {\n  color: #f1f1f1;\n}\n\n\/* close *\/\n#drawerClose {\n  position: absolute;\n  top: 20px;\n  right: 45px;\n  font-size: 60px;\n  cursor: pointer;\n}\n#drawerClose:hover {\n    opacity: 0.8;\n}\n\n.lineClose {\n    display: inline-block;\n    vertical-align: middle;\n    color: #FFF;\n    line-height: 1;\n    width: 2.5rem;\n    height: 0.2rem;\n    background: currentColor;\n    border-radius: 0.1rem;\n    position: relative;\n    transform: rotate(45deg);\n}\n.lineClose::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: inherit;\n  border-radius: inherit;\n  transform: rotate(90deg);\n}\n\n@media screen and (max-width: 767px) {\n  .overlay-content li a {\n    font-size: 1.7rem;\n}\n  #drawerClose {\n    font-size: 40px;\n    top: 15px;\n    right: 35px;\n  }\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-sgb-say sgb-block-say sgb-block-say--left\"><div class=\"sgb-block-say-avatar\"><img src=\"https:\/\/dubdesign.net\/wp-content\/uploads\/2020\/04\/face2.svg\" alt=\"\u304b\u304b\u304b\u305a\" style=\"border-color:#eaedf2\"\/><div class=\"sgb-block-say-avatar__name\">\u304b\u304b\u304b\u305a<\/div><\/div><div class=\"sgb-block-say-text\"><div class=\"sgb-block-say-text__content\" style=\"color:#333;border-color:#d5d5d5;background-color:#FFF\">\n<p>767px\u306e\u30d6\u30ec\u30a4\u30af\u30dd\u30a4\u30f3\u30c8\u3067\u3001\u30b9\u30de\u30db\u306e\u5834\u5408\u4e2d\u306e\u30e1\u30cb\u30e5\u30fc\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u306a\u3069\u304c\u5207\u308a\u66ff\u308f\u308a\u307e\u3059\u3002<\/p>\n<span class=\"sgb-block-say-text__before\" style=\"border-right-color:#d5d5d5\"><\/span><span class=\"sgb-block-say-text__after\" style=\"border-right-color:#FFF\"><\/span><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u30d8\u30c3\u30c0\u30fc\u306a\u3069\u306e\u30e1\u30cb\u30e5\u30fc\u306b\u3088\u304f\u4f7f\u308f\u308c\u308b\u30c9\u30ed\u30ef\u30fc\u3002\u3053\u306eUI\u3082\u6570\u884c\u306eJavaScript\u306e\u30b3\u30fc\u30c9\u3067\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002 \u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u30dc\u30bf\u30f3\u30af\u30ea\u30c3\u30af\u3067\u753b\u9762\u3092\u8986\u3044\u96a0\u3059\u5f62\u306e\u30c9\u30ed\u30ef\u30fc\u306e\u4f5c\u308a\u65b9\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002 \u76ee\u6b21.style.widt &#8230; <\/p>\n","protected":false},"author":1,"featured_media":22066,"comment_status":"closed","ping_status":"open","sticky":false,"template":"single-javascript.php","format":"standard","meta":[],"categories":[131],"tags":[65,48,144],"acf":[],"_links":{"self":[{"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/posts\/21144"}],"collection":[{"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/comments?post=21144"}],"version-history":[{"count":63,"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/posts\/21144\/revisions"}],"predecessor-version":[{"id":22069,"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/posts\/21144\/revisions\/22069"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/media\/22066"}],"wp:attachment":[{"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/media?parent=21144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/categories?post=21144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dubdesign.net\/wp-json\/wp\/v2\/tags?post=21144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}