{"id":1230,"date":"2020-11-06T16:53:46","date_gmt":"2020-11-06T07:53:46","guid":{"rendered":"https:\/\/www.wetch.co.jp\/?p=1230"},"modified":"2022-01-14T23:20:33","modified_gmt":"2022-01-14T14:20:33","slug":"%e3%80%90css%e3%80%91%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e4%bb%98%e3%81%8d%e3%81%ae%e6%af%94%e7%8e%87%e5%9b%ba%e5%ae%9a%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%82%92%e3%81%a4","status":"publish","type":"post","link":"https:\/\/www.wetch.co.jp\/note\/%e3%80%90css%e3%80%91%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab%e4%bb%98%e3%81%8d%e3%81%ae%e6%af%94%e7%8e%87%e5%9b%ba%e5%ae%9a%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc%e3%82%92%e3%81%a4\/","title":{"rendered":"\u3010css\u3011\u30b5\u30e0\u30cd\u30a4\u30eb\u4ed8\u304d\u306e\u6bd4\u7387\u56fa\u5b9a\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u3064\u304f\u308b"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">EC\u30b7\u30e7\u30c3\u30d7\u306a\u3069\u306e\u5546\u54c1\u8a73\u7d30\u30da\u30fc\u30b8\u3067\u3088\u304f\u307f\u308b\u30bf\u30a4\u30d7\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\u3067\u3059\u3002<br>\u4eca\u56de\u306fslick slider\u3092\u4f7f\u7528\u3057\u3066\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002<br>\u5b9f\u73fe\u3057\u305f\u304b\u3063\u305f\u3053\u3068\u306f\u4e0b\u8a18\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u30b5\u30e0\u30cd\u30a4\u30eb\u4ed8\u304d<\/li><li>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30671\uff1a1\u306e\u6bd4\u7387\u56fa\u5b9a<\/li><li>\u30d0\u30e9\u30d0\u30e9\u306a\u753b\u50cf\u30b5\u30a4\u30ba\u306b\u5bfe\u5fdc\uff08\u898b\u5207\u308c\u306fOK\uff09<\/li><\/ul>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\uff11.main\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u5b9f\u88c5<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML\u3092\u8a18\u8ff0\u3057\u307e\u3059<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n  &lt;meta charset=\"utf-8\">\n  &lt;meta name=\"viewport\" content=\"width=device-width\">\n  &lt;title>JS Bin&lt;\/title>\n    &lt;!--  style\u306e\u8aad\u307f\u8fbc\u307f  -->  \n  &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/slick-carousel\/1.9.0\/slick.css\"\/>\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/slick-carousel\/1.9.0\/slick-theme.css\">\n&lt;\/head>\n&lt;body>\n  &lt;main>\n    &lt;!--  main\u306e\u30b9\u30e9\u30a4\u30c0\u30fc  -->\n    &lt;div class=\"slider\">\n      &lt;div class=\"slider-container\">\n        &lt;div class=\"slider-main\">\n          &lt;img src=\"https:\/\/picsum.photos\/id\/237\/200\/300\" alt=\"\">\n          &lt;img src=\"https:\/\/picsum.photos\/id\/238\/200\/200\" alt=\"\">\n          &lt;img src=\"https:\/\/picsum.photos\/id\/239\/300\/200\" alt=\"\">\n          &lt;img src=\"https:\/\/picsum.photos\/id\/240\/400\/500\" alt=\"\">\n          &lt;img src=\"https:\/\/picsum.photos\/id\/241\/200\/500\" alt=\"\">\n          &lt;img src=\"https:\/\/picsum.photos\/id\/242\/300\/300\" alt=\"\">\n        &lt;\/div>\n      &lt;\/div>\n      &lt;!--  \u30b5\u30e0\u30cd\u30a4\u30eb\u306e\u30b9\u30e9\u30a4\u30c0\u30fc  -->\n      &lt;div class=\"slider-nav-container\">\n        &lt;div class=\"slider-nav\">&lt;\/div>\n      &lt;\/div>\n    &lt;\/div>\n   &lt;\/main>\n\n&lt;!--  sript\u306e\u8aad\u307f\u8fbc\u307f  -->  \n&lt;script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-1.11.0.min.js\">&lt;\/script>\n&lt;script type=\"text\/javascript\" src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/slick-carousel\/1.9.0\/slick.min.js\">&lt;\/script>\n\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u307e\u3060\u30b9\u30e9\u30a4\u30c0\u30fc\u306f\u52d5\u3044\u3066\u304a\u3089\u305a\u3001\u753b\u50cf\u304c\u753b\u9762\u306b\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u72b6\u614b\u3067\u3059\u3002<br><img decoding=\"async\" src=\"%E3%80%90css%E3%80%91%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB%E4%BB%98%E3%81%8D%E3%81%AE%E3%82%B9%E3%83%A9%E3%82%A4%E3%82%BF%E3%82%99%E3%83%BC%E3%82%92%E6%AF%94%E7%8E%87%E5%9B%BA%E5%AE%9A%E3%81%97%E3%81%9F%E3%81%84\/img_01.png\" alt=\"\"><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"924\" height=\"773\" src=\"https:\/\/www.wetch.co.jp\/wp-content\/uploads\/2020\/11\/img_01-1.png\" alt=\"\" class=\"wp-image-1239\" srcset=\"https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_01-1.png 924w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_01-1-300x251.png 300w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_01-1-768x642.png 768w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_01-1-150x125.png 150w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_01-1-696x582.png 696w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_01-1-502x420.png 502w\" sizes=\"auto, (max-width: 924px) 100vw, 924px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">js\u3092\u8a18\u8ff0\u3057\u3066\u30b9\u30e9\u30a4\u30c0\u30fc\u3092\u52d5\u4f5c\u3055\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> $('.slider-main').slick({\n  slidesToShow: 1,\n  slidesToScroll:1,\n  autoplay: true,\n  autoplaySpeed: 3000,\n  dots:false,\n  arrows: false,\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u306e\u6642\u70b9\u3067\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u306f\u9069\u5f53\u3067\u3059\u304c\u3001\u30b9\u30e9\u30a4\u30c0\u30fc\u3068\u3057\u3066\u52d5\u4f5c\u3057\u3066\u304f\u308c\u307e\u3059\u3002\u7c21\u5358\u3067\u826f\u3044\u3067\u3059\u3002\u3002\u3002\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b9\u30e9\u30a4\u30c0\u30fc\u306b\u30b9\u30bf\u30a4\u30eb\u3092\u304b\u3051\u3066\u3044\u304d\u307e\u3059\u3002<br>\u30dd\u30a4\u30f3\u30c8\u306f\u4e0b\u8a18\u306e\u901a\u308a\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>slider\u3092\u5305\u3080slider-container\u306bpadding-top\u30671\uff1a1\u306e\u6bd4\u7387\u56fa\u5b9a\u3057\u3001overflow:hidden<\/li><li>*\u3088\u304f\u307f\u308bYouTube\u306e\u6bd4\u7387\u56fa\u5b9a\u3068\u540c\u3058\u65b9\u6cd5\u3067\u3059\u3002<\/li><li>slider-main\u914d\u4e0b\u5168\u3066\u306e\u8981\u7d20\u306bwidth:100%,height100\uff05\u3092\u6307\u5b9a<br>*\u30b9\u30e9\u30a4\u30c9\u8868\u793a\u9818\u57df\u304c\u4f59\u3089\u306a\u3044\u3088\u3046\u306b\u753b\u50cf\u304c\u4f38\u3073\u3066\u304f\u308c\u307e\u3059\u3002<\/li><li>img\u306bobject-fit:cover\u3092\u6307\u5b9a<br>*\u753b\u50cf\u306e\u6bd4\u7387\u3092\u7dad\u6301\u3057\u305f\u307e\u307e\u4f38\u3073\u3066\u304f\u308c\u307e\u3059\u3002<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>.slider{\n    width: 50%;\n    margin: 60px auto;\n    &amp;-container{\n        width: 100%;\n        overflow: hidden;\n        padding-top: 100%; \/\/1:1\u306b\u3057\u305f\u3044\u306e\u3067100%\n        position: relative;\n    }\n    &amp;-main{\n        width: 100%;\n        height: 100%;\n        transform: translate(-50%, -50%);\n        position: absolute;\n        top: 50%;\n        left: 50%;\n    }\n    &amp;-main *{  \/\/slider-main\u914d\u4e0b\u3059\u3079\u3066\u306b\n        width: 100%;\n        height: 100%;\n    }\n    img{\n        \/\/ background-size: cover\u3068\u540c\u3058\u52b9\u679c\n        object-fit: cover;\n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u753b\u50cf\u3067\u306f\u4f1d\u308f\u308a\u3065\u3089\u3044\u3067\u3059\u304c\u3001\u6b63\u65b9\u5f62\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\u304c\u5b8c\u6210\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"865\" height=\"613\" src=\"https:\/\/www.wetch.co.jp\/wp-content\/uploads\/2020\/11\/img_02-1.png\" alt=\"\" class=\"wp-image-1240\" srcset=\"https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_02-1.png 865w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_02-1-300x213.png 300w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_02-1-768x544.png 768w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_02-1-150x106.png 150w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_02-1-696x493.png 696w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_02-1-593x420.png 593w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_02-1-100x70.png 100w\" sizes=\"auto, (max-width: 865px) 100vw, 865px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uff12.\u30b5\u30e0\u30cd\u30a4\u30eb\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u5b9f\u88c5<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">HTML\u306b\u30b5\u30e0\u30cd\u30a4\u30eb\u7528\u306e\u753b\u50cf\u3092\u8ffd\u52a0<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>      &lt;!--  \u30b5\u30e0\u30cd\u30a4\u30eb\u306e\u30b9\u30e9\u30a4\u30c0\u30fc  -->\n      &lt;div class=\"slider-nav-container\">\n        &lt;div class=\"slider-nav\">\n            &lt;img src=\"https:\/\/picsum.photos\/id\/237\/200\/300\" alt=\"\">\n            &lt;img src=\"https:\/\/picsum.photos\/id\/238\/200\/200\" alt=\"\">\n            &lt;img src=\"https:\/\/picsum.photos\/id\/239\/300\/200\" alt=\"\">\n            &lt;img src=\"https:\/\/picsum.photos\/id\/240\/400\/500\" alt=\"\">\n            &lt;img src=\"https:\/\/picsum.photos\/id\/241\/200\/500\" alt=\"\">\n            &lt;img src=\"https:\/\/picsum.photos\/id\/242\/300\/300\" alt=\"\">  \n        &lt;\/div>\n      &lt;\/div><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Js\u306b\u30ca\u30d3\u7528\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> $('.slider-main').slick({\n  slidesToShow: 1,\n  slidesToScroll:1,\n  autoplay: true,\n  autoplaySpeed: 3000,\n  dots:false,\n  arrows: false,\n  \/\/ nav\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\u3068\u30ea\u30f3\u30af\u3055\u305b\u308b\n  asNavFor:'.slider-nav',\n});\n$('.slider-nav').slick({\n  \/\/ main\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\u3068\u30ea\u30f3\u30af\u3055\u305b\u308b\n  asNavFor:'.slider-main',\n  focusOnSelect: true,\n  slidesToShow:5,\n  slidesToScroll:1,\n  arrows:false,\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b5\u30e0\u30cd\u30a4\u30eb\u306enav\u30b9\u30e9\u30a4\u30c0\u30fc\u304c\u52d5\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"702\" height=\"719\" src=\"https:\/\/www.wetch.co.jp\/wp-content\/uploads\/2020\/11\/img_03.png\" alt=\"\" class=\"wp-image-1241\" srcset=\"https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_03.png 702w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_03-293x300.png 293w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_03-150x154.png 150w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_03-300x307.png 300w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_03-696x713.png 696w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_03-410x420.png 410w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_03-356x364.png 356w\" sizes=\"auto, (max-width: 702px) 100vw, 702px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u3053\u3061\u3089\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\u3082\u540c\u3058\u3088\u3046\u306b\u6bd4\u7387\u56fa\u5b9a<br>Padding-top\u306e\u6bd4\u7387\u3060\u3051\u5909\u66f4\u3057\u307e\u3059<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.slider-nav-container{\n    width: 100%;\n    overflow: hidden;\n    \/\/ \u4eca\u56de\u306f\u30b5\u30e0\u30cd\u30a4\u30eb\uff15\u679a\u8868\u793a\u306a\u306e\u3067padding-top\u306f20%\n    padding-top: 20%;\n    position: relative;\n    .slider-nav{\n        width: 100%;\n        height: 100%;\n        transform: translate(-50%, -50%);\n        position: absolute;\n        top: 50%;\n        left: 50%;\n    }\n    .slider-nav *{\n        width: 100%;\n        height: 100%;\n    }\n    img{\n        object-fit: cover;\n    }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b8c\u6210!!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u753b\u50cf\u3067\u306f\u601d\u3063\u305f\u3088\u308a\u4f1d\u308f\u308a\u3065\u3089\u304b\u3063\u305f\u3002\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"605\" src=\"https:\/\/www.wetch.co.jp\/wp-content\/uploads\/2020\/11\/img_04-2.png\" alt=\"\" class=\"wp-image-1243\" srcset=\"https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_04-2.png 640w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_04-2-300x284.png 300w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_04-2-150x142.png 150w, https:\/\/www.wetch.co.jp\/note\/wp-content\/uploads\/2020\/11\/img_04-2-444x420.png 444w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>EC\u30b7\u30e7\u30c3\u30d7\u306a\u3069\u306e\u5546\u54c1\u8a73\u7d30\u30da\u30fc\u30b8\u3067\u3088\u304f\u307f\u308b\u30bf\u30a4\u30d7\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\u3067\u3059\u3002\u4eca\u56de\u306fslick slider\u3092\u4f7f\u7528\u3057\u3066\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002\u5b9f\u73fe\u3057\u305f\u304b\u3063\u305f\u3053\u3068\u306f\u4e0b\u8a18\u3002 \u30b5\u30e0\u30cd\u30a4\u30eb\u4ed8\u304d \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30671\uff1a1\u306e\u6bd4\u7387\u56fa\u5b9a \u30d0\u30e9\u30d0\u30e9\u306a\u753b\u50cf\u30b5\u30a4\u30ba\u306b [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1246,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[214],"tags":[24,45,60],"class_list":["post-1230","post","type-post","status-publish","format-standard","has-post-thumbnail","category-214","tag-web","tag-css"],"_links":{"self":[{"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/posts\/1230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/comments?post=1230"}],"version-history":[{"count":0,"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/posts\/1230\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/media\/1246"}],"wp:attachment":[{"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/media?parent=1230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/categories?post=1230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wetch.co.jp\/note\/wp-json\/wp\/v2\/tags?post=1230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}