{"id":2025,"date":"2021-09-06T08:10:31","date_gmt":"2021-09-05T23:10:31","guid":{"rendered":"https:\/\/suzutukiblog.com\/?p=2025"},"modified":"2023-01-04T22:08:17","modified_gmt":"2023-01-04T13:08:17","slug":"javascript7","status":"publish","type":"post","link":"https:\/\/suzutukiblog.com\/index.php\/2021\/09\/06\/javascript7\/","title":{"rendered":"JavaScript7(\u30e2\u30d0\u30a4\u30eb\u30e1\u30cb\u30e5\u30fc)"},"content":{"rendered":"

1:\u30b9\u30de\u30db\u753b\u9762\u7528\u306e\u30e1\u30cb\u30e5\u30fc\u3092\u4f5c\u308b(mixin\u306f\u3044\u3064\u3082\u3069\u304a\u308a\u306a\u306e\u3067\u7701\u7565)<\/h3>\n

HTML\u306e\u8a18\u8ff0<\/h3>\n
\n
<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\" \/>\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" \/>\r\n  <title>Document<\/title>\r\n<link rel=\"stylesheet\" href=\"style.css\" \/>\r\n<\/head>\r\n<body>\r\n<!-- \u5168\u4f53\u3092\u56f2\u3080global-cotainer\u3092\u3055\u304f\u305b\u3044-->\r\n  <div id=\"global-container\">\r\n<!-- -->\r\n  <div id=\"container\">\r\n  <div class=\"mobile-menu__cover\"><\/div>\r\n<header class=\"header\">\r\n  <button class=\"mobile-menu__btn\">\r\n  <span><\/span>\r\n  <span><\/span>\r\n  <span><\/span>\r\n  <\/button>\r\n<\/header>\r\n  <\/div>\r\n<!-- __\uff12\u3064\u3042\u308b\u306e\u306fSCSS\u306b\u3066 -->\r\n  <nav class=\"mobile-menu\">\r\n    <ul class=\"mobile-menu__main\">\r\n      <li class=\"mobile-menu__item\">\r\n       <a class=\"mobile-menu__link\" href=\"#\">\r\n        <span class=\"main-title\">Our Service<\/span>\r\n        <span class=\"sub-title\">\u30b5\u30fc\u30d3\u30b9\u306b\u3064\u3044\u3066<\/span>\r\n       <\/a>\r\n      <\/li>\r\n     <li class=\"mobile-menu__item\">\r\n      <a class=\"mobile-menu__link\" href=\"#\">\r\n        <span class=\"main-title\">About us<\/span>\r\n        <span class=\"sub-title\">\u79c1\u9054\u306b\u3064\u3044\u3066<\/span>\r\n      <\/a>\r\n     <\/li>\r\n     <li class=\"mobile-menu__item\">\r\n      <a class=\"mobile-menu__link\" href=\"#\">\r\n       <span class=\"main-title\">Contact us<\/span>\r\n       <span class=\"sub-title\">\u30b3\u30f3\u30bf\u30af\u30c8\u65b9\u6cd5<\/span>\r\n      <\/a>\r\n     <\/li>\r\n    <\/ul>\r\n   <\/nav>\r\n<\/div>\r\n<script src=\"main.js\"><\/script>\r\n<\/body>\r\n<\/html><\/code><\/pre>\n<\/div>\n
main.js\u306e\u8a18\u8ff0<\/h3>\n
<\/p>\n
\n
class MobileMenu {\r\n\/\/ \u30b3\u30b9\u30c8\u30e9\u30af\u30bf\u95a2\u6570\u3092\u7528\u610f\u3059\u308b\r\n  constructor() {\r\n\/\/ \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30ea\u30c6\u30e9\u30eb\u3067\u521d\u671f\u5316\r\n  this.DOM = {};\r\n\/\/ DOM\u3092\u6b21\u3005\u3068\u5909\u6570\u306b\u683c\u7d0d\r\n  this.DOM.btn = document.querySelector('.mobile-menu__btn');\r\n  this.DOM.cover = document.querySelector('.mobile-menu__cover');\r\n\/\/ this.DOM.container\u3067\u306a\u3044\u3068\u30a8\u30e9\u30fc\u306b\u306a\u308b\u3088\r\n  this.DOM.container = document.querySelector('#global-container');\r\n\/\/ this.eventType = this._getEventType();\r\n  this.__addEvent();\r\n}\r\n\/\/ \u30d7\u30e9\u30a4\u30d9\u30fc\u30c8\u30e1\u30bd\u30c3\u30c9\u306b\u3059\u308b\u4fee\u6b63\u3084\u4fdd\u5b88\u306e\u3057\u3084\u3059\u3055\u306e\u305f\u3081\r\n  _getEventType() {\r\n    return wondow.ontouchstart ? \"touchstart\" : \"click\";\r\n}\r\n\r\n  _toggle() {\r\n\/\/ global-container\u306b\u30af\u30ea\u30c3\u30af\u3059\u308b\u305f\u3073\u306bmenu-open\u3092\u4ed8\u52a0\u3001\u89e3\u9664\r\n  this.DOM.container.classList.toggle(\"menu-open\");\r\n}\r\n  __addEvent() {\r\n\/\/ \u30b9\u30de\u30db\u3068\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u5bfe\u5fdc\u3059\u308b\u305f\u3081\r\n    this.DOM.btn.addEventListener(\"click\", this._toggle.bind(this));\r\n\/\/ \u30ab\u30d0\u30fc\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306b\u767a\u706b\r\n    this.DOM.cover.addEventListener(\"click\", this._toggle.bind(this));\r\n }\r\n}\r\n\r\nnew MobileMenu();<\/code><\/pre>\n<\/div>\n
SCSS\u306e\u8a18\u8ff0<\/h3>\n
\n
$cWhite: White;\r\n$cBlack: black;\r\n$cMenuClose: black;\r\n$cMenuOpen: black;\r\n$cSubTitle: #535353;\r\n\r\nbody {\r\n  margin: 0;\r\n}\r\n#container {\r\n  position: relative;\r\n  background-color: #614226;\r\n  height: 100vh;\r\n  z-index: 2;\r\n\/\/ \u52d5\u304d\u3092\u306a\u3081\u3089\u304b\u306b\u3059\u308b\r\n  transition: all 0.5s;\r\n  box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.8);\r\n}\r\n\/\/ \u30d8\u30c3\u30c0\u30fc\u306e\u5b9a\u7fa9\r\n.header {\r\n  background-color: $cWhite;\r\n  height: 100px;\r\n  display: flex;\r\n\/\/ \u53f3\u5bc4\u305b\u3068\u4e2d\u592e\u63c3\u3048\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n}\r\n\r\n.mobile-menu {\r\n  position: fixed;\r\n  right: 0;\r\n\/\/ \u4e0a\u304b\u308960px\r\n  top: 60px;\r\n  width: 300px;\r\n\/\/ BEM(Block Element Modifier)\r\n  &__btn {\r\n    background-color: unset;\r\n    border: none;\r\n    outline: none !important;\r\n    cursor: pointer;\r\n\r\n    & > span {\r\n     background-color: $cMenuClose;\r\n     width: 35px;\r\n     height: 2px;\r\n     display: block;\r\n     margin-bottom: 9px;\r\n     transition: transform 0.7s;\r\n\r\n    &:last-child {\r\n     margin-bottom: 0;\r\n  }\r\n }\r\n}\r\n    &__cover {\r\n\/\/ \u9ed2\u3044\u819c\u3092\u3064\u3051\u308b\r\n     position: absolute;\r\n     top: 0;\r\n     left: 0;\r\n     width: 100%;\r\n     height: 100%;\r\n     background-color: rgba(0, 0, 0, 0.3);\r\n     opacity: 0;\r\n     visibility: hidden;\r\n     transition: opacity 1s;\r\n     cursor: pointer;\r\n}\r\n   &__main {\r\n    padding: 0;\r\n\/\/ \uff13D\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u3057\u305f\u3044\u3068\u304d\u89aa\u306e\u8981\u7d20\u306b\u3064\u3051\u308b\r\n    perspective: 2000px;\r\n    transform-style: preserve-3d;\r\n}\r\n   &__item {\r\n\/\/ \u30fb\u3092\u3051\u3059\r\n     list-style: none;\r\n     display: block;\r\n     transform: translate3d(0, 0, -1000px);\r\n     padding: 0 40px;\r\n     transition: transform 0.3s, opacity 0.2s;\r\n     opacity: 0;\r\n}\r\n  &__link {\r\n\/\/ \u5de6\u53f3\u3044\u3063\u3071\u3044\u306b\u5e83\u304c\u308b\u3088\u3046\u306b\u3059\u308b\r\n    display: block;\r\n    margin-top: 30px;\r\n    color: $cBlack;\r\n\/\/ \u4e0b\u7dda\u3092\u524a\u9664\r\n    text-decoration: none;\r\n}\r\n}\r\n\r\n.menu-open {\r\n  & #container {\r\n\/\/ \u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306b\u5de6\u4e0b\u306b\u305a\u308c\u308b\r\n    transform: translate(-300px, 60px);\r\n    box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.8);\r\n}\r\n\/\/ \u30af\u30ea\u30c3\u30af\u3055\u308c\u305f\u3068\u304d\u306e\u8a18\u8ff0\u3092\u66f8\u304f\r\n  & .mobile-menu {\r\n  &__cover {\r\n    opacity: 1;\r\n    visibility: visible;\r\n}\r\n  &__item {\r\n    transform: none;\r\n    opacity: 1;\r\n@for $i from 1 through 5 {\r\n  &:nth-chils(#{$i}) {\r\n\/\/ \u8981\u7d20\u3092\u5c11\u3057\u305a\u3064\u9045\u5ef6\r\n    transition-delay: $i * 0.07s;\r\n}\r\n}\r\n}\r\n  &__btn {\r\n  & > span {\r\n    background-color: $cMenuOpen;\r\n\r\n  &:nth-child(1) {\r\n    transition-delay: 70ms;\r\n    transform: translateY(11px) rotate(135deg);\r\n}\r\n  &:nth-child(2) {\r\n    transition-delay: 0s;\r\n    transform: translateX(-18px) scaleX(0);\r\n}\r\n  &:nth-child(3) {\r\n    transition-delay: 140ms;\r\n    transform: translateY(-11px) rotate(-135deg);\r\n   }\r\n   }\r\n  }\r\n }\r\n}\r\n\r\n  .main-title {\r\n    font-weight: 600;\r\n    font-size: 25px;\r\n}\r\n  .sub-title {\r\n    display: block;\r\n    font-size: 14px;\r\n    color: $cSubTitle;\r\n}<\/code><\/pre>\n<\/div>\n
7.5\u306b\u7d9a\u304f<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
1:\u30b9\u30de\u30db\u753b\u9762\u7528\u306e\u30e1\u30cb\u30e5\u30fc\u3092\u4f5c\u308b(mixin\u306f\u3044\u3064\u3082\u3069\u304a\u308a\u306a\u306e\u3067\u7701\u7565) HTML\u306e\u8a18\u8ff0 <!DOCTYPE html> <html lang=”en”> <head> <meta […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[17,27],"tags":[],"class_list":["post-2025","post","type-post","status-publish","format-standard","hentry","category-javascript","category-programming-note"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/2025","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/comments?post=2025"}],"version-history":[{"count":18,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/2025\/revisions"}],"predecessor-version":[{"id":7229,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/2025\/revisions\/7229"}],"wp:attachment":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/media?parent=2025"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/categories?post=2025"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/tags?post=2025"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}