{"id":1868,"date":"2022-03-01T13:40:12","date_gmt":"2022-03-01T04:40:12","guid":{"rendered":"https:\/\/www.dogrow.net\/hp\/?p=1868"},"modified":"2022-03-27T13:51:26","modified_gmt":"2022-03-27T04:51:26","slug":"blog116","status":"publish","type":"post","link":"https:\/\/www.dogrow.net\/hp\/blog116\/","title":{"rendered":"(116) CSS\u3067\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u6307\u5b9a\u306e\u3042\u308c\u3084\u3053\u308c\u3084"},"content":{"rendered":"<h1 class=\"my_h\">1. \u554f\u984c\u70b9<\/h1>\n<p>CSS\u3067\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u6307\u5b9a\u306b\u306f\u3044\u308d\u3044\u308d\u306a\u65b9\u6cd5\u304c\u3042\u308b\u3002<br \/>\n<span class=\"my_fc_crimsonB\">pt px em rem vw vh % &#8230;<\/span><\/p>\n<p>\u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3092\u4f5c\u3063\u3066\u3044\u308b\u3068\u304d\u306b<br \/>\n\u305d\u306e\u6642\u306e\u6c17\u5206\u3067\u4e0a\u8a18\u306e\u5358\u4f4d\u3092\u6df7\u5728\u3055\u305b\u3066\u3057\u307e\u3046\u3053\u3068\u3082\u3057\u3070\u3057\u3070&#8230;<\/p>\n<p>\u305d\u3057\u3066\u3001\u30b5\u30a4\u30c8\u306e\u898f\u6a21\u304c\u5927\u304d\u304f\u306a\u3063\u3066\u304f\u308b\u3068\u3001\u5f8c\u3067\u5f8c\u6094\u3059\u308b\u3002<br \/>\n<span class=\"my_fc_crimsonBBig\">\u304d\u3061\u3093\u3068\u30eb\u30fc\u30eb\u3092\u6c7a\u3081\u3066\u304a\u3051\u3070\u826f\u304b\u3063\u305f&#8230;<\/span><br \/>\n\u3068&#8230;<\/p>\n<h1 class=\"my_h\">2. \u30de\u30a4\u30eb\u30fc\u30eb\u3092\u6c7a\u3081\u308b<\/h1>\n<p>\u7d4c\u7def\u306f\u5f8c\u3067\u8ffd\u8a18\u3057\u3088\u3046\u3002<br \/>\n\u307e\u305a\u306f\u5099\u5fd8\u9332\u3060\u3051\u66f8\u3044\u3066\u304a\u304f\u3002<\/p>\n<h3 class=\"my_h\">(1) \u307e\u305a\u306f\u3001\u57fa\u6e96\u3068\u306a\u308b\u30b5\u30a4\u30ba\u3092\u6c7a\u3081\u308b\u3002<\/h3>\n<p>\u3053\u3053\u3067\u306f\u3001\u30d1\u30bd\u30b3\u30f3\u7528\u3068\u30b9\u30de\u30db\u7528\u3068\u3067\u57fa\u6e96\u3068\u306a\u308b\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3092\u5909\u3048\u305f\u3002<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\nhtml{\r\n  @media (min-width: 768px){  \/* \u30d1\u30bd\u30b3\u30f3\u7528 : \u753b\u9762\u5e45\u306e1\/100 *\/\r\n    font-size:1vw;\r\n  }\r\n  @media (max-width: 767px){  \/* \u30b9\u30de\u30db\u7528 : \u753b\u9762\u5e45\u306e\u7d041\/33 *\/\r\n    font-size:3vw;\r\n  }\r\n}\r\n<\/pre>\n<p><span class=\"my_fc_deeppinkBBig\">1vw\u3068\u306f\uff1f<\/span><br \/>\n<span class=\"my_fc_deeppink\">viewport\u5e45\uff08\uff1d\u753b\u9762\u5e45\uff09\u306e1\/100\uff08\uff1d1%\uff09 \u306e\u30b5\u30a4\u30ba\u3092\u610f\u5473\u3059\u308b\u3002<\/span><\/p>\n<h3 class=\"my_h\">(2) \u5404\u8981\u7d20\u306e\u6587\u5b57\u30b5\u30a4\u30ba\u3092\u6c7a\u3081\u308b\u3002<\/h3>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\np.mytext{\r\n  font-size: 1.5rem;    \/* html\u3067\u5b9a\u7fa9\u3057\u305f\u57fa\u6e96\u6587\u5b57\u30b5\u30a4\u30ba\u306e1.5\u500d\u306e\u5927\u304d\u3055\u306e\u6587\u5b57\u3092\u4f7f\u3046\u3002 *\/\r\n  padding:   0.5rem;    \/* \u67a0\u5185\u306e\u4e0a\u4e0b\u5de6\u53f3\u306e\u4f59\u767d\u3092\u305d\u308c\u305e\u308c\u57fa\u6e96\u6587\u5b57\u30b5\u30a4\u30ba\u306e0.5\u500d\u306e\u5927\u304d\u3055\u306b\u3059\u308b\u3002 *\/\r\n}\r\n<\/pre>\n<p>\u4e0a\u8a18(1)\u306e\u8a2d\u5b9a\u306b\u3088\u308a\u3001\u305d\u308c\u4ee5\u964d\u306e rem\u6307\u5b9a\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308b\u3002<br \/>\n\u30d1\u30bd\u30b3\u30f3\u7528 : 1rem = 1vw<br \/>\n\u30b9\u30de\u30db\u7528\u3000 : 1rem = 3vw<br \/>\nfont-size\u3060\u3051\u3067\u306a\u304f padding\u3084 margin\u306a\u3069\u3067\u6587\u5b57\u30b5\u30a4\u30ba\u3092\u610f\u8b58\u3057\u305f\u3044\u5834\u5408\u30011\u6587\u5b57\u5206\u306e\u5e45\u3084\u9ad8\u3055\u3092 1rem\u3068\u3057\u3066\u6307\u5b9a\u3067\u304d\u308b\u3002<br \/>\nvw\u304c\u5e83\u307e\u3063\u3066\u304f\u308c\u305f\u304a\u304b\u3052\u3067\u4fbf\u5229\u306b\u306a\u3063\u305f\u306a\u3041&#8230;<\/p>\n<p><span class=\"my_fc_deeppinkBBig\">1rem\u3068\u306f\uff1f<\/span><br \/>\n<span class=\"my_fc_deeppink\">root\u8981\u7d20\uff08\uff1dhtml\uff09\u306b\u5bfe\u3059\u308b\u76f8\u5bfe\u6307\u5b9a\uff08\uff1dem\u6307\u5b9a\uff09\u3092\u610f\u5473\u3059\u308b\u3002<\/span><\/p>\n<h1 class=\"my_h\">3. \u5b9f\u969b\u306b\u3084\u3063\u3066\u307f\u308b<\/h1>\n<h3 class=\"my_h\">(1) \u57fa\u6e96\u6587\u5b57\u30b5\u30a4\u30ba = \u753b\u9762\u5e45\u306e1\/100<\/h3>\n<p><a href=\"https:\/\/www.dogrow.net\/hp\/sample\/00116\/case1\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.dogrow.net\/hp\/sample\/00116\/case1\/<\/a><br \/>\n<iframe src=\"https:\/\/www.dogrow.net\/hp\/sample\/00116\/case1\/\" style=\"width:50rem;height:10rem\" class=\"my_add_bs1\"><\/iframe><\/p>\n<h3 class=\"my_h\">(1) \u57fa\u6e96\u6587\u5b57\u30b5\u30a4\u30ba = \u753b\u9762\u5e45\u306e1\/33<\/h3>\n<p><a href=\"https:\/\/www.dogrow.net\/hp\/sample\/00116\/case2\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.dogrow.net\/hp\/sample\/00116\/case2\/<\/a><br \/>\n<iframe src=\"https:\/\/www.dogrow.net\/hp\/sample\/00116\/case2\/\" style=\"width:50rem;height:26rem\" class=\"my_add_bs1\"><\/iframe><\/p>\n<hr class=\"my_hr_bottom\">\n","protected":false},"excerpt":{"rendered":"<p>1. \u554f\u984c\u70b9 CSS\u3067\u306e\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u6307\u5b9a\u306b\u306f\u3044\u308d\u3044\u308d\u306a\u65b9\u6cd5\u304c\u3042\u308b\u3002 pt px em rem vw vh % &#8230; \u30db\u30fc\u30e0\u30da\u30fc\u30b8\u3092\u4f5c\u3063\u3066\u3044\u308b\u3068\u304d\u306b \u305d\u306e\u6642\u306e\u6c17\u5206\u3067\u4e0a\u8a18\u306e\u5358\u4f4d\u3092\u6df7\u5728\u3055\u305b\u3066\u3057\u307e\u3046\u3053\u3068\u3082\u3057\u3070\u3057\u3070&#038;#\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.dogrow.net\/hp\/blog116\/\">\u7d9a\u304d\u3092\u8aad\u3080 &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[],"class_list":["post-1868","post","type-post","status-publish","format-standard","hentry","category-css"],"views":1135,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/1868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/comments?post=1868"}],"version-history":[{"count":20,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/1868\/revisions"}],"predecessor-version":[{"id":2034,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/1868\/revisions\/2034"}],"wp:attachment":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/media?parent=1868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/categories?post=1868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/tags?post=1868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}