{"id":4305,"date":"2021-09-13T05:55:13","date_gmt":"2021-09-12T20:55:13","guid":{"rendered":"https:\/\/suzutukiblog.com\/?p=4305"},"modified":"2023-01-04T22:15:43","modified_gmt":"2023-01-04T13:15:43","slug":"javascript11-5","status":"publish","type":"post","link":"https:\/\/suzutukiblog.com\/index.php\/2021\/09\/13\/javascript11-5\/","title":{"rendered":"Javascript11.5(\u30d5\u30c3\u30bf\u30fc)"},"content":{"rendered":"

3:\u6b8b\u308a\u306e\u753b\u9762\u306e\u5b9f\u88c5<\/h3>\n

\u30a4\u30e1\u30fc\u30b8<\/h2>\n

\"\"<\/p>\n

index.html\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0\u30d2\u30fc\u30ed\u30fc\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u76f4\u4e0b<\/h3>\n
\n
<main>\r\n  <section class=\"world\">\r\n    <div class=\"world__inner\">\r\n      <div class=\"world__img cover-slide\">\r\n    <img class=\"img-zoom\" src=\"images\/Birthday.jpg\" alt=\"\"\/>\r\n    <\/div>\r\n     <div class=\"world__texts appear left\">\r\n      <div class=\"world__texts-inner\">\r\n       <div class=\"world__title main-title item\">\r\n      <span class=\"purple\">Floroj <\/span>\r\n     <span>de la mondo<\/span>\r\n   <\/div>\r\n   <div class=\"world__sub sub-title item\">\u4e16\u754c\u306e\u304a\u82b1\u3092\u3042\u306a\u305f\u306b<\/div>\r\n    <div class=\"world__description item\">\r\n     <p>\u4e16\u754c\uff11\uff15\uff10\u30f6\u56fd\u306e\u82b1\u3092<br \/>\u3042\u306a\u305f\u306b\u304a\u5c4a\u3051\u3057\u307e\u3059\u3002<\/p>\r\n     <p>\u3042\u306a\u305f\u306e\u671b\u3080\u82b1\u304c\u304d\u3063\u3068\u898b\u3064\u304b\u308a\u307e\u3059\u3002<\/p>\r\n     <\/div>\r\n    <div class=\"world__btn item\">\r\n     <button class=\"btn filled\">\u3082\u3063\u3068\u8a73\u3057\u304f<\/button>\r\n    <\/div>\r\n   <\/div>\r\n  <\/div>\r\n <\/div>\r\n<\/section><\/code><\/pre>\n<\/div>\n
_600up.scss\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0<\/h3>\n
<\/p>\n
\n
.world {\r\n  &__inner {\r\n    padding: 50px;\r\n}\r\n  &__texts,\r\n  &__img {\r\n    flex-basis: 47%;\r\n}\r\n\r\n  &__texts {\r\n    display: flex;\r\n\/\/ \u6587\u5b57\u3092\u4e0b\u63c3\u3048\u306b\u3059\u308b\u3068\u304d\u306b\u4fbf\u5229\u306a\u8a2d\u5b9a\r\n    align-items: flex-end;\r\n}\r\n}<\/code><\/pre>\n<\/div>\n
_960up.scss\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0<\/h3>\n
\n
.world {\r\n  &__img {\r\n    height: 400px;\r\n}\r\n\r\n  &__description {\r\n    margin-bottom: 40px;\r\n}\r\n  &__title {\r\n\/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\r\n  &::before {\r\n\/\/960px\u3088\u308a\u4e0a\u306f\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3092\u8868\u793a\u3059\u308b\r\n    display: block;\r\n  }\r\n }\r\n}<\/code><\/pre>\n<\/div>\n
_1280up.scss\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0<\/h3>\n
\n
\/\/ Stylesheet: 1280px\u4ee5\u4e0a\u306e\u30e2\u30cb\u30bf\u3067\u9069\u7528\r\n\r\n  .world {\r\n  &__inner {\r\n    padding: 50px 150px;\r\n }\r\n}<\/code><\/pre>\n<\/div>\n
_base.scss\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0<\/h3>\n
\n
.world {\r\n  @extend .content-width;\r\n  @extend .mb-lg;\r\n\/\/ \u89aa\u8981\u7d20\u3067\u30ed\u30fc\u30ab\u30eb\u30b9\u30bf\u30c3\u30ad\u30f3\u30b0\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3092\u4f5c\u308b\u305f\u3081\u306b\u5fc5\u8981\r\n  &__inner {\r\n    @extend .flex;\r\n    justify-content: space-between;\r\n    padding: 15px;\r\n    background-color: $cBgGray;\r\n\/\/ \u4e0b\u306e\uff12\u3064\u306f\u30ed\u30fc\u30ab\u30eb\u30b9\u30bf\u30c3\u30ad\u30f3\u30b0\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3092\u4f5c\u308b\u8a2d\u5b9a\r\n    position: relative;\r\n    z-index: 0;\r\n}\r\n\r\n  &__title {\r\n\/\/ \u6a2a\u7dda\u306e\u4f4d\u7f6e\u6c7a\u3081\r\n    position: relative;\r\n\/\/ \u7591\u4f3c\u8981\u7d20\u3067\u51fa\u529b\u3059\u308b\r\n@include p-base(\r\n$display: none,\r\n$width: 100px,\r\n$height: 1px,\r\n$top: 50%,\r\n$left: -120px\r\n) {\r\n\/\/ \u68d2\u7dda\u304c\u4f38\u3073\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\r\n  background-color: $cBlack;\r\n  transform: translateY(-50%) scaleX(0);\r\n\/\/ \u53f3\u5074\u3092\u4e2d\u5fc3\u306b\u4f38\u3073\u308b\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\r\n  transition: transform 0.3s ease 1.6s;\r\n  transform-origin: right;\r\n }\r\n}\r\n\r\n  &__sub {\r\n    @extend .mb-sm;\r\n}\r\n\r\n  &__img {\r\n    height: 300px;\r\n    @extend .mb-sm;\r\n\/\/ \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u304c\u7d42\u308f\u3063\u305f\u3068\u304d\u306b\u8868\u793a\u3057\u305f\u3044\u306e\u3067\r\n    transition: box-shadow 1ms linear 0.8s;\r\n  & > img {\r\n    position: relative;\r\n\/\/ \u30dc\u30c3\u30af\u30b9\u30b7\u30e3\u30c9\u30a6\u3092\u80cc\u9762\u306b\u3064\u3051\u308b\u305f\u3081\u306e\u8a2d\u5b9a\r\n    z-index: -1;\r\n\/\/ \u753b\u50cf\u306b\u306f\u57fa\u672cobject-fit\u3092\u3064\u3051\u308b\r\n    object-fit: cover;\r\n\/\/ \u753b\u50cf\u306e\u4e0a\u90e8\u5206\u3092\u4e2d\u5fc3\u306b\u3057\u305f\u3044\u306e\u3067\r\n    object-position: top;\r\n\/\/ \u5916\u5074\u306e\u89aa\u8981\u7d20\u30bf\u30c6\u30e8\u30b3100\uff05\u3067\u753b\u50cf\u304c\u8868\u793a\u3055\u308c\u308b\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n  &.inview {\r\n\/\/ \u753b\u9762\u5185\u306b\u5165\u3063\u305f\u3068\u304d\u5185\u5074\u306b\u30dc\u30c3\u30af\u30b9\u30b7\u30e3\u30c9\u30a6\u3092\u4ed8\u3051\u308b\u8a2d\u5b9a\r\n    box-shadow: inset 0 0 30px $cBlack;\r\n }\r\n}\r\n\r\n  &__texts {\r\n    @extend .pb-sm;\r\n\/\/ \u6a2a\u7dda\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u8a2d\u5b9a\r\n  &.inview {\r\n  & .world__title::before {\r\n\/\/\u53f3\u304b\u3089\u5de6\u306b\u7dda\u304c\u4f38\u3073\u308b\u3088\u3046\u306b\r\n    transform: translateY(-50%);\r\n  }\r\n }\r\n}\r\n}<\/code><\/pre>\n<\/div>\n
\r\n<\/pre>\n
\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u306e\u90e8\u5206\u306f\u3042\u3068\u3067JavaScript\u3067\u5b9f\u88c5\u3059\u308b<\/p>\n
\u753b\u9762\u306e\u30b5\u30a4\u30ba\u3092\u5909\u3048\u3066\u554f\u984c\u306a\u3051\u308c\u3070\u6b21\u3078<\/h4>\n
4:Flexbox\u3067\u30d5\u30c3\u30bf\u30fc\u306e\u4f5c\u6210<\/h3>\n
\u30a4\u30e1\u30fc\u30b8<\/h4>\n
\"\"<\/p>\n
index.html\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0(Popular Place\u76f4\u4e0b\u304b\u3089)<\/h3>\n
\n
<footer class=\"footer appear up\">\r\n  <div class=\"logo item\">\r\n  <img src=\"images\/logo.svg\" alt=\"\" class=\"logo__img\" \/>\r\n    <span class=\"logo__floroj\">Floroj<\/span>\r\n    <span class=\"logo__de-la-mondo\">\u00a0de la mondo<\/span>\r\n  <\/div>\r\n    <nav class=\"footer__nav\">\r\n      <ul class=\"footer__ul\">\r\n<li class=\"footer__li item\"><a href=\"#\">Service<\/a><\/li>\r\n<li class=\"footer__li item\"><a href=\"#\">Contact<\/a><\/li>\r\n<li class=\"footer__li item\"><a href=\"#\">Company<\/a><\/li>\r\n<li class=\"footer__li item\"><a href=\"#\">Sitemap<\/a><\/li>\r\n      <\/ul>\r\n      <div class=\"footer__copyright item\">\r\n        \u00a9 Ota\r\n      <\/div>\r\n     <\/nav>\r\n<\/footer><\/code><\/pre>\n<\/div>\n
_base.scss\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0<\/h3>\n
\n
.footer {\r\n  padding: 60px 0;\r\n    @extend .content-width;\r\n\r\n  &__nav {\r\n    @extend .flex;\r\n    justify-content: space-between;\r\n\/\/ \u4e2d\u592e\u63c3\u3048\u306b\u3059\u308b\r\n    align-items: center;\r\n    text-align: center;\r\n}\r\n\r\n  &__ul {\r\n  @extend .flex;\r\n\/\/ \u30d1\u30c7\u30a3\u30f3\u30b0\u3084\u30de\u30fc\u30b8\u30f3\u3092\u521d\u671f\u5316\r\n    padding: 0;\r\n    margin: 0;\r\n    list-style: none;\r\n}\r\n\r\n  &__li {\r\n    padding: 0;\r\n    margin: 10px;\r\n\r\n  & > a {\r\n    color: $cSubTitle;\r\n }\r\n}\r\n\r\n  & .logo {\r\n    font-size: 38px;\r\n\/\/ \u4e2d\u592e\u63c3\u3048\u306b\u3059\u308b\r\n    justify-content: center;\r\n }\r\n}\r\n.logo {\r\n    font-size: 42px;\r\n    display: flex;\r\n\r\n  &__img {\r\n    width: 0.7em;\r\n}\r\n\r\n  &__floroj {\r\n    color: $cWineRed;\r\n  }\r\n}<\/code><\/pre>\n<\/div>\n
_600up.scss\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0<\/h3>\n
\n
.footer {\r\n  & .logo {\r\n\/\/ \u5de6\u5bc4\u308a\u306b\u3059\u308b\u3002\u53f3\u5bc4\u308a\u306fflex-end\r\n    justify-content: flex-start;\r\n}\r\n\r\n  &__li {\r\n\/\/ \u691c\u8a3c\u3092\u4f7f\u3044\u306a\u304c\u3089\u4f4d\u7f6e\u8abf\u6574\r\n    margin-left: 0;\r\n    margin-right: 30px;\r\n }\r\n}<\/code><\/pre>\n<\/div>\n
_960up.scss\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0<\/h3>\n
\n
.footer {\r\n  &__li {\r\n    justify-content: flex-start;\r\n }\r\n}<\/code><\/pre>\n<\/div>\n
\u753b\u9762\u306e\u30b5\u30a4\u30ba\u3092\u5909\u3048\u3066\u7570\u5e38\u304c\u306a\u3044\u306e\u3092\u78ba\u8a8d\u3067\u304d\u305f\u3089\u30d5\u30c3\u30bf\u30fc\u306fOK<\/h4>\n","protected":false},"excerpt":{"rendered":"
3:\u6b8b\u308a\u306e\u753b\u9762\u306e\u5b9f\u88c5 \u30a4\u30e1\u30fc\u30b8 index.html\u306b\u4ee5\u4e0b\u306e\u8a18\u8ff0\u3092\u8ffd\u52a0\u30d2\u30fc\u30ed\u30fc\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u76f4\u4e0b <main> <section class=”world”> <div class=”worl […]<\/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-4305","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\/4305","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=4305"}],"version-history":[{"count":6,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/4305\/revisions"}],"predecessor-version":[{"id":7233,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/posts\/4305\/revisions\/7233"}],"wp:attachment":[{"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/media?parent=4305"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/categories?post=4305"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/suzutukiblog.com\/index.php\/wp-json\/wp\/v2\/tags?post=4305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}