{"id":1651,"date":"2019-02-13T17:15:11","date_gmt":"2019-02-13T08:15:11","guid":{"rendered":"http:\/\/4koma-web.com\/coding\/?p=1651"},"modified":"2019-02-13T18:57:55","modified_gmt":"2019-02-13T09:57:55","slug":"%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e5%9b%ba%e5%ae%9a%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%ae%e4%bd%9c%e6%88%90","status":"publish","type":"post","link":"https:\/\/4koma-web.com\/coding\/%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e5%9b%ba%e5%ae%9a%e3%83%98%e3%83%83%e3%83%80%e3%83%bc%e3%81%ae%e4%bd%9c%e6%88%90\/","title":{"rendered":"\u53ef\u5909\u5bfe\u5fdc\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u56fa\u5b9a\u30d8\u30c3\u30c0\u30fc\u306e\u4f5c\u6210"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/4koma-web.com\/coding\/wp-content\/uploads\/2019\/02\/\u30b9\u30af\u30ed\u30fc\u30eb.png\" alt=\"\" width=\"1361\" height=\"948\" class=\"alignnone size-full wp-image-1652\" \/><\/p>\n<p>\u4eca\u56de\u306f\u53ef\u5909\u5bfe\u5fdc\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u56fa\u5b9a\u30d8\u30c3\u30c0\u30fc\u306e\u4f5c\u6210\u306b\u3064\u3044\u3066\u3067\u3059\u3002<\/p>\n<p>\u753b\u50cf\u306e\u3088\u3046\u306b\u30b9\u30e9\u30a4\u30c0\u30fc\u3001\u4eca\u56de\u306e\u5834\u5408\u30d6\u30e9\u30a6\u30b6\u306e\u9ad8\u3055\u6700\u5927\u307e\u3067\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u30b9\u30e9\u30a4\u30c0\u30fc\u753b\u50cf\u306e\u4e0b\u306b\u3001\u30b0\u30ed\u30fc\u30d0\u30eb\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u3066\u3001<br \/>\n\u30b0\u30ed\u30fc\u30d0\u30eb\u30ca\u30d3\u304c\u3061\u3087\u3046\u3069\u30d6\u30e9\u30a6\u30b6\u306e\u30c8\u30c3\u30d7\u306b\u6765\u308b\u6240\u307e\u3067\u30b9\u30af\u30ed\u30fc\u30eb\u3059\u308b\u3068\u3001\u30d8\u30c3\u30c0\u30fc\u56fa\u5b9a\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n<p>\u25a0html<\/p>\n<pre>\r\n<header>\r\n\t\t<p class=\"header-text\">\u30d8\u30c3\u30c0\u30fc\u30c6\u30ad\u30b9\u30c8\u30d8\u30c3\u30c0\u30fc\u30c6\u30ad\u30b9\u30c8\u30d8\u30c3\u30c0\u30fc\u30c6\u30ad\u30b9\u30c8\u30d8\u30c3\u30c0\u30fc\u30c6\u30ad\u30b9\u30c8\u30d8\u30c3\u30c0\u30fc\u30c6\u30ad\u30b9\u30c8<\/p>\r\n\r\n\r\n\t\t<ul class=\"slider\"><!--slick.js\u306a\u3069 \u4ed6\u3001\u753b\u50cf\u3084,bx\u30b9\u30e9\u30a4\u30c0\u30fc etc-->\r\n\t\t\t<li><img decoding=\"async\" src=\"assets\/images\/main_img_01.png\" alt=\"\"><\/li>\r\n\t\t\t<li><img decoding=\"async\" src=\"assets\/images\/main_img_02.png\" alt=\"\"><\/li>\r\n\t\t\t<li><img decoding=\"async\" src=\"assets\/images\/main_img_03.png\" alt=\"\"><\/li>\r\n\t\t<\/ul>\r\n\r\n\r\n\t\t<div class=\"menu \">\r\n\t\t\t<div class=\"container\">\r\n\t\t\t\t<h1 class=\"logo\"><a href=\"#\">\u30ed\u30b4<\/a><\/h1>\r\n\t\t\t\t<nav class=\"navi\">\r\n\t\t\t\t\t<ul>\r\n\t\t\t\t\t\t<li><a href=\"#\">\u30e1\u30cb\u30e5\u30fc<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\"#\">\u30e1\u30cb\u30e5\u30fc<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\"#\">\u30e1\u30cb\u30e5\u30fc<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\"#\">\u30e1\u30cb\u30e5\u30fc<\/a><\/li>\r\n\t\t\t\t\t\t<li><a href=\"#\">\u30e1\u30cb\u30e5\u30fc<\/a><\/li>\r\n\t\t\t\t\t<\/ul>\r\n\t\t\t\t<\/nav>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/header>\r\n<\/pre>\n<p>\u25a0css<\/p>\n<pre>\r\nheader {\r\n    height: 100vh;\r\n}\r\n\/*header\u4e0a\u90e8\u306e\u30c6\u30ad\u30b9\u30c8*\/\r\n.header-text {\r\n    background: #303333;\r\n    font-size: 1.4rem;\r\n    color: #FFF;\r\n    text-align: center;\r\n    padding: 10px 0;\r\n}\r\n\/*\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u90e8\u5206*\/\r\n.container {\r\n    width: 1100px;\r\n    margin: auto;\r\n}\r\n.menu .container {\r\n    display: -webkit-box;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-align: center;\r\n    -ms-flex-align: center;\r\n    align-items: center;\r\n    -webkit-box-pack: justify;\r\n    -ms-flex-pack: justify;\r\n    justify-content: space-between;\r\n}\r\n.menu .container .logo {\r\n    max-width: 154px;\r\n}\r\nmenu .container .navi {\r\n    width: calc(100% - 154px);\r\n}\r\n.menu .container .navi ul {\r\n    display: -webkit-box;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-box-pack: end;\r\n    -ms-flex-pack: end;\r\n    justify-content: flex-end;\r\n}\r\n.menu .container .navi ul li {\r\n    margin: 0 30px;\r\n}\r\n\r\n\/*\u30d8\u30c3\u30c0\u30fc\u56fa\u5b9a\u7528*\/\r\nheader .menu.is-fixed {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    bottom: auto;\r\n    margin-top: 0;\r\n    width: 100%;\r\n    z-index: 9999;\r\n}\r\n\r\n\/*\u30b9\u30e9\u30a4\u30c0\u30fc\u95a2\u9023 slick.js\u306e\u5834\u5408*\/\r\nheader .slider .slick-slide img {\r\n    -o-object-fit: cover;\r\n    object-fit: cover;\r\n    width: 100%;\r\n}\r\n<\/pre>\n<p>\u25a0js<\/p>\n<pre>\r\n\/\/slick.js\u3092\u4f7f\u7528\u306e\u5834\u5408\r\n$(function() {\r\n\t$('.slider').slick({\r\n\t\tautoplay: true,\r\n\t\tarrows: false,\r\n\t});\r\n});\r\n<\/pre>\n<pre>\r\n\/\/\u30a6\u30a3\u30f3\u30c9\u30a6\u306e\u9ad8\u3055\u304b\u3089\u30d8\u30c3\u30c0\u30fc\u306e\u30c6\u30ad\u30b9\u30c8\u306e\u9ad8\u3055\u3092\u5f15\u3044\u305f\u5206\u306e\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u9ad8\u3055\u3092\u6c7a\u5b9a\r\n$(window).on('load resize', function() {\r\n  var he = $('.header-text').outerHeight();\r\n\r\n  var he =  'calc(100vh - ' + he + 'px)';\r\n\t$('header .slider .slick-slide img').css('height',he);\r\n});\r\n<\/pre>\n<pre>\r\n\/\/\u30d8\u30c3\u30c0\u30fc\u56fa\u5b9a\r\n$(window).on('load resize', function() {\r\n\r\n  var nav = jQuery('header .menu');\r\n\tvar slH = $('.slider').outerHeight();\u3000\/\/\u30b9\u30e9\u30a4\u30c0\u30fc\u306e\u9ad8\u3055\u62fe\u5f97\r\n\tvar he = $('.header-text').outerHeight();\u3000\/\/\u30d8\u30c3\u30c0\u30fc\u306e\u30c6\u30ad\u30b9\u30c8\u306e\u9ad8\u3055\u62fe\u5f97\r\n\tvar navH = $('header .menu').outerHeight();\u3000\/\/\u30b0\u30ed\u30fc\u30d0\u30eb\u30ca\u30d3\u306e\u9ad8\u3055\u62fe\u5f97\r\n\r\n\tvar slH = slH + he - navH;\u3000\r\n\tvar flMenu = function() {\r\n\t   var win = jQuery(window).scrollTop();\r\n\t\t\t\r\n\t\t\tif (win > slH) {\r\n\t\t\t\t\tnav.addClass('is-fixed');\r\n\t\t\t} else {\r\n\t\t\t\t\tnav.removeClass('is-fixed');\r\n\t\t\t}\r\n\t}\r\n\tjQuery(window).scroll(flMenu);\r\n\tjQuery(window).ready(flMenu);\r\n\tjQuery('body').bind('touchmove', flMenu);\r\n});\r\n<\/pre>\n<p>\u30d6\u30e9\u30a6\u30b6\u753b\u9762\u3092\u30ea\u30b5\u30a4\u30ba\u3057\u3066\u753b\u50cf\u306e\u9ad8\u3055\u304c\u5909\u308f\u3063\u3066\u3082\u3001\u5909\u66f4\u3055\u308c\u308b\u305f\u3073\u306b\u3001<br \/>\n\u30d8\u30c3\u30c0\u30fc\u5185\u306e\u8981\u7d20\u306e\u9ad8\u3055\u3092\u53d6\u5f97\u3057\u3066\u8a08\u7b97\u3057\u3066\u3044\u308b\u306e\u3067\u3001<br \/>\n\u753b\u9762\u5e45\u306b\u5f71\u97ff\u306a\u304f\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u305f\u3089\u30d8\u30c3\u30c0\u30fc\u304c\u30c8\u30c3\u30d7\u3067\u56fa\u5b9a\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4eca\u56de\u306f\u53ef\u5909\u5bfe\u5fdc\u306e\u30b9\u30af\u30ed\u30fc\u30eb\u56fa\u5b9a\u30d8\u30c3\u30c0\u30fc\u306e\u4f5c\u6210\u306b\u3064\u3044\u3066\u3067\u3059\u3002 \u753b\u50cf\u306e\u3088\u3046\u306b\u30b9\u30e9\u30a4\u30c0\u30fc\u3001\u4eca\u56de\u306e\u5834\u5408\u30d6\u30e9\u30a6\u30b6\u306e\u9ad8\u3055\u6700\u5927\u307e\u3067\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u30b9\u30e9\u30a4\u30c0\u30fc\u753b\u50cf\u306e\u4e0b\u306b\u3001\u30b0\u30ed\u30fc\u30d0\u30eb\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u3066\u3001 \u30b0\u30ed\u30fc\u30d0\u30eb\u30ca\u30d3\u304c\u3061\u3087\u3046\u3069 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"","_original_post":"","footnotes":""},"categories":[1],"tags":[],"publishpress_future_action":{"enabled":false,"date":"2026-04-21 23:32:15","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category"},"_links":{"self":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/posts\/1651"}],"collection":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/comments?post=1651"}],"version-history":[{"count":0,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/posts\/1651\/revisions"}],"wp:attachment":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/media?parent=1651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/categories?post=1651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/tags?post=1651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}