{"id":1478,"date":"2018-09-05T19:11:20","date_gmt":"2018-09-05T10:11:20","guid":{"rendered":"http:\/\/4koma-web.com\/coding\/?p=1478"},"modified":"2018-09-05T19:11:20","modified_gmt":"2018-09-05T10:11:20","slug":"viewport%e3%81%ae%e5%b9%85%e3%81%ab%e5%bf%9c%e3%81%98%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%8f%af%e5%a4%89%e3%81%95%e3%81%9b%e3%82%8b","status":"publish","type":"post","link":"https:\/\/4koma-web.com\/coding\/viewport%e3%81%ae%e5%b9%85%e3%81%ab%e5%bf%9c%e3%81%98%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%8f%af%e5%a4%89%e3%81%95%e3%81%9b%e3%82%8b\/","title":{"rendered":"viewport\u306e\u5e45\u306b\u5fdc\u3058\u3066\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3092\u53ef\u5909\u3055\u305b\u308b"},"content":{"rendered":"<p>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30b5\u30a4\u30c8\u3067\u306fpc\u8868\u793a\u306e\u6642\u3068\u30bf\u30d6\u30ec\u30c3\u30c8\u3001\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u306e\u753b\u9762\u306b\u5fdc\u3058\u3066\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u3068\u30b5\u30a4\u30ba\u304c\u53ef\u5909\u3059\u308b\u306e\u304c\u4e00\u822c\u7684\u3067\u3059\u3002<\/p>\n<p>\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3082\u540c\u69d8\u3067\u3001\u6a5f\u7a2e\u306b\u3088\u3063\u3066\u898b\u3084\u3059\u3044\u3088\u3046\u8abf\u6574\u3057\u3066\u3044\u304f\u306e\u3067\u3059\u304c\u3001<br \/>\n\u30d6\u30ec\u30a4\u30af\u30dd\u30a4\u30f3\u30c8\u306b\u5fdc\u3058\u3066\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3092\u5909\u66f4\u3057\u3066\u3044\u304f\u306e\u306f\u306a\u304b\u306a\u304b\u624b\u9593\u306a\u90e8\u5206\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u305d\u3053\u3067\u3001vw\u3084vh\u304c\u4fbf\u5229\u3067\u3059\u3001\u753b\u9762\u5e45\u5168\u4f53\u306b\u753b\u50cf\u3092\u5927\u304d\u304f\u6307\u5b9a\u3059\u308b\u5834\u5408\u3084\u3001\u6bd4\u7387\u3092\u305d\u308d\u3048\u3066\u7e2e\u5c0f\u3057\u305f\u3044\u5834\u5408<\/p>\n<pre>\r\n.content{\r\n   width:calc((100vw) * 2 \/ 3 );\r\n   height:calc((100vw) * 1 \/ 3 );\r\n}\r\n<\/pre>\n<p>\u4e0a\u8a18\u306e\u3088\u3046\u306b\u6307\u5b9a\u3059\u308b\u3053\u3068\u3067\u5e38\u306b\u6bd4\u7387\u3092\u305d\u308d\u3048\u3066\u7e2e\u5c0f\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<p>\u30d5\u30a9\u30f3\u30c8\u306b\u3082vw,vh\u3092\u6307\u5b9a\u53ef\u80fd\u3067\u3001<\/p>\n<p>\u30d3\u30e5\u30fc\u30dd\u30fc\u30c8\u5e45 375px\u306e\u5834\u5408\u3001\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba15px\u3067\u8868\u793a\u3055\u305b\u308b\u5834\u5408<\/p>\n<p>15px \u00f7 375px \u00d7 100(%) = 4<\/p>\n<pre>\r\n.content p{\r\n    font-size: 4vw\r\n}\r\n<\/pre>\n<p>\u3068\u4e0a\u8a18\u306e\u6307\u5b9a\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u305f\u3060\u3057\u3001pc\u3068\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u3068\u3067\u540c\u3058\u6307\u5b9a\u306b\u3057\u3066\u3057\u307e\u3046\u3068\u3001\u30d6\u30e9\u30a6\u30b6\u5e45\u306b\u3088\u3063\u3066\u3001pc\u3067\u898b\u305f\u6642\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u304c\u3068\u3066\u3082\u5927\u304d\u304f\u306a\u3063\u3066\u3057\u307e\u3046\u306e\u3067\u3001<br \/>\n\u305d\u3046\u3044\u3063\u305f\u5834\u5408\u3001\u30d6\u30ec\u30a4\u30af\u30dd\u30a4\u30f3\u30c8\u3054\u3068\u306b\u6307\u5b9a\u3057\u3066\u3044\u304f\u3068\u3088\u3044\u3067\u3057\u3087\u3046<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30b5\u30a4\u30c8\u3067\u306fpc\u8868\u793a\u306e\u6642\u3068\u30bf\u30d6\u30ec\u30c3\u30c8\u3001\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u306e\u753b\u9762\u306b\u5fdc\u3058\u3066\u3001\u30b3\u30f3\u30c6\u30f3\u30c4\u3068\u30b5\u30a4\u30ba\u304c\u53ef\u5909\u3059\u308b\u306e\u304c\u4e00\u822c\u7684\u3067\u3059\u3002 \u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3082\u540c\u69d8\u3067\u3001\u6a5f\u7a2e\u306b\u3088\u3063\u3066\u898b\u3084\u3059\u3044\u3088\u3046\u8abf\u6574\u3057\u3066\u3044\u304f\u306e\u3067\u3059\u304c\u3001 \u30d6\u30ec\u30a4\u30af\u30dd\u30a4\u30f3\u30c8\u306b\u5fdc\u3058\u3066 [&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:55:59","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category"},"_links":{"self":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/posts\/1478"}],"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=1478"}],"version-history":[{"count":0,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/posts\/1478\/revisions"}],"wp:attachment":[{"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/media?parent=1478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/categories?post=1478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/4koma-web.com\/coding\/wp-json\/wp\/v2\/tags?post=1478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}